HTML Tables.

HTML tables allow web developers to arrange data into rows and columns, similar to a spreadsheet or a grid.

The Essentials

<table> is the main container for a table.

<tr> defines a table row.

<th> defines a table header (bold and centered by default).

<td> defines a table cell (data cell).

<caption> adds a title or description to the table.

<thead>, <tbody>, and <tfoot> group header, body, and footer content.

Professional Insights

Tables for Data, Not Layout

Never use tables to create your website's layout (like sidebars or grids). Use Flexbox or Grid for layout, and reserve tables purely for tabular data like schedules or price lists.

Colspan and Rowspan

You can make a cell span multiple columns using 'colspan' or multiple rows using 'rowspan'. This is useful for complex headers or merged data cells.

Accessibility: The 'scope' Attribute

Using <th scope='col'> or <th scope='row'> helps screen readers understand whether a header applies to the entire column or the entire row, making complex tables navigable.

Responsive Tables

Tables can be difficult to view on small mobile screens. A common trick is to wrap the <table> in a <div> with 'overflow-x: auto' to allow horizontal scrolling on small devices.

Critical Pitfalls

Forgetting to wrap every row in a <tr> tag.

Using <td> for headers instead of <th>, which hurts accessibility and styling.

Using tables for page layout, which makes the site non-responsive and hard to maintain.

Not using borders or padding, making the table data difficult to read.

Interactive Lab

Sprint Tasks

Create a table with 2 rows and 2 columns

Use <th> for the first row headers: 'Company' and 'Contact'

Use <td> for the second row data: 'Alfreds Futterkiste' and 'Maria Anders'

Loading editor...

Production Preview