Tables
Tables are used to represent information in a grid format. In HTML, a table is written row by row. Each block in the grid is referred to as a table cell.
In order to make a table, you need rows and cells. To create the table, use the `<table></table>` element. Each row is encapsulated by the opening and closing tag <tr></tr> (tr stands for table row). Inside a row, each cell is represented using <td></td> (td stands for table data).
In order to create the table below:
... you would write:
Even if a cell has no content, you should still use a <td> element to represent the empty cell, otherwise the table will not render correctly.
Table headings
To represent the heading of a table, use the <th> tag. You use it as you would use the <td> tag. E.g.:
Notice that the header is displayed as bold. This is the default style by most browsers. Using <th> to define the header helps people using screen readers, improves the ability for search engines index your page and gives you greater control over the table's appearance using CSS.
If you want to have row headings, you can do that also. You should then use the scope attribute with the value row. E.g.:
... would render:
Spanning columns and rows
Sometimes you might want to have columns or rows, or both, that stretch across more than one row or column. This might e.g. be in cases where the entries are longer than the given cell space.
On the <th> and <td> elements you would then use the colspan or rowspan attributes.
It might be hard to separate the two, so here are some examples. First out is colspan. The following code would result in the cells containing IT2805 and MA0001 spanning two columns. Due to limitations in gitbook (which is used to create this ebook) it is not possible to create spanning columns or rows.
Note that the first cell is empty, but written, so that the table will be rendered correctly.
As mentioned, if you want to stretch down across more than one row you would use rowspan. This code snippet:
would result in the cells containing IT2805 and MA0001 to spann across two rows.
Long tables
There are three elements that help distinguish between the main content of the table and the first and last rows. These elements help people who use screen readers, and also allow you to style these sections in a different manner than the rest of your table.
These are the table header <thead>, table body <tbody> and the table footer <tfoot>. The headings of the table should go in the <thead> element. The body should be in the <tbody>, and the footer in the <tfoot> element.
You can see this used in the table below. The table isn't long in this example, that is just to save space. The following code:
... will render this table:
You don't see a difference, but that is just the lack of styling. We could use CSS to style only the <thead> element, should we want to.
Part of the reason for having separate <thead> and <tfoot> elements is so that, if you have a table that is taller than the screen (or, if printed, longer than one page) the browser can keep the header and footer visible whilst the contents of the table scroll. This is intended to make it easier for users to see which column the data is in.
Last updated