HTML Tables Simplified

Introduction

HTML tables are elements in HTML that can be used to arrange data in the form of rows and columns.

Data in this context can be in the form of texts, images, links, or other tables.

An HTML table is represented by the opening tag <table> and the closing tag </table>.

Basic Structure of an HTML Table

An HTML Table structure is comprised of different components which can be divided into two: the semantic elements and the element tags.

1. Semantic elements: These are elements that are not necessary for building a simple HTML table but it's important for semantics and web accessibility for screen readers. These semantic elements in an HTML table structure include:
   • The <thead> </thead> used to declare the semantic section for the header in an HTML table.
   • The <tbody> </tbody> used to declare the semantic section for the body content in an HTML table.
   • The <tfoot> </tfoot> used to declare the semantic section for the footer in an HTML table.
2. Element tags: These are the elements tags that do something in an HTML table structure. These element tags include:
   • The <th> </th> tag: is used to define cells that are used to label the title of certain rows or columns.
   • The <tr> </tr> tag: is used define a row in an HTML table.
   • The <td> </td> tag: is used to define a unit cell in an HTML table.

Code Sample:

• Simple HTML table with only elements tags

  <table>
    <caption>
      <h3>Simple HTML Table with only elements tag</h3>
    </caption>
    <tr>
      <th>Top</th>
      <th>Extra</th>
    </tr>

    <tr>
      <td>Bread</td>
      <td>Butter</td>
    </tr>
  </table>

• Simple HTML table with semantics and elements tags

  <table>
    <caption>
      <h3>Simple HTML Table with semantics and elements tags</h3>
    </caption>

    <thead>
      <tr>
        <th colspan="2">October</th>
        <th colspan="2">November</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>Sales</td>
        <td>Profit</td>
        <td>Sales</td>
        <td>Profit</td>
      </tr>
      <tr>
        <td>$200,00</td>
        <td>$50,00</td>
        <td>$300,000</td>
        <td>$70,000</td>
      </tr>
    </tbody>

    <tfoot>
      <tr>
        <th colspan="4">November was more produstive</th>
      </tr>
    </tfoot>
  </table>

In Code Pen

Default behavior of HTML Tables in browsers

There are a few behaviors of HTML tables that need to be taken note of that we need not be surprised when our HTML table is presented (like the one in the codepen above).

1. By default, HTML tables do not have borders, just as you would notice. This can be added by styling the table with the CSS border property.

2. The table cells are just large enough to fit the contents. To change this, the CSS padding or width property is used.

3. By default, when the border is styled into the table, borders around the table and the cells are separated from each other. This can be changed by using the CSS border-collapse property

When to use HTML Tables

• Organize data: A table in HTML makes a lot of sense when you want to organize data that would look best in a spreadsheet.
• Display data: An HTML table is a great way to display things such as financial data, calendars, pricing, feature comparison, the nutrition facts information panel, bowling scores, and many other tabular data.
• Comparing data: things like price comparison, metrics differences, and others, tables are the best options.

When not use HTML Tables

• For a Website layout: It was very common, for millennials ago that people use <table> </table> to style the layout of their websites. With flexbox and grids available today, at disposal, it is advisable to rather style a website layout with flexbox or grid, and use the <table> <table> element as rather explained in the use-cases.

The general rule is that the websites should be accessible. One part of accessibility is screen readers which read tables from top to bottom, left to right. With the tables in HTML, the order of how the site is presented is determined by visual choices instead of accessibility choices. In cases like that, screen readers don’t always work as you’d want them to.

Words Glossary (in the context of an HTML table)

• Rows: The horizontal arrangement of data in a table.
• Columns: The vertical arrangement of that in a table
• Header: A row at the top of a table that is used to label each column.
• Footer: This is a row defined at the bottom of a table that is used to contain further information about the table.
• Body: This defines the primary contents of the table, which consists of one or more rows and columns.
• Caption: This represents the title of the HTML table.
• Data cell: this defines a unit cell of an HTML table that contains data.

References for deeper dive

• https://www.tutorialspoint.com/html/html_tables.htm

• https://www.tutorialrepublic.com/html-tutorial/html-tables.php

• https://www.freecodecamp.org/news/html-tables-table-tutorial-with-css-example-code/

• https://www.freecodecamp.org/news/html-tables-all-there-is-to-know-about-them-d1245980ef96/

• https://blog.hubspot.com/website/make-a-table-in-html

GitHub Repo

https://github.com/devpacademy/HTML-Tables

Acknowledgement

Dev P Academy

Thanks for engaging 🎉.