Tables!

Everything in Order.

Introduction

Some content is naturally suited to being presented in a table. Most people like tables too as they are easy to quickly scan and take in the content. In this section we'll learn how to create tables in HTML.

Displaying a Table

A table is one of the more complex elements to create in HTML. You require a fair number of tags to get them to come together. There are a few different variations as you'll see below but the basic layout is as follows:

<table>
<tr>
<td>content</td>
<td>content</td>
</tr>
</table>

The above code produces a table with one table row ( tr ). Within the row are two columns, or two cells, specified by the table data ( td ) tags.

For every row you want in your table you include another pair of tr tags. Each row may then have as many td tags within them as necessary.

We may also replace td with th for any cells which we would like to be headers.

Here is an example:

simple_table.html

  1. <body>
  2. <p>Some Monty Python Quotes:</p>
  3. <table>
  4. <tr>
  5. <th>Movie</th>
  6. <th>Year</th>
  7. <th>Quote</th>
  8. </tr>
  9. <tr>
  10. <td>Monty Python and the Holy Grail</td>
  11. <td>1975</td>
  12. <td>Well, she turned me into a newt!</td>
  13. </tr>
  14. <tr>
  15. <td>Monty Python's Life of Brian</td>
  16. <td>1979</td>
  17. <td>He's not the Messiah, he's a very naughty boy!</td>
  18. </tr>
  19. <tr>
  20. <td>Monty Python's The Meaning of Life</td>
  21. <td>1983</td>
  22. <td>And get the machine that goes 'ping'!</td>
  23. </tr>
  24. </table>
  25. </body>
Simple tables

Some Monty Python Quotes:

Movie Year Quote
Monty Python and the Holy Grail 1975 Well, she turned me into a newt!
Monty Python's Life of Brian 1979 He's not the Messiah, he's a very naughty boy!
Monty Python's The Meaning of Life 1983 And get the machine that goes 'ping'!

Row Groups

A standard table, as defined above, creates an entity with a set of rows and columns. HTML is supposed to describe the content and it is not uncommon for a table to have different sections. We normally have headings for our columns at the top, then the content in the middle and a summary at the bottom. To reflect this we may separate a table into a table head ( thead ), a table body ( tbody ) and table footer ( tfoot ). Here is an example:

table_sections.html

  1. <body>
  2. <p>Some planetary stats:</p>
  3. <table>
  4. <thead>
  5. <tr>
  6. <th>Planet</th>
  7. <th>Diameter</th>
  8. <th>Known Moons</th>
  9. </tr>
  10. </thead>
  11. <tbody>
  12. <tr>
  13. <td>Earth</td>
  14. <td>12,756Km</td>
  15. <td>1</td>
  16. </tr>
  17. <tr>
  18. <td>Mars</td>
  19. <td>6,794Km</td>
  20. <td>2</td>
  21. </tr>
  22. </tbody>
  23. <tfoot>
  24. <tr>
  25. <td>Average</td>
  26. <td>9775Km</td>
  27. <td>1.5</td>
  28. </tr>
  29. </tfoot>
  30. </table>
  31. </body>
Table Sections

Some planetary stats:

Planet Diameter Known Moons
Earth 12,756Km 1
Mars 6,794Km 2
Average 9775Km 1.5

You'll notice that visually it doesn't change much. This is normal. With CSS (which we'll cover in another tutorial) you can change the look of the sections individually. The main benefit is for people with screen readers and other means of accessing your pages as it makes it much easier for them to understand the content of the table. Using thead, tbody and tfoot is not necessary but depending on who your visitors are, it can make them much happier.

The use of thead also has advantages in a few other areas. If people are printing your content and you have a large table the browser may reproduce the table header at the top of each page to make it easier for the reader. Some smaller screened devices (such as phones and tablets) may also fix the table header and allow the table body rows to scroll.

Colspans and Rowspans

Sometimes it makes sense to have a cell span several rows or several columns. We may achieve this in HTML with the colspan and rowspan attributes.

Colspans

Colspans allow us to make a cell stretch over several columns.

<td colspan="3">content</td>

Here is an example:

colspan_example.html

  1. <body>
  2. <p>Some nonsense data:</p>
  3. <table>
  4. <tr>
  5. <td colspan="3">100%</td>
  6. </tr>
  7. <tr>
  8. <td>33%</td>
  9. <td>33%</td>
  10. <td>33%</td>
  11. </tr>
  12. <tr>
  13. <td>33%</td>
  14. <td colspan="2">67%</td>
  15. </tr>
  16. </table>
  17. </body>
Colspan Example

Some nonsense data:

100%
33% 33% 33%
33% 67%

Rowspans

Rowspans allow us to make a cell stretch over several rows.

<td rowspan="3">content</td>

Here is an example:

rowspan_example.html

  1. <body>
  2. <p>More nonsense data:</p>
  3. <table>
  4. <tr>
  5. <td rowspan="3">100%</td>
  6. <td>33%</td>
  7. <td>33%</td>
  8. </tr>
  9. <tr>
  10. <td>33%</td>
  11. <td rowspan="2">67%</td>
  12. </tr>
  13. <tr>
  14. <td>33%</td>
  15. </tr>
  16. </table>
  17. </body>
Rowspan Example

More nonsense data:

100% 33% 33%
33% 67%
33%

It's possible to to have both a rowspan and a colspan defined on a cell at the same time. You may also have a mixture of cells with rowspans and others with colspans within the same table. It can get confusing quite quickly however if you have too many.

Summary

<table> </table>
Create a table.
<tr> </tr>
Create a table row.
<th> </th>
Create a table header cell.
<td> </td>
Create a table data cell.
<thead> </thead>
Create a table header.
<tbody> </tbody>
Create a table body.
<tfoot> </tfoot>
Create a table footer.
<td colspan="3"> </td>
Create a cell that stretches over several columns.
<td rowspan="3"> </td>
Create a cell that stretches over several rows.
Appropriate Content
For the right content lists are a great way to present it.
Indenting
The structure of the code for lists is much easier to read when the code is indented appropriately.

Activities

Now let's add some graphical flair to our content.

  • Add a table to your content. See what happens if you create a row with more or less cells than the other rows.
  • Create a table with several rows and columns. Now introduce some rowspans and colspans. Experiment with putting more cells on a row or taking some away and see how the table is affected. What happens if you make the colspan or rowspan greater than the total number or rows or columns in the table?

As we work through this tutorial, each section will add new tags allowing you to do more interesting things. My suggestion would be that you pick a topic or subject of interest to you and create a page about that. As you work through each section, add to and improve the page with the new tags you have learnt.