Nothing is for sale here. Freewill tips keep the site running. Want to help? → Tip via Paypal
HTML Tables: the Basics
At one time tables were the only practical option if you wanted a website with more than one column. While websites designed with tables are still plentiful on the web landscape, it’s only because there are a lot of old web sites out there. Modern sites use CSS to achieve multiple columns.
Still, knowing how to use tables is good, whether you use them as they were intended (for data presentation), or use them for a design mechanism. So, let’s go…
Basic Table Facts
- The intent of tables was to present rows and columns of data, but became a layout mechanism for arranging content into an intersecting grid of horizontal rows and vertical columns. This is primarily because there were insufficient options in HTML to design creatively.
- Tables expand or contract to fit the content, up to the width of the containing element, unless you set a specific width.
- Tables can have background colors and images independent of the web page.
- Screen readers (and browsers) "read" a table from left to right, top to bottom.
- If you forget to close a table, older browsers treat it like it isn’t there and not display its content at all.
Table Example
The following is a visual representation of a simple table.| Column 1, Row 1 | Column 2, Row 1 | Column 3, Row 1 |
| Column 1, Row 2 | Column 2, Row 2 | Column 3, Row 2 |
| Column 1, Row 3 | Column 2, Row 3 | Column 3, Row 3 |
Rows go across the table from left to right. Columns span the table vertically. This forms a grid of cells. Each cell is called a table data cell, with td being the code syntax.
Basic Table Tags
| Tag | Definition |
|---|---|
| <table> | This is the opening table declaration. |
| <tbody> | Identifies grouped content in a table. A table can have more than one tbody. More on this to follow. |
| <tr> | This starts a table row. |
| <th> | Starts a table header cell. This labels the content in the columns below, usually rendered in bold type automatically. See the top row of this table for an example. |
| <td> | This opens a table data cell. |
| <tfoot> | Identifies grouped footer content in a table. |
Tables can also have:
- a caption
- colgroups
- rowgroups
More on those in the span rows and columns tutorial.
As with other HTML tags, insert a forward slash (/) closes the various table tags. Technically, you no longer have to close the tbody, tr, th, td, and tfoot tags. It's optional according to the W3C (the groups that writes the rules), as shown here.
The tbody
Many websites and web design Q & A sites say you can only have one tbody in a table. This is not true. According to the W3C (again, the organizations who make the code rules) gives an example here that shows multiple tbody properties used on a single table. Here's the example they give:
<THEAD>
<TR> ...header information...
</THEAD>
<TFOOT>
<TR> ...footer information...
</TFOOT>
<TBODY>
<TR> ...first row of block one data...
<TR> ...second row of block one data...
</TBODY>
<TBODY>
<TR> ...first row of block two data...
<TR> ...second row of block two data...
<TR> ...third row of block two data...
</TBODY>
</TABLE>
There must be at least one row in each tbody and tfoot property, and you shouldn't open a second tbody without ending the previous one with tfoot. These two properties are not required in tables that only have one grouping of data.
A basic table outline is really quite simple:
<tr>
<td>
The content always goes inside a table data cell.
</td>
</tr>
</table>
From there you add table data cells and table rows as needed.
Creating large tables can become confusing. Adding a border can help you identify where code went wrong. You can remove the border when the table is completed if you don't want it. See the spanning rows and columns tutorial if you don't know how to add a border.
