Menu Close

Articles

How to create a HTML table

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.

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

Let’s explore 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 HTML code:

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.

Read next: Understanding CSS notation