Intro to Tables

When we need to present some information on a web page as a set of rows and columns, like in Excel, we can use a special <table> tag. It allows not only creating a table but also making captions and even specifying the borders. Let's look at the main tags and attributes used in working with tables.

Table creation

An HTML table is created with the <table> tag. Inside this tag, we place the elements of a table, among which, the two most important ones are:

• the <tr> tag that creates a table row;

• the <td> tag that creates table cells.

Knowing these tags, you can already create a simple table:

<table>
  <tr>
    <td>Tomato soup</td>
    <td>$3.95</td>
  </tr>
  <tr>
    <td>French onion soup</td>
    <td>$4.49</td>
  </tr>
</table>

This is what your table will look like if you open it in your browser:

The result looks minimalistic, but you can add more details – for example, headers for the rows.

Table header cell

The <th> tag is used to create a table header cell for rows or columns. The text inside this tag is bold and centered. Let's try to make table header cells for your table.

<table>
  <tr>
    <th>Main dishes</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Tomato soup</td>
    <td>$3.95</td>
  </tr>
  <tr>
    <td>French onion soup</td>
    <td>$4.49</td>
  </tr>
</table>

The result should be the following:

Caption

In addition to table headers, you can add a caption to the whole table. For this, you need to use the <caption> tag, which is usually added right after the <table> tag:

<table>
  <caption>Restaurant Menu</caption>
  <tr>
    <th>Main dishes</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Tomato soup</td>
    <td>$3.95</td>
  </tr>
  <tr>
    <td>French onion soup</td>
    <td>$4.49</td>
  </tr>
</table>

Now the table should have a centered caption and look like this:

Table borders

By default, the table and its cells have no visible borders, but you can set them using the border attribute. Specify any positive number for the desired width of the border in pixels. For instance:

<table border="1">
  <tr>
    <th>Main dishes</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Tomato soup</td>
    <td>$3.95</td>
  </tr>
  <tr>
    <td>French onion soup</td>
    <td>$4.49</td>
  </tr>
</table>

In the code above, we've set the table border width of 1 pixel, and here's what it looks like:

The border settings automatically apply to all the cells in your table.

It is interesting to know that in the past, developers used borderless tables to set page layout: creating tables helped divide the content of a web page into rows and columns. Today, this is done with CSS, while tables are used for their original purpose.

Conclusion

That's all for today. You've learned the basics of creating and formatting tables in HTML. Of course, there are still a lot of interesting and useful tricks to learn about tables, but it is better to go one little step at a time. Let's practice now!