HTML table

Explore the basics of using HTML tables

The early days of web forms were an important part of building layout.

Later, they were replaced by CSS and its layout features, and now we have powerful tools (such as CSS Flexbox and CSS Grid) to build layouts. The performance is only used for the construction of the guess table!

Thistablelabel

you can use ittablelabel:

<table>

</table>

Inside the table, we will define the data. We reason based on rows, which means we add rows to the table (rather than to the columns). We will define the columns in a row.

Rows

Add a row usingtrTag, this is the only thing we can add totableelement:

<table>
  <tr></tr>
  <tr></tr>
  <tr></tr>
</table>

This is a table with 3 rows.

first rowwere ablePlay the role of the title.

Column header

The table header contains the name of a column, usually in bold.

Consider an Excel/Google Sheet document. topA-B-C-D...Header.

Column headers

We usethlabel:

<table>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
  </tr>
  <tr></tr>
  <tr></tr>
</table>

Table content

The content of this table is defined astdLabel, in anothertrelement:

<table>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
  </tr>
  <tr>
    <td>Row 1 Column 1</td>
    <td>Row 1 Column 2</td>
    <td>Row 1 Column 3</td>
  </tr>
  <tr>
    <td>Row 2 Column 1</td>
    <td>Row 2 Column 2</td>
    <td>Row 2 Column 3</td>
  </tr>
</table>

If you don't add any CSS styles, this is how the browser renders it:

No styling

Add this CSS:

th, td {
  padding: 10px;
  border: 1px solid #333;
}

Make the table look more like a proper table:

A proper table

Hurdles and rows

A row can decide to use 2 or more columns,colspanAttributes:

<table>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
  </tr>
  <tr>
    <td colspan="2">Row 1 Columns 1-2</td>
    <td>Row 1 Column 3</td>
  </tr>
  <tr>
    <td colspan="3">Row 2 Columns 1-3</td>
  </tr>
</table>

A colspan example

Or it can use 2 or more rowsrowspanAttributes:

<table>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
  </tr>
  <tr>
    <td colspan="2" rowspan="2">Rows 1-2 Columns 1-2</td>
    <td>Row 1 Column 3</td>
  </tr>
  <tr>
    <td>Row 2 Column 3</td>
  </tr>
</table>

A rowspan example

Row header

Before I explain how to use column headers, please usethIn the first tabtrThe label of the table.

You can add athMark as the first element in atrThat's not the firsttrTable row headings:

<table>
  <tr>
    <th></th>
    <th>Column 2</th>
    <th>Column 3</th>
  </tr>
  <tr>
    <th>Row 1</th>
    <td>Col 2</td>
    <td>Col 3</td>
  </tr>
  <tr>
    <th>Row 2</th>
    <td>Col 2</td>
    <td>Col 3</td>
  </tr>
</table>

Row headings

More tabs to organize the table

You can add 3 more tags to the table to make it more organized.

It is best when using a large watch. And correctly define the header and footer.

These tags are

  • thead
  • tbody
  • tfoot

They puttrLabels to clearly define the different parts of the table. This is an example usage:

<table>
  <thead>
    <tr>
      <th></th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Row 1</th>
      <td>Col 2</td>
      <td>Col 3</td>
    </tr>
    <tr>
      <th>Row 2</th>
      <td>Col 2</td>
      <td>Col 3</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td></td>
      <td>Footer of Col 1</td>
      <td>Footer of Col 2</td>
    </tr>
  </tfoot>
</table>

thead and tfoot

Table title

A table should have onecaptionA label describing its content. The label should be placed immediately after openingtablelabel:

<table>
  <caption>Dogs age</caption>
  <tr>
    <th>Dog</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Roger</td>
    <td>7</td>
  </tr>
</table>

Download mine for freeHTML manual


More HTML tutorials: