An HTML table is an element comprised of table rows and columns, much like you’d see in an Excel spreadsheet. Tables are useful for displaying data in a tabular format, and they can be used for layout purposes as well. In this article, we’ll take a look at the basics of working with HTML tables.

Table rows are defined with the tag. Table data cells are defined with the tag. The number of tags in a row defines the number of columns in that row.

— Now let’s deal with another way to structure and group information - tables. Previously, they were actively used to build the layout of web pages. But this structure was not very flexible. After the need arose to make responsive design for different screen sizes, they were gradually abandoned.

—If they were abandoned, then why should I study them?

— Although the web page layouts aren’t built with tables anymore, they are still used in various systems to display, for example, a list of users, or a list of orders.

Basic structure

To create tables, use the paired <table> tag.

Then you can start adding rows to the table using a paired tag <tr> (table row). You nest it inside the <table> tag.

Rows in a table are made up of cells. To add a cell to a row, we have to nest the paired <td> (table data) tag inside the <tr>.

<table>
  <tr>
    <td>My first cell</td>
  </tr>
</table>

Cells are the main body of the table. Besides text or numbers, you can add any other element to them: images, paragraphs, lists, headings and even other tables.

— Looks pretty simple. You just need to remember the order of nesting of tags.

— Quite right.

— You’ve given me an oversimplified example. How do I add multiple cells and lines?

— To add multiple lines, you need to repeat the <tr> tag several times inside the <table> tag. And to add multiple cells, repeat the <td> tag inside the table row. But remember - each row must have the same number of cells to preserve the structure of the table.

<table>
  <tr>
    <td>First cell of the first row</td>
    <td>Second cell of first row</td>
  </tr>
  <tr>
    <td>First cell of second row</td>
    <td>Second cell of second row</td>
  </tr>
</table>

Table header

Most tables have a header. Usually, it displays the column names. To highlight them, instead of the <td> tag, use the <th> (table header) tag.

<table>
  <tr>
    <th>First column name</th>
    <th>Second column name</th>
  </tr>
  <tr>
    <td>First cell of first row</td>
    <td>Second cell of first row</td>
  </tr>
  <tr>
    <td>First cell of second row</td>
    <td>Second cell of second row</td>
  </tr>
</table>

The text in table headers is bold by default.

Table description

You can add a description or caption to any table. For this use the tag <caption>, which should be nested inside the <table> tag.

Also, the <caption> tag must be the very first tag inside of the <table>, this is important!

<table>
  <caption>Table Description</caption>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
  </tr>
</table>

Cells concatenation

There are cases when you need to combine adjacent cells in a table. Such a union can be done both vertically and horizontally.

Two attributes are used to combine cells: colspan and rowspan. The value of both attributes is the number of cells to be merged.

The colspan is used to combine cells horizontally. And rowspan - vertically.

Let’s consider the use of these attributes using the example of horizontal union for the Total row:

<table>
  <tr>
    <th> Name </th>
    <th> Qty </th>
    <th> Unit Price </th>
    <th> Cost </th>
  </tr>
  <tr>
    <td> Pencil </td>
    <td> 2 </td>
    <td> 2.50 </td>
    <td> 5.00 </td>
  </tr>
  <tr>
    <td> Handle </td>
    <td> 4 </td>
    <td> 3.50 </td>
    <td> 14.00 </td>
  </tr>
  <tr>
    <td colspan = "3"> Total </td>
    <td> 19.00 </td>
  </tr>
</table>

To display the final row, we need two columns: one for a description of the value, and the other for the value itself. Using the colspan attribute, we have combined three columns (Name, Quantity, Price per unit) into one.

Row groups

Table rows can be grouped into logical groups. This is not required, but it can be very useful for the styles we will learn later.

The first group is the header. Header lines can be enclosed in the <thead> tag.

Then, after the header goes the body of the table, which includes all information rows of the table. The body uses the <tbody> tag.

The <tfoot> tag is used to concatenate rows at the bottom of the table.

Let’s rewrite our example using the row groups:

<table>
  <thead>
    <tr>
      <th> Name </th>
      <th> Qty </th>
      <th> Unit Price </th>
      <th> Cost </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> Pencil </td>
      <td> 2 </td>
      <td> 2.50 </td>
      <td> 5.00 </td>
    </tr>
    <tr>
      <td> Pen </td>
      <td> 4 </td>
      <td> 3.50 </td>
      <td> 14.00 </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan = "3"> Total </td>
      <td> 19.00 </td>
    </tr>
  </tfoot>
</table>

While all three of these tags are optional, it’s best to add them anyway.

First, for the style. You can apply css styles directly only to the header or body of the table. This way you won’t have to figure out which line refers to what - they are already separated.

Secondly, for the sake of functionality. Imagine that you just need to sort the rows, say by price. But you also have a header line, and possibly a summary line, which shouldn’t be sorted. Using grouping, you can apply sort only to the <tbody> group and avoid confusion.

— But we haven’t considered all these cases yet?

— We haven’t, but in the future this knowledge will be indispensable to you. It will make your job easier! Until then, that’s all you need to know about tables. Let’s check how you learned the material.