Create An HTML Table Quickly & Easily With Our Code Example

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more
What does Create An HTML Table Quickly & Easily With Our Code Example do?
The <table> element is used in conjunction with child elements such as <tr>, <td>, <th>, and others to add tabular data to an HTML document.
Display
inline

Code Example

<table>
  <caption>The 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>96.1%</td>
      <td>17.0%</td>
      <td>14.3%</td>
    </tr> 
    <tr>
      <td>Absolute Usage</td>
      <td>70.4%</td>
      <td>12.4%</td>
      <td>10.5%</td>
    </tr>
  </tbody> 
  <tfoot>
    <tr>
      <td colspan="4"><em>Market Share</em> refers to the percentage of sites using any JavaScript library that use the specified library. <em>Absolute Usage</em> is the percent of websites surveyed, including those that use no JavaScript libraries, that use the specified library. All data comes from <a href="https://w3techs.com/technologies/overview/javascript_library/all" target="_blank">W3Techs</a> and was accurate in June of 2016.</td>
    </tr>
  </tfoot>
</table>
The Three Most Popular JavaScript Libraries
LibraryjQueryBootstrapModernizr
Market Share96.1%17.0%14.3%
Absolute Usage70.4%12.4%10.5%
Market Share refers to the percentage of sites using any JavaScript library that use the specified library. Absolute Usage is the percent of websites surveyed, including those that use no JavaScript libraries, that use the specified library. All data comes from W3Techs and was accurate in June of 2016.

Tables for Data, Not Layout

In the early days of the web, it was common for HTML tables to be used to control webpage layout. That was a bad idea then, and is a worse idea now. Not only is it semantically incorrect to use tables in this way, doing so can create accessibility issues and make it much harder to create a responsive website design.

So, what is the proper use of HTML tables? To display tabular data. Some data sets are just easiest to understand and digest when presented in a table. If you have a data set like this to add to a website, an HTML table is the right tool for the job.

As you can see in our code snippet above, there are a lot of elements that go into making an HTML table. We’ve put together a Tables Tutorial that will help you master all of these elements. We’ve also put together a tutorial on styling tables that will help you create tables that render beautifully on any device–as task easier said than done.

Adam is a technical writer who specializes in developer documentation and tutorials.