Basic Tables in HTML

1. <table>, <caption>, <th>, <tr>, and <td>

The table, caption, table heading, table row, and table data elements are common to almost any table, as they describe the essence of a table. For this reason, they are being discussed together. Figure 4.8 shows how they are used, and Figure 4.9 shows the table that is created.

As you should be able to see in the example, everything about a table goes between the opening and the closing tags of the <table> element and the contents of every row are placed inside the <tr> element. The contents can be table headings or table data, as well as information about the table, such as caption, included by using the <caption> element. Caption may be made strong or emphasized, using the <strong> or <em> element, and should not be wider than a table’s width to avoid being clipped. The summary attribute is usually used to provide additional information about a table. Although browsers do not display the information, providing the information improves accessibility, because it is used by user agents that do not render HTML into visual information, such as screen readers, to adequately inform visually impaired users.

Notice that even when a cell is empty, an empty <td> element is still used to represent it; otherwise, the table will not look properly when put together. Also notice that the contents of the <th> elements are displayed in bold. They are also displayed in the middle of the cell. Using the <th> element for headings (instead of using the <td> element and making the contents bold manually through CSS) is especially good practice, as user agents, such as screen readers, recognize the element and are therefore able to render it in the way that best communicates the contents of a table to the user. The element also enables pages to be indexed more effectively by search engines. In the example, there are both row headers (i.e., apples, bananas, and grapes) and column headers (i.e., item, bought, sold, and balance).

2. Columns’ Grouping

As introduced in Table 4.2, the element used to group columns is the <colgroup> element. When used, it should be placed after caption but before any other table element. It can either contain <col> elements (each of which can represent one or more columns) or take the span attribute, but not both. The <col> element, too, may take the span attribute. The attribute specifies the number of consecutive columns spanned by an element. Figure 4.10 shows how the <colgroup> and <col> elements are used together, and Figure 4.11 shows how the <colgroup> element is used without the <col> element. Both produce the same result, shown in Figure 4.12. In both examples, the span attribute specifies to group the next two columns and give the group a class name of “first_two”, which is then used to make the group’s background color gray by using CSS. The next <colgroup> or <col> element specifies to give the next column the class name of “next_col”, which is used to make column’s background color yellow. Note that the colors have been used here to only show the effects of the grouping elements. How this is done is shown in Chapter 17 under Section 17.4.

Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.

Leave a Reply

Your email address will not be published. Required fields are marked *