HTML Tables

Use table elements:

• tr → table row
• td → table data
• th → table header

We can include a colspan attribute for any given row so that it takes n-rows of space. Likewise there is rowspan.

Default HTML tables are simply going to organize the data in a tabular manner, but there is no border or cell indication that is obvious. This can be easily fixed with a bit of CSS, like so:

table, tr, th, td, caption {
	border: 1px solid #eee;
	font-family: 'Courier New', Courier, monospace;
	border-collapse: collapse;
	padding: 0.5rem;
}

Note that tables don’t expand to the width of the page - only to fit the content of the table.

Table Semantics

• caption
• thead → table header
  • If we need to add “headers” for the rows, we can add an empty cell by adding another tr at the begining filled with &nbsp.
  • Then we add a th to each row element
• tbody → table body
• tfoot → table footer (for example, totalizers for the columns)

The th tags can also have a scope attribute, especially those we are using as headers in order to help assistive tech.