5    Tables and Hyperlinks

This chapter introduces you to more HTML elements. More specifically, you’ll learn how to add and use tables and hyperlinks.

This chapter describe other essential HTML elements that haven’t been dealt with up to now. In particular, you’ll learn more about the following topics:

• Tables
  You’ll learn how to use tables to represent information or data in a grid.

• Hyperlinks
  Every internet user is familiar with hyperlinks that allow them to move from one website to another. You’ll learn how to link an HTML document to other HTML documents.

5.1    Structuring Data in a Table

Tables are useful when you want to display data such as stock quotes, financial information, travel schedules, train schedules, bus schedules, travel reports, or sports scores in a grid of rows and columns. HTML provides some viable options to structure such a table, as listed in Table 5.1.

Table 5.1     Brief Overview of the Table Elements Covered Here

5.1.1    A Simple Table Structure Using <table>, <tr>, <td>, and <th>

Every table in HTML is created between the elements <table> and </table>. The contents of the table are written row by row. The beginning of a row must contain an opening <tr>, while the row must end with a closing </tr> (tr = table row). Within a table row between <tr> and </tr>, you write the individual cells (or also columns) with <td> and </td> (td = table data).

Figure 5.1     A Basic Table Structure in HTML

If you want to use cells or columns as headers of a table, you can place the data between <th> and </th> (th = table heading). You can use the th element in the same way as the td element, except that web browsers usually highlight this element with a bold font centered in the column. If it makes sense, you should use table headings, as this is helpful for visitors with screen readers and, if applicable, for search engines, which can index your website better with table headings.

...
  <table>
    <tr>
      <th>Browser</th>
      <th>Accesses</th>
      <th>Percent</th>
    </tr>
    <tr>
      <td>Chrome</td>
      <td>14478</td>
      <td>59.6%</td>
    </tr>
    <tr>
      <td>Firefox</td>
      <td>3499</td>
      <td>14.4%</td>
    </tr>
    <tr>
      <td>Safari</td>
      <td>1619</td>
      <td>6.6%</td>
    </tr>
  </table>
... 

As you can see in Figure 5.2, web browsers display the table without any formatting. The height and width of a table are usually adjusted to its contents.

Figure 5.2     The Structured Representation of a Basic Table in HTML

If you want to combine (or span) table entries across multiple cells, you can do this using the HTML attributes colspan and rowspan. Based on the numerical value you pass to these attributes, the number of cells you want to merge is specified. As you might guess from the attribute names, colspan is used to group columns together, and rowspan is used to group rows together.

...
  <table>
    <tr>
      <th></th>
      <th scope="col">Morning</th>
      <th scope="col">Noon</th>
      <th scope="col">Afternoon</th>
    </tr>
    <tr>
      <th scope="row">Monday</th>
      <td colspan="2">Photo shooting (outdoor)</td>
      <td>Image editing workshop</td>
    </tr>
    <tr>
      <th scope="row">Tuesday</th>
      <td>Street photography (city)</td>
      <td colspan="2">Photo shooting (portrait)</td>
    </tr>
    <tr>
      <th scope="row">Wednesday</th>
      <td>Nude photography</td>
      <td>Image editing workshop</td>
      <td>Closing ceremony</td>
    </tr>
  </table>
... 

As you can see in Figure 5.3, CSS was used to frame the table so that the result of colspan is more visible.

Here, you can see how, on Monday, the Photo shooting (outdoor) cell spans both the Morning and Noon columns thanks to colspan="2". The same is true for Tuesday and the column Photo shooting (portrait), where Noon to Afternoon has been combined.

When using colspan, you must keep in mind that you need to reduce the number of cells if, for example, you combine a colspan across two cells. In the Monday example, you thus only need to write two td elements instead of three because the first td element already spans two columns.

Figure 5.3     Merging Columns Using the “colspan” Attribute

By the way, there’s nothing against merging more than two columns. Here, you must pay attention to the number of columns that are actually present. As an example, on Tuesday, you could merge the Photo shooting (portrait) across three columns:

...
    <tr>
      <th scope="row">Tuesday</th>
      <td colspan="3">Photo shooting (portrait)</td>
    </tr>
    <tr>
... 

...
  <table>
    <tr>
      <th></th>
      <th scope="col">Morning</th>
      <th scope="col">Noon</th>
      <th scope="col">Afternoon</th>
    </tr>
...
      <th scope="row">Tuesday</th>
      <td rowspan="2">Street photography (city)</td>
      <td colspan="2">Photo shooting (portrait)</td>
    </tr>
    <tr>
      <th scope="row">Wednesday</th>
      <td>Image editing workshop</td>
      <td>Closing ceremony</td>
    </tr>
  </table>
... 

In the last tr element, you need to remove the td element with Nude photography because you’ve extended the Street photography (city) entry above it downward using the rowspan attribute, which causes that entry to take up space in the cell below it, as you can see in Figure 5.4.

Figure 5.4     Merging Rows Using the “rowspan” Attribute

5.1.3    HTML Attributes for the Table Elements

For the table element, HTML supports only the border attribute to indicate a border; the value can be "1" or "". CSS is recommended as the better option here. For example, to copy border="1", you can simply add the following CSS construct to the HTML document head:

