Long Tables in HTML

<thead>, <tbody>, and <tfoot>

Long tables can make it difficult to use a table and also make it inaccessible to users with disability who use assistive technologies, such screen readers. For example, when a table is longer than what can fit into one screen and scrolling is required, the header usually disappears, making it difficult to figure out what goes under which column. The elements intended to solve problems caused by long tables are <thead>, <tbody>, and <tfoot>. However, as of time of writing, the functionality of these elements is yet to be implemented enough in most browsers to fully realize the goals for which they have been designed. Their functions have been described in Table 4.2, and Figure 4.15 shows how they can be used.

The effects of the <thead>, <tbody>, and <tfoot> are not usually visible; therefore, the code in Figure 4.15 will produce just an ordinary table, similar to the one in Figure 4.9. This is because these elements merely enable a table to be divided into header, body, and footer parts. It is recommended when the elements are used and a table is very long that the <tfoot> element is placed before the <tbody> element to enable the browser to render the footer before all rows of data are received, which can take time. When the elements are used, it is possible for users to scroll through the body of a table independently of the header and footer. With a long table, it may also be possible to have the header and the footer printed on every page of data, instead of just on the first and last pages, respectively.

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 *