• Home  / 
  • HTML Table – The Ultimate Tutorial

HTML Table – The Ultimate Tutorial

Need to Make an HTML Table? Start Here!

In this tutorial and video, I’ll show you all the elements you need for an HTML table. I’ll tell you how to use them the right way, and I’ll show you the HTML to use.

This 22-minute video is the best place to start. (Don’t forget to click the full-screen icon so you can see all the text.)

Here Are All the HTML Table Tags You’ll Need

All the tags below can use the global HTML tag properties or attributes, such as id=”” and class=””, so of course you should use these together with CSS and JavaScript to give your HTML tables styling and interactivity.


Table Tag (<table>…</table>)

The main table tag is a paired tag. You will use one of these per HTML table. The table tag will not create anything on the screen until you create some rows with content.


Table Row (<tr>…</tr>)

Another paired tag, the HTML <tr>…</tr> tag defines the logical start and end of each row. Again, table rows in HTML don’t show up unless they have some content in them.


Table Data Cells (<td>…</td>)

Most table content is contained inside <td>tags, which stands for “Table Data.” Most rows contain one or more table data cells, although they may have cells at the ends, and header rows will contain all <td> cells, as we’ll see.

The <table>, <tr>, and <td> tags are the most basic tags you’ll need to construct your basic HTML table, but to be an HTML table master, you will need some more.


Table Head Cells (<th>…</th>)

Table head cells (<th>…</th>) are distinct from table data cells (<td>…</td>) in that they contain information about the columns or rows in your table, so they do not strictly contain table data. If you removed all the data from the table to leave an empty table, you would normally keep thecells as they are part of the table’s structure.

Consider your table head cells as like the column/row definitions in a spreadsheet. In the image below, the spreadsheet is empty apart from its column and row definitions. So you would use HTML table head cells for this information: Period, Turnover, Q1 2016, etc.

HTML Table column and row headings example

Use TH cells to give your HTML table column / row headings

The Logical Sections of an HTML Table

HTML tables can have three different sections within them:

    • Head (<thead>…</thead>)
    • Body (<tbody>…</tbody>)
    • and Foot (<tfoot>…</tfoot>)

They may have only one Head and Foot, but you may use more than one Body section (in rare cases).

Weirdly, these sections should be written in the order: Head, Foot, then Body! Go figure!


Table Head Section

Your <thead> section contains your column headers. You may use more than one row (<tr>) for these. Each table row in your head section will usually contain one or more <th>…</th> (table head cell) tags, one for each column header.


Table Body Section (<tbody>…</tbody>)

Your table may have one or more <tbody>…</tbody> tag, which contain the main variable contents of the HTML table.

Personally, I have never used multiple <tbody> tags, but it is conceivable that you may wish to style different sections of a long table differently.


Table Foot Section (<tfoot>…</tfoot>)

Important Reminder: If you use a <tfoot>, you should include it after the <thead> but before the <tbody>!

You may use one table foot section, if you need to use one. It may contain one or more rows, but (unlike the <thead>) these rows will normally contain regular <td> (table data) tags rather than <th>header tags, because these cells do not identify the columns above.

The table foot will be displayed at the end of the table body (even though it goes before the table body in your HTML), so it is really for summary information that will appear only once.

So one example might be to show totals or averages of the columns above. (Of course, if you’re calculating these programmatically, you’ll need to figure out the final numbers before writing the HTML to screen, because you have to put the <tfoot> before the <tbody>!)


Table Caption (<caption>…</caption>)

An HTML table may have one caption tag. The contents within the tag should announce the information the table provides.

While this is usually displayed by default, I will often hide it from screen using a CSS media query like this…

@media screen {
table caption {display:none;}
}

Consider the table caption as more of an accessibility feature. The table caption will tell non-visual user agents what the table is about. That might give a visitor who is using a text-to-speech reader the option of whether to listen to the table out loud, or skip it.

Additionally, it is likely that search engine spiders will also use a <caption> to interpret what a table’s contents give, so it is good practice to use a caption wherever you can.

Take Your HTML Tables To The Next Level!

We have some more advanced training coming soon, which will show you how you can create sexy HTML tables like the image below — using only HTML and CSS!

Sexy HTML Table #1

This is a beautiful pricing table, crafted entirely in HTML & CSS. It features a highlighted column (which is changeable very easily), and renders perfectly on mobile as well as desktop browsers.

html-table-css

Sexy HTML table made using only HTML and CSS!

Introduction to Sexy HTML Table #1 (4 minutes)

Check out this stylish HTML pricing table, which uses only pure CSS – no images in sight!

Leave a comment: