CodeNexium.com
Table · codenexium.com

Tables in HTML

HTML tables display data in rows and columns. Use tables for tabular data (schedules, prices, comparisons, statistics), not for page layout - use CSS Grid or Flexbox for layout instead.

Basic Table Structure

HTML 
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Bob</td>
<td>30</td>
<td>London</td>
</tr>
<tr>
<td>Charlie</td>
<td>28</td>
<td>Tokyo</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Total: 3 people</td>
</tr>
</tfoot>
</table>
Live Output Window

Core Table Elements

Element Purpose
<table> The table container
<caption> Title / summary of the table
<thead> Groups header rows (column titles)
<tbody> Groups body rows (data)
<tfoot> Groups footer rows (summaries)
<tr> Table row
<th> Header cell (bold, centred by default)
<td> Data cell
<colgroup> / <col> Column groups for styling

Rendered:

Name Age City
Alice 25 New York
Bob 30 London
Charlie 28 Tokyo
Total: 3 people

Colspan and Rowspan

Cells can span multiple columns or rows:

HTML 
<table>
<tr>
<th>Name</th>
<th colspan="2">Contact</th>
</tr>
<tr>
<td>Alice</td>
<td>alice@email.com</td>
<td>+1-555-0100</td>
</tr>
</table>
Live Output Window

colspan="2" makes the “Contact” header span two columns.

Rowspan example - spanning rows vertically:

HTML 
<table>
<tr>
<th rowspan="2">Class</th>
<th>Room</th>
</tr>
<tr>
<!-- The "Class" header occupies this cell -->
<td>101</td>
</tr>
</table>
Live Output Window

Table Caption

The <caption> element provides a title for the table - useful for accessibility:

HTML 
<table>
<caption>Monthly Sales Report - Q1 2026</caption>
<thead>
<tr>
<th>Month</th>
<th>Revenue</th>
</tr>
</thead>
<tbody>
<tr><td>January</td><td>$12,000</td></tr>
<tr><td>February</td><td>$15,000</td></tr>
<tr><td>March</td><td>$18,000</td></tr>
</tbody>
</table>
Live Output Window

Column Groups

Style entire columns using <colgroup> and <col>:

HTML 
<table>
<colgroup>
<col style="background-color: #f0f0f0;">
<col span="2" style="background-color: #e0e0e0;">
</colgroup>
<tr>
<th>Item</th>
<th>Price</th>
<th>Stock</th>
</tr>
<tr>
<td>Keyboard</td>
<td>$29</td>
<td>45</td>
</tr>
</table>
Live Output Window

Table Styling with CSS

Basic CSS for readable tables:

HTML 
<table>
<caption>Monthly Sales Report - Q1 2026</caption>
<thead>
<tr>
<th>Month</th>
<th>Revenue</th>
</tr>
</thead>
<tbody>
<tr><td>January</td><td>$12,000</td></tr>
<tr><td>February</td><td>$15,000</td></tr>
<tr><td>March</td><td>$18,000</td></tr>
</tbody>
</table>
CSS 
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #007bff;
color: white;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
tr:hover {
background-color: #ddd;
}
caption {
font-weight: bold;
margin-bottom: 8px;
}
</style>
Live Output Window

Accessibility in Tables

  • Use <th> for headers with scope="col" or scope="row" to associate headers with data:
HTML 
<tr>
<th scope="col">Product</th>
<th scope="col">Price</th>
</tr>
<tr>
<th scope="row">Widget</th>
<td>$9.99</td>
</tr>
Live Output Window
  • Use <caption> to describe the table purpose.
  • For complex tables, use the id + headers attributes to explicitly link data cells to header cells:
HTML 
<th id="name">Name</th>
<th id="age">Age</th>
<td headers="name">Alice</td>
<td headers="age">25</td>
Live Output Window

Detailed Table with Tag, attributes and attribute values

Tag Attribute Values Description
<table> - - Table container
<caption> - text Table title
<thead> - - Header section
<tbody> - - Body section
<tfoot> - - Footer section
<tr> - - Table row
<th> scope col, row, colgroup, rowgroup Header cell
<th> colspan number Number of columns to span
<th> rowspan number Number of rows to span
<th> headers space-separated IDs Links to header cells
<th> abbr text Abbreviated version of header
<td> colspan number Number of columns to span
<td> rowspan number Number of rows to span
<td> headers space-separated IDs Links to header cells
<colgroup> span number Number of columns in group
<col> span number Number of columns this col applies to
Courses