HTML Tables

Tables are an excellent choice for displaying data in columns and rows. They allow users to quickly scan, compare, and analyze any type of information, ranging from text and figures to images.

At its most basic level, a table is built using the <table> element and one or more of the <tr>, <th> and <td> elements to define rows, headings, and cells respectively.

The <tr> element — short for table row — defines a row of cells in a table, obviously. It acts as a container for table cells and holds other elements that define cells with headers and regular data. Basically, everything you want to display in the row goes inside this tag, and the <tr> tag itself is nested inside the <table> tag. Your table will need as many <tr> tags as you need rows.

Table cells can contain 2 types of data: header information and regular data. This distinction is important because it enables browsers to distinctly render them, even if you don't specifically define table style.

We use the <td> tag (short for table data) to set cells with regular data. This tag is always nested inside the <tr> tag.^[1] In this example, the second row contains 4 cells of data with the following information:

• Angel Herwitz

• 34

• $24.000

• $9.000

The code for this row would look like this:

<tr>

<td>Angel Herwitz</td>

<td>34</td>

<td>$24.000</td>

<td>$9.000</td>

</tr>

The <th> tag is used to mark table header cells. By default, most browsers display the content of header cells in bold and centrally aligned, while regular font is used to display content in other data cells.^[2]

Another function of the table header markup is that it's crucial for accessibility. Screen readers announce headings as users move through the table, giving assistive technology users the context that is available to visual users at a glance. Failing to use the correct markup for table headers, you'll make the table navigation nearly impossible for assistive technology users.

You can specify your table's title with the <caption> tag by placing it directly after the start <table> tag. It's a paired tag which means the content goes in between the start tag and the end tag. By default, the caption appears at the top of the table, but you can change its position using CSS.

While the <caption> element is not compulsory, it's crucial for assistive technology users. It helps users identify a table, understand what it's about and decide if they want to read it.

The colspan attribute stands for column spanning, which allows you to extend a column across multiple other columns. Add the attribute to the tag of the cell you want to expand, and set the value to the number of columns you want to be fused.

To merge two columns into one header in the above example, we use the table header tag <th> with the attribute colspan and the value 2.

The rowspan attribute allows you to extend a row into multiple rows when we need to merge them. It's similar to the colspan attribute that does the same with columns.

Keep in mind that assistive technology like screen readers may have difficulty parsing complex tables with spanning header cells. Use rowspan and colspan only when necessary — if merging two cells makes more sense than separating them. Alternatively, consider breaking bigger tables apart into a group of related smaller tables.

By default, table cells are just large enough to fit their content. If you want to add more space around the content, use the padding property. It's a shorthand that allows you to set the padding for each side in one property. The padding property can take 4, 3, 2, and 1 values.

Depending on the number of values, it sets the padding for the following sides:

• 4 values: top, right, bottom, left

• 3 values: top, left&right, bottom

• 2 values: top&bottom, left&right

• 1 value: all sides^[3]

In the example above ”padding:20px 30px;” sets the top and bottom padding to 20px and the left and right padding to 30px.

By default, the text inside table cells is aligned left or right, depending on the document's default language script. However, you can change horizontal alignment using the property text-align within the style attribute. Available values are left, right, and center.

To align the cell's content vertically, use the vertical-align property. Although the default alignment is middle, you can change it to top, bottom, or other less common values.^[4]

In older versions of HTML, we could add a border using the border attribute. However, this code is archaic and illustrates older conventions that you may come across while learning. In modern HTML versions, developers use CSS to add style as it's much more flexible and comprehensive.

When adding a border rule to the style sheet, keep in mind that it's applied separately for the border around the table and borders around cells. So, to set all borders for your tables, you need to apply the rule to all 3 elements: <table>, <th>, and <td>. As a result of this logic, the default border looks double.

When adding borders to the table, you'll get double borders by default because each table cells will have its own distinct borders. If you'd like adjacent table cells to share a common border, you'll need to create a separate CSS rule. This is also known as collapsing table borders. In the CSS rule, use table as a selector and set the property border-collapse to collapse.

To define each table row, use the <tr> tag. For better code readability, you can start each tag with a new line. Inside the <tr> tag, establish the row's cells with <td> tags for data cells and <th> tags for header cells. Remember that you need to use as many <tr> tags as the number of rows in the table.

Add captions to tables with the <caption> tag. While it is not necessary for tables to be displayed properly, this element is crucial for assistive technology readers. Visual users can have a quick look at a table to decide whether it's worth taking a good look at — but this judgment requires more resources for screen reader users. When coming across a table, you need to initiate table navigation. Captions help assistive technology users decide if a table contains the required information without going in.