The table tag in HTML

The table tag – create an HTML table quickly and easily

The table element is used together with the child elements tr, td, th to add tabular data to an HTML document.

<table>
  <caption>Three most popular JavaScript libraries</caption>
  <thead>
    <tr>
      <th>Library</th>
      <th>jQuery</th>
      <th>Bootstrap</th>
      <th>Modernizr</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Market Share</td>
      <td>95.9%</td>
      <td>27.1%</td>
      <td>12.6%</td>
    </tr>
    <tr>
      <td>Absolute Usage</td>
      <td>77.6%</td>
      <td>22.0%</td>
      <td>10.2%</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="4"><em>Market Share</em> is percentage of sites using any JavaScript library. <em>Absolute Usage</em> is the percentage of surveyed websites, including those without JavaScript libraries, that use the specified library. All data are from <a href="https://w3techs.com/technologies/overview/javascript_library/all">W3Techs</a> and are correct as of March 2021.</td>
    </tr>
  </tfoot>
</table>

Tables for data, not layout

It used to be common to use HTML tables to control the layout of a web page. Using them in this way is not only semantically incorrect, but it can also create accessibility issues and make it much more difficult to create an adaptive website design.

So, how to use HTML tables correctly? To display a set of data that is easiest to understand and assimilate if it is presented in table form. If you have such data to add to a website, an HTML table is the right tool for the job.

HTML table attributes

There are many parameters that are used when creating an HTML table.

In HTML5, however, many have become obsolete, losing basic styling properties.

CSS should be used instead for more correct and fine-tuning.