Tables in Web Pages

Estimated reading time: ( words)

Summary: Use tables to display data and CSS for page layout. Use the table tag <table> to define all tables, and the table caption tag <caption> to summarize the content displayed in it. Use the table heading tag <th> to identify cells that are either row or column headers.

Tables in web pages

Tables can take one of two forms: layout tables and data tables. Layout tables are used to position elements on a Web page and have largely been replaced by the use of Cascading Style Sheets (CSS) to control positioning/layout. Data tables convey a relationship between two or more items, represented by row and column headings.

The way to determine if you’re using a table for data is if its position means something. 

Best practices for web tables

  • Use tables to display data, rather than as a means of page layout; use CSS for page layout instead
  • However, when you have to use a table for layout, use the ARIA, <table role=”presentation”> tag.
  • Display simple tables, rather than complex tables wherever possible, minimizing the use of merged cells that span more than one row or column.
  • Use the table tag <table> to define all tables, to make sure screen readers can identify the
  • Use the table caption tag <caption> to summarize the content displayed in the table, e.g., “Nutritional values in grain-based breakfast foods”
  • Use the table heading tag <th> to identify cells that are either row or column headers. Where data is given, make sure unit values (e.g. grams, feet, miles) are listed in the heading row and that the unit of measure is consistent for all data points (e.g., don’t list some values in inches and some values in feet).
  • Visually style heading rows to help distinguish headings from data cells. For example, use boldface text and a shaded background
  • Ensure strong contrast between table text and background

Examples

Example layout table

News article 1 ... News article 2 ...

News article 3 ...

<table role=”presentation”>
    <tr>
        <td>News article 1… </td>
        <td>News article 2 … </td>
        <td>News article 3 …</td>
    </tr>
</table>

Example data table with both row and column headers

Name Season Introduction Year
Beacon Early 1936
Haralson Late 1922
Sweet Sixteen Mid 1977
<table>
    <caption>University of Minnesota Apples</caption>
    <thead>
    <tr>
        <th scope=”col”>Name</th>
        <th scope=”col”>Season</th>
        <th scope=”col”>Introduction year</th>
    </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Beacon</th>
            <td>Early</td>
            <td>1936</td>
        </tr>
        <tr>
            <th scope="row">Haralson</th>
            <td>Late</td>
            <td>1922</td>
        </tr>
        <tr>
            <th scope="row">Sweet Sixteen</th>
            <td>Mid</td>
            <td>1977</td>
        </tr>
     </tbody>
</table>
Did you find what you were looking for?