HTML Table
An HTML table is a way to organize and display data in a structured format using rows and columns. Tables are created with the <table> tag and are commonly used to present information such as student reports, schedules, product details, and price lists.
Why HTML Tables are Used?
HTML tables are mainly used to organize and present data in a structured way. A table arranges information in rows and columns, which makes it easier to read, compare, and analyze.
1. To Display Tabular Data
The primary purpose of tables is to show data that naturally fits into a grid format.
Example: Student marksheet, product price list, schedules.
2. Easy Comparison of Data
Tables allow users to compare values side by side.
Example: Comparing features of different mobile phones or laptops.
3. Organizing Reports & Schedules
- Employee attendance sheet
- Timetables
- Financial reports
- Sports scorecards
Tables make these easy to read.
4. For Accessibility
Screen readers and assistive technologies can read tables row by row, which makes structured data more accessible to visually impaired users when used correctly with <th> and captions.
5. Historical Use for Page Layouts (Not Recommended Now)
In the early days of web design (before CSS became popular), tables were often misused for page layouts.
Example: Websites used to arrange menus, sidebars, and content using tables.
Basic Structure of a HTML Table
The <table> tag is the main container. Inside it, rows are defined with <tr> and columns with <td> (for data) or <th> (for headings).
Syntax :
<table>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>Output :
HTML Table Row & Column
Tables are made up of rows and columns. In HTML, three important tags are used inside a table:
<tr> – Table Row
- Stands for Table Row.
- Used to create a horizontal row in the table.
- Inside a row, we place either
<td>(data cells) or<th>(header cells). - A table can have multiple
<tr>elements.
Example:
<table border="1">
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>Output :
<td> – Table Data Cell
- Stands for Table Data.
- Used inside a
<tr>to define a normal cell. - By default:
- Text is left-aligned.
- Text is not bold.
- You can insert text, images, links, or even another table inside
<td>.
Example:
<table border="1">
<tr>
<td>Rahul</td>
<td>21</td>
<td>Delhi</td>
</tr>
</table>Output :
<th> – Table Header Cell
- Stands for Table Header.
- Defines a heading cell for a column or row.
- By default:
- Text is bold.
- Text is center-aligned.
- Improves accessibility & SEO because search engines and screen readers understand it as a heading.
- Commonly placed inside
<thead>or the first<tr>.
Example:
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>Priya</td>
<td>25</td>
<td>Mumbai</td>
</tr>
</table>Output :
Complete HTML example demonstrating <tr>, <td>, and <th>:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table Example</title>
</head>
<body>
<h2>Simple Table Example</h2>
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Emma</td>
<td>30</td>
<td>London</td>
</tr>
</table>
</body>
</html>Output :
