HTML Table is a powerful composite element used to display data. The data is structured in rows and columns like in a database. Sometimes tables are dynamically generated by back-end but most of the time the tables are static.

Let’s start with an example:

HTML supports various multimedia resources such as images, audio, and video. Next table is an enumeration of HTML elements (or tags) with description for each element.

Image and multimedia

ElementDescription
<area>The HTML <area> element defines a hot-spot region on an image, and optionally associates it with a hypertext link. This element is used only within a <map> element.
<audio>The HTML <audio> element is used to embed sound content in documents. It may contain one or more audio sources, represented using the src attribute or the <source> element: the browser will choose the most suitable one. It can also be the destination for streamed media, using a MediaStream.
<img>The HTML <img> element embeds an image into the document.
<map>The HTML <map> element is used with <area> elements to define an image map (a clickable link area).
<track>The HTML <track> element is used as a child of the media elements <audio> and <video>. It lets you specify timed text tracks (or time-based data), for example to automatically handle subtitles. The tracks are formatted in WebVTT format (.vtt files) — Web Video Text Tracks.
<video>The HTML Video element (<video>) embeds a media player which supports video playback into the document.

Here is the table HTML:

<table class="table">
<thead>
<tr>
<th width="10%">Element</th>
<th width="90%">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>&lt;area&gt;</code></td>
<td>The <strong>HTML <code>&lt;area&gt;</code> element</strong> defines a hot-spot region on an image, and optionally associates it with a hypertext link. This element is used only within a <code>&lt;map&gt;</code> element.</td>
</tr>
<tr>
<td><code>&lt;audio&gt;</code></td>
<td>The <strong>HTML <code>&lt;audio&gt;</code> element</strong> is used to embed sound content in documents. It may contain one or more audio sources, represented using the <code>src</code> attribute or the <code>&lt;source&gt;</code> element: the browser will choose the most suitable one. It can also be the destination for streamed media, using a <code>MediaStream</code>.</td>
</tr>
<tr>
<td><code>&lt;img&gt;</code></td>
<td>The <strong>HTML <code>&lt;img&gt;</code> element</strong> embeds an image into the document.</td>
</tr>
<tr>
<td><code>&lt;map&gt;</code></td>
<td>The <strong>HTML <code>&lt;map&gt;</code> element</strong> is used with <code>&lt;area&gt;</code> elements to define an image map (a clickable link area).</td>
</tr>
<tr>
<td><code>&lt;track&gt;</code></td>
<td>The <strong>HTML <code>&lt;track&gt;</code> element</strong> is used as a child of the media elements <code>&lt;audio&gt;</code> and <code>&lt;video&gt;</code>. It lets you specify timed text tracks (or time-based data), for example to automatically handle subtitles. The tracks are formatted in WebVTT format (<code>.vtt</code> files) — Web Video Text Tracks.</td>
</tr>
<tr>
<td><code>&lt;video&gt;</code></td>
<td>The <strong>HTML Video element</strong> (<strong><code>&lt;video&gt;</code></strong>) embeds a media player which supports video playback into the document.</td>
</tr>
</tbody>
</table>

The elements used for a table:

  • <table> – table main element
  • <thead> – contains table header
  • <tbody> – define table body
  • <tr> – define one row
  • <th> – define one header cell
  • <td> – define one detail cell

As you can see in the example the <table> element contains all other elements. We separate the header and body of the table using <thead> and <tbody>. We create one row for header and many other rows using <tr> tag. Every table row has one or more cells. These are created using <td> tags. The header is using <th> tag for table cells.

Now you know how to create a table in HTML.

Note: This table is using bootstrap class: table.

See also: Mozila Table Basics