...
<style>
  table, td, th { border: 1px solid gray }
<style>
... 

5.1.4    Structuring Tables Using <thead>, <tbody>, and <tfoot>

As an alternative to the basic table elements of HTML you can also divide a table using the elements <thead>, <tbody>, and <tfoot> into a head, data, and foot section, respectively.

The table head is enclosed between <thead> and </thead> (thead = table head). It makes sense to use the th element for the individual cells. You can mark the actual data for the table using <tbody> and </tbody> (tbody = table body). If you want to write a range as a table foot, you must enclose it with <tfoot> and </tfoot> (tfoot = table foot).

...
  <table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Visitors</th>
      <th>Bytes</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Total</th>
      <th>23423</th>
      <th>3234 MB</th>
    </tr> 
  </tfoot>
  <tbody>
    <tr>
      <td>January</td>
      <td>3234</td>
      <td>132 MB</td>
    </tr>
...
...
    <tr>
      <td>December</td>
      <td>7193</td>
      <td>894 MB</td>
    </tr>
  </tbody>
  </table>
... 

If you look at the HTML source code and the corresponding display in Figure 5.5, you’ll notice that the web browser is able to reproduce the order of the table correctly on its own. Although the foot section was specified at the top in the source code, the web browser displays it appropriately at the bottom.

Figure 5.5     A Longer Table with <thead>, <tbody>, and <tfoot> Elements in Use

Figure 5.6     Only with CSS Can You Visualize These Sections Separately

In addition, when printing long tables across multiple pages, the web browser could use this division to print the table header and footer on each page as well. This makes it easier to see which column contains the individual data or what the data means. Another option is to scroll only the body area between <tbody> and </tbody> for long tables, while leaving the header and footer unchanged. Unfortunately, no web browser supports these features yet, but you may be able to do that yourself with CSS and JavaScript if necessary.

Just as you could divide the table rows into three sections using <thead>, <tbody>, and <tfoot>, you can also divide the individual columns into semantic and logical parts by means of the <colgroup> and <col> elements, if that made sense. Grouping columns is useful, for example, to apply specific CSS formatting to a particular column or group of columns, rather than repeating the style for each cell in the column.

...
<table>
  <colgroup>
    <col span="2" style="background-color:lightgray;">
    <col style="background-color:snow;">
  </colgroup>
    <tr>
      <th>Browser</th>
      <th>Accesses</th>
      <th>Percent</th>
    </tr>
    <tr>
      <td>Chrome</td>
      <td>14478</td>
      <td>59.6%</td>
    </tr>
    ...
    ...
  </table>
... 

In Figure 5.7, the first two columns have been grouped together using span="2" and highlighted in color with CSS for demonstration purposes. The last column is a separate column group.

Figure 5.7     First Two Columns Have Been Grouped Together with Last Column as a Separate Column Group

Figure 5.8     Semantic Division of Columns into Groups: Here, You Can See a Group with Two Columns and a Group with One Column

If, on the other hand, you want to use a separate group for each column, you can do this as follows:

  <table>
  <colgroup>
    <col style="background-color: lightgray;">
    <col style="background-color: snow;">
    <col style="background-color: lightgray;">
  </colgroup>
    <tr>
      <th>Browser</th>
      <th>Accesses</th>
      <th>Percent</th>
    </tr>
...
  </table>
... 

Now each column has been grouped into its own col group. The advantage doesn’t become apparent until you want to style columns with CSS. The semantic division into three columns can be found in Figure 5.9.

Figure 5.9     Semantic Division into Three Columns

5.1.6    Labeling Tables Using <caption> or <figcaption>

Labeling a Table with <caption>

As mentioned previously, the caption element must follow immediately after the opening <table> tag. In addition, only one label can be used per table. Let’s look at a simple example:

...
  <table>
    <caption>Browser statistics 11/2023</caption>
  <tr>
      <th>Browser</th>
      <th>Accesses</th>
      <th>Percent</th>
    </tr>
    <tr>
      <td>Chrome</td>
      <td>14478</td>
      <td>59.6%</td>
    </tr>
    ...
    ...
  </table>
... 

Figure 5.10     The Caption Is Displayed Centered above the Table by Default

If you want to add notes to a table caption, you can place the HTML elements details and summary between <caption> and </caption>.

Figure 5.11     Expanding and Collapsing Information Thanks to the HTML Elements <details> and <summary> (Example in /examples/chapter005/5_1_6/index2.html)

I already described the figcaption and figure elements in Chapter 4, Section 4.2.9. It’s a good idea to position tables between <figure> and </figure> and to insert a caption for this table at the beginning after the opening <figure> or at the end before the closing </figure>. Here’s an example of how you can label a table using the new figure and figcaption elements:

...
  <article>
  <h1>Browser Statistics </h1>
  <figure>
  <table>
  <tr>
      <th>Browser</th>
      <th>Accesses</th>
      <th>Percent</th>
    </tr>
    <tr>
      <td>Chrome</td>
      <td>14478</td>
      <td>59.6%</td>
    </tr>
...
  </table>
  <figcaption>Table 1: Browser Statistics 04/2023</figcaption>
  </figure>
  </article>
... 

Figure 5.12     Labeling Tables Using <figure> and <figcaption>