HTML <table> Tag
The <table> tag in HTML defines a container for tabular data. It's used to display data in rows and columns, similar to a spreadsheet. Tables are essential for presenting structured information clearly and efficiently on web pages.
Syntax
<table border="1" style="width:100%">
<caption>Table Title</caption>
<colgroup>
<col span="2" style="background-color:#f0f0f0">
<col style="background-color:#e0e0e0">
</colgroup>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
<td>Row 1, Cell 3</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
<td>Row 2, Cell 3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Footer 1</td>
<td>Footer 2</td>
<td>Footer 3</td>
</tr>
</tfoot>
</table>
Attributes
| Attribute | Value | Description |
|---|---|---|
border |
pixels |
Specifies the width of the table's border. Use CSS border property for more advanced styling. |
cellpadding |
pixels |
Specifies the space between the cell content and the cell border. Use CSS padding for more precise control. |
cellspacing |
pixels |
Specifies the space between cells. Use CSS border-spacing property for more modern styling. |
width |
pixels , % |
Specifies the width of the table. It's recommended to use CSS width instead. |
summary |
text |
Provides a summary of the table's content for assistive technologies. |
align |
left, right, center |
Specifies the alignment of the table on the page. Use CSS margin-left and margin-right for better control. |
bgcolor |
color |
Sets the background color of the table. Use CSS background-color property instead. |
frame |
void, above, below, hsides, lhs, rhs, vsides, box, border |
Specifies which parts of the outer borders of the table should be visible. Use CSS border properties instead. |
rules |
none, groups, rows, cols, all |
Specifies which inner borders should be visible. Use CSS border properties instead. |
Example
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>John Doe</td>
<td>30</td>
<td>New York</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>25</td>
<td>London</td>
</tr>
</table>
More Examples
Basic Table with Header and Data Rows
<table border="1">
<thead>
<tr>
<th>Product</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Laptop</td>
<td>$1200</td>
</tr>
<tr>
<td>Keyboard</td>
<td>$75</td>
</tr>
</tbody>
</table>
This example demonstrates a basic table structure with <thead> for headers and <tbody> for data.
Table with Rowspan and Colspan
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Contact</th>
</tr>
<tr>
<td>John Doe</td>
<td>Email: [email protected]</td>
<td>Phone: 123-456-7890</td>
</tr>
<tr>
<td rowspan="2">Jane Smith</td>
<td>Email: [email protected]</td>
<td>Phone: 987-654-3210</td>
</tr>
<tr>
<td> Email: [email protected]</td>
<td>Phone: 888-999-0000</td>
</tr>
</table>
Here, colspan is used to merge header cells, and rowspan to merge data cells across rows.
Table with Caption and Footer
<table border="1">
<caption>Employee Details</caption>
<thead>
<tr>
<th>Employee ID</th>
<th>Department</th>
</tr>
</thead>
<tbody>
<tr>
<td>101</td>
<td>Sales</td>
</tr>
<tr>
<td>102</td>
<td>Marketing</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Total Employees: 2</td>
</tr>
</tfoot>
</table>
This demonstrates the use of <caption> for adding a title and <tfoot> for a footer to your table.
Table with colgroup and col
<table border="1">
<colgroup>
<col style="background-color:#f0f0f0">
<col span="2" style="background-color:#e0e0e0">
</colgroup>
<tr>
<th>Product</th>
<th>Price</th>
<th>Qty</th>
</tr>
<tbody>
<tr>
<td>Laptop</td>
<td>$1200</td>
<td>10</td>
</tr>
<tr>
<td>Keyboard</td>
<td>$75</td>
<td>20</td>
</tr>
</tbody>
</table>
The <colgroup> and <col> tags can be used to style specific columns and also to group them, you can see in the example above span="2" in col tag which makes next two columns apply the specified background color, while first column has a different background color.
Responsive Tables
For responsive tables, it is better to add a container around table, and make the container scrollable on smaller screen sizes, see example below:
<div style="overflow-x:auto;">
<table border="1" style="width:100%;">
<caption>Responsive Table</caption>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
</tr>
</tbody>
</table>
</div>
Here we added a div tag with overflow-x:auto style, which makes table scrollable on small screens.
Browser Support
The <table> tag is supported by all modern browsers:
- Chrome
- Edge
- Firefox
- Safari
- Opera
Notes and Tips
- Avoid using tables for layout purposes; use CSS Grid or Flexbox instead.
- Always use
<thead>for table headers,<tbody>for body, and<tfoot>for footer to improve accessibility. - Use CSS for styling tables, not HTML attributes, for better control and maintainability.
- For responsive tables, use CSS and techniques like horizontal scrolling or adaptive layouts.
- Use the
<caption>tag to provide a title for your table. This can improve SEO and accessibility. - If you're using tables with a very large data set consider using pagination on the server-side and fetch only the required data for each page.
- Don't make table structure deeply nested. It will be harder to maintain.
