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>
HTML table code view

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.

Inserting a link and a common column into an HTML table

HTML table attributes

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

heightSpecifies the height of the table.
summarySpecifies the description of the table.
widthSpecifies the width of the table.

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

frameUsed to specify visible table borders.
rulesUsed to specify the display of internal borders between rows and columns.
alignUsed to align the HTML table left, right, or centered relative to the parent element.

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

Leave a Comment

Your email address will not be published. Required fields are marked *