📖 Creating HTML Tables

Why Tables Matter

Tables are a good way to organize tabular data on a page, such as menus, budgets, or schedules. Just about anything that would look right in a spreadsheet will work in a table. Tables are made up of small boxes called cells, organized into like-sized columns and rows. These have specific HTML tags that produce them.

📌 Important: Only use HTML tables for data — never for layout. While tables were once used to build page structures, that approach is outdated and creates serious accessibility problems. Tables should only be used when presenting actual tabular content, like schedules, comparisons, or pricing information.

📚 Learn More About Tabular Data

Table Structure Tags

<table> </table>
Indicates the beginning and end of a table.
<caption> </caption>
Displays caption text above the table.
<thead> </thead>
Groups header rows of a table. Useful for styling and accessibility.
<tbody> </tbody>
Groups the body rows of a table. Helps browsers and assistive tech interpret structure.
<tfoot> </tfoot>
Groups footer rows. Footer content repeats on printed pages when supported.
<tr> </tr>
Designates the beginning and end of a table row.
<th> </th>
Designates the beginning and end of a table header cell. Header text is bold and centered by default.
<td> </td>
Designates the beginning and end of a table data cell.

Example

Deprecated Table Attributes

This example uses border, cellpadding, and cellspacing — older HTML attributes that control table appearance. Although browsers still support them, it's best to style tables using CSS for better accessibility and design flexibility.

border="1"
Sets the border width. Use CSS border properties instead.
cellpadding="5"
Adds space between cell content and borders. Use CSS padding.
cellspacing="2"
Controls spacing between cells. Use CSS border-spacing or border-collapse.

Tip: Using CSS for table layout ensures cleaner code, better accessibility, and easier maintenance. Avoid relying on deprecated attributes in new projects.

Spanning Rows and Columns  (Use Sparingly)

colspan="x"
Placed in <td> or <th>. Specifies that x cells in the row are merged.
rowspan="x"
Placed in <td> or <th>. Specifies that x cells in the column are merged.

Tip: While HTML supports colspan and rowspan for merging cells across rows or columns, these attributes can reduce accessibility and make tables harder to read and maintain. Use them only when a simpler structure won't work.

Example

Styling Tables with CSS

padding: value;
Adds space between cell content and the cell border.
border-collapse: collapse;
Removes space (cell-spacing) between cells in a table.
border-spacing: horizontal vertical;
Specifies space between cells. Units like px or em can be used.
empty-cells: hide;
Hides the border and background of empty cells.

Accessibility Features

Accessibility attributes help screen readers and assistive technologies interpret your table. These features don't change the visual appearance but provide important information about structure and meaning.

scope
Used in <th>. Specifies if the header applies to a row or column.
abbr
Provides an abbreviated form of the header for screen readers.
headers
Used in <td>. Links a data cell to its header using the header's id.
border-collapse: collapse;
Eliminates space between table borders.
padding
Adds space inside cells for better readability.
nth-child styling
Alternates row background colors for clarity.
:hover
Highlights a row on mouseover to improve user interaction.

Tip: This example combines semantic HTML, accessibility attributes, and CSS styling to create a table that is clear, maintainable, and usable by all visitors — including those using assistive technology. Aim to follow this model in your projects.

Additional Resources

Last updated: August 16, 2025 at 10:27 PM