---
description: HTML tables allow web developers to arrange data into rows and columns.
---

# HTML Tables

<figure><img src="https://1737958340-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVjGFBuDKR1b3eJbq0zoO%2Fuploads%2FzKUkQBw9iBvmTDpE4kMi%2Fimage.png?alt=media&#x26;token=279f9d6f-9d31-443c-9fc8-3ee856ed02bd" alt=""><figcaption></figcaption></figure>

{% code overflow="wrap" lineNumbers="true" %}
```markup
<!DOCTYPE html>
<html>
<head>
<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
</style>
</head>
<body>

<h2>HTML Table</h2>

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

</body>
</html>
```
{% endcode %}

### Define an HTML Table

A table in HTML consists of table cells inside rows and columns.

{% code overflow="wrap" lineNumbers="true" %}
```markup
<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>
```
{% endcode %}

### Table Cells

Each table cell is defined by a `<td>` and a `</td>` tag.

`td` stands for table data.

Everything between `<td>` and `</td>` are the content of the table cell.

{% code overflow="wrap" lineNumbers="true" %}
```markup
<table>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
</table>
```
{% endcode %}

### Table Rows

Each table row starts with a `<tr>` and ends with a `</tr>` tag.

`tr` stands for table row.

{% code overflow="wrap" lineNumbers="true" %}
```markup
<table>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
  <tr>
    <td>16</td>
    <td>14</td>
    <td>10</td>
  </tr>
</table>
```
{% endcode %}

### Table Headers

Sometimes you want your cells to be table header cells. In those cases use the `<th>` tag instead of the `<td>` tag:

`th` stands for table header.

{% code overflow="wrap" lineNumbers="true" %}
```markup
<table>
  <tr>
    <th>Person 1</th>
    <th>Person 2</th>
    <th>Person 3</th>
  </tr>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
  <tr>
    <td>16</td>
    <td>14</td>
    <td>10</td>
  </tr>
</table>
```
{% endcode %}

## HTML Table Borders

HTML tables can have borders of different styles and shapes.

### How To Add a Border

When you add a border to a table, you also add borders around each table cell:

<figure><img src="https://1737958340-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVjGFBuDKR1b3eJbq0zoO%2Fuploads%2FNP8E5kqrwzgly2vKze4o%2Fimage.png?alt=media&#x26;token=2e0d0ad4-8581-4225-a39f-6f6bff66b9df" alt=""><figcaption></figcaption></figure>

To add a border, use the CSS `border` property on `table`, `th`, and `td` elements:

{% code overflow="wrap" lineNumbers="true" %}
```css
table, th, td {
  border: 1px solid black;
}
```
{% endcode %}

### Collapsed Table Borders

To avoid having double borders like in the example above, set the CSS `border-collapse` property to `collapse`.

This will make the borders collapse into a single border:

<figure><img src="https://1737958340-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVjGFBuDKR1b3eJbq0zoO%2Fuploads%2FzURHY3IPGCo8PC2ItdaH%2Fimage.png?alt=media&#x26;token=0375810c-473e-4da9-8ceb-5dbb5bebd014" alt=""><figcaption></figcaption></figure>

{% code overflow="wrap" lineNumbers="true" %}
```css
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
```
{% endcode %}

### Style Table Borders

If you set a background color of each cell, and give the border a white color (the same as the document background), you get the impression of an invisible border:

<figure><img src="https://1737958340-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVjGFBuDKR1b3eJbq0zoO%2Fuploads%2FiFEGvi2baIonbvqNl0x4%2Fimage.png?alt=media&#x26;token=a18f2dea-3c26-4852-a27a-f5b783944e01" alt=""><figcaption></figcaption></figure>

{% code overflow="wrap" lineNumbers="true" %}
```css
table, th, td {
  border: 1px solid white;
  border-collapse: collapse;
}
th, td {
  background-color: #96D4D4;
}
```
{% endcode %}

### Round Table Borders

With the `border-radius` property, the borders get rounded corners:

<figure><img src="https://1737958340-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVjGFBuDKR1b3eJbq0zoO%2Fuploads%2FQwIcrA0ObDkMEdCgshDZ%2Fimage.png?alt=media&#x26;token=6a153200-d5ae-4468-92fb-353865b5f6d3" alt=""><figcaption></figcaption></figure>

{% code overflow="wrap" lineNumbers="true" %}
```css
table, th, td {
  border: 1px solid black;
  border-radius: 10px;
}
```
{% endcode %}

Skip the border around the table by leaving out `table` from the css selector:

<figure><img src="https://1737958340-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVjGFBuDKR1b3eJbq0zoO%2Fuploads%2FMMyn3jQZigbwRSHn3wPs%2Fimage.png?alt=media&#x26;token=56802014-29e8-431d-bc26-58f98aa649c0" alt=""><figcaption></figcaption></figure>

{% code overflow="wrap" lineNumbers="true" %}
```css
th, td {
  border: 1px solid black;
  border-radius: 10px;
}
```
{% endcode %}

### Dotted Table Borders

With the `border-style` property, you can set the appearance of the border.

<figure><img src="https://1737958340-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVjGFBuDKR1b3eJbq0zoO%2Fuploads%2FYHQ4jZOTOsinIrfRxRzU%2Fimage.png?alt=media&#x26;token=5119fd53-bd86-49e8-9ccd-632d73156b5a" alt=""><figcaption></figcaption></figure>

The following values are allowed:

* `dotted`    &#x20;
* `dashed`    &#x20;
* `solid`    &#x20;
* `double`    &#x20;
* `groove`    &#x20;
* `ridge`    &#x20;
* `inset`    &#x20;
* `outset`    &#x20;
* `none`    &#x20;
* `hidden`  &#x20;

{% code overflow="wrap" lineNumbers="true" %}
```css
 th, td {
  border-style: dotted;
}
```
{% endcode %}

### Border Color

With the `border-color` property, you can set the color of the border.

<figure><img src="https://1737958340-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVjGFBuDKR1b3eJbq0zoO%2Fuploads%2FmeDVWdbm9Jp7KsfUdYoO%2Fimage.png?alt=media&#x26;token=a9d06062-59b2-4763-a18e-84c6f2fadff0" alt=""><figcaption></figcaption></figure>

{% code overflow="wrap" lineNumbers="true" %}
```css
 th, td {
  border-color: #96D4D4;
}
```
{% endcode %}

### HTML Table Sizes

HTML tables can have different sizes for each column, row or the entire table.

<figure><img src="https://1737958340-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVjGFBuDKR1b3eJbq0zoO%2Fuploads%2FnYMkSKQCjtHnBQNbpeaj%2Fimage.png?alt=media&#x26;token=38be53b0-4b9c-4ad7-847a-4efed9cb0d36" alt=""><figcaption></figcaption></figure>

Use the `style` attribute with the `width` or `height` properties to specify the size of a table, row or column.

### HTML Table Width

To set the width of a table, add the `style` attribute to the `<table>` element:

{% code overflow="wrap" lineNumbers="true" %}
```markup
<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>
```
{% endcode %}

### HTML Table Column Width

<figure><img src="https://1737958340-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVjGFBuDKR1b3eJbq0zoO%2Fuploads%2FEpBCz1S6fNWBaYEkAMwa%2Fimage.png?alt=media&#x26;token=9eb4ddce-3e39-4189-91be-e8ec3be8de15" alt=""><figcaption></figcaption></figure>

To set the size of a specific column, add the `style` attribute on a `<th>` or `<td>` element:

{% code overflow="wrap" lineNumbers="true" %}
```html
<table style="width:100%">
  <tr>
    <th style="width:70%">Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>
```
{% endcode %}

### HTML Table Row Height

<figure><img src="https://1737958340-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVjGFBuDKR1b3eJbq0zoO%2Fuploads%2FzZVR0f4JcwAqEywCbLQw%2Fimage.png?alt=media&#x26;token=5c1d31b3-9329-4e79-b0de-880081405c39" alt=""><figcaption></figcaption></figure>

To set the height of a specific row, add the `style` attribute on a table row element:

{% code overflow="wrap" lineNumbers="true" %}
```html
<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr style="height:200px">
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>
```
{% endcode %}

### HTML Table Headers

HTML tables can have headers for each column or row, or for many columns/rows.

<figure><img src="https://1737958340-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVjGFBuDKR1b3eJbq0zoO%2Fuploads%2FaymOMIIKuOPB357tLWF9%2Fimage.png?alt=media&#x26;token=c98d9039-653c-489c-a624-62457cc28bb8" alt=""><figcaption></figcaption></figure>

### HTML Table Headers

Table headers are defined with `th` elements. Each `th` element represents a table cell.

{% code overflow="wrap" lineNumbers="true" %}
```markup
<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>
```
{% endcode %}

### Vertical Table Headers

To use the first column as table headers, define the first cell in each row as a `<th>` element:

{% code overflow="wrap" lineNumbers="true" %}
```html
<table>
  <tr>
    <th>Firstname</th>
    <td>Jill</td>
    <td>Eve</td>
  </tr>
  <tr>
    <th>Lastname</th>
    <td>Smith</td>
    <td>Jackson</td>
  </tr>
  <tr>
    <th>Age</th>
    <td>94</td>
    <td>50</td>
  </tr>
</table>
```
{% endcode %}

### Align Table Headers

By default, table headers are bold and centered:

<figure><img src="https://1737958340-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVjGFBuDKR1b3eJbq0zoO%2Fuploads%2FZu22GRtvlZmFMlsnZAgc%2Fimage.png?alt=media&#x26;token=2d8730fe-d917-454b-a80a-3ddb00b3a9b3" alt=""><figcaption></figcaption></figure>

To left-align the table headers, use the CSS `text-align` property:

{% code overflow="wrap" lineNumbers="true" %}
```css
th {
  text-align: left;
}
```
{% endcode %}

### Header for Multiple Columns

You can have a header that spans over two or more columns.

<figure><img src="https://1737958340-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVjGFBuDKR1b3eJbq0zoO%2Fuploads%2FxfznsT02hLrFtGvJFyfX%2Fimage.png?alt=media&#x26;token=2368b1cd-70e6-4df7-aca1-f78e158863d9" alt=""><figcaption></figcaption></figure>

To do this, use the `colspan` attribute on the `<th>` element:

{% code overflow="wrap" lineNumbers="true" %}
```html
<table>
  <tr>
    <th colspan="2">Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>
```
{% endcode %}

### Table Caption

You can add a caption that serves as a heading for the entire table.

<figure><img src="https://1737958340-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVjGFBuDKR1b3eJbq0zoO%2Fuploads%2FR1YvicInQO6bVpkeyFjr%2Fimage.png?alt=media&#x26;token=6d72f2db-9856-4cc6-9d6b-7239a986feb9" alt=""><figcaption></figcaption></figure>

To add a caption to a table, use the `<caption>` tag:

{% code overflow="wrap" lineNumbers="true" %}
```html
<table style="width:100%">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>
```
{% endcode %}

### HTML Table Padding & Spacing

HTML tables can adjust the padding inside the cells, and also the space between the cells.

<figure><img src="https://1737958340-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVjGFBuDKR1b3eJbq0zoO%2Fuploads%2FJU9VZ5GlAEWi9Ev8AXVB%2Fimage.png?alt=media&#x26;token=348f1151-e184-4872-b5ab-4ed207fc35bf" alt=""><figcaption></figcaption></figure>

### HTML Table - Cell Padding

Cell padding is the space between the cell edges and the cell content.

By default the padding is set to 0.

To add padding on table cells, use the CSS `padding` property:

{% code overflow="wrap" lineNumbers="true" %}
```css
th, td {
  padding: 15px;
}
```
{% endcode %}

To add padding only above the content, use the `padding-top` property.

And the others sides with the `padding-bottom`, `padding-left`, and `padding-right` properties:

{% code overflow="wrap" lineNumbers="true" %}
```css
th, td {
  padding-top: 10px;
  padding-bottom: 20px;
  padding-left: 30px;
  padding-right: 40px;
}
```
{% endcode %}

### HTML Table - Cell Spacing

Cell spacing is the space between each cell.

By default the space is set to 2 pixels.

To change the space between table cells, use the CSS `border-spacing` property on the `table` element:

{% code overflow="wrap" lineNumbers="true" %}
```css
table {
  border-spacing: 30px;
}
```
{% endcode %}

### HTML Table Colspan & Rowspan

HTML tables can have cells that span over multiple rows and/or columns.

<figure><img src="https://1737958340-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVjGFBuDKR1b3eJbq0zoO%2Fuploads%2Flp10KMjjtwlYlPpXOFS2%2Fimage.png?alt=media&#x26;token=c214d64e-f8c7-4295-95a4-5a6a3be3220a" alt=""><figcaption></figcaption></figure>

### HTML Table - Colspan

To make a cell span over multiple columns, use the `colspan` attribute:

{% code overflow="wrap" lineNumbers="true" %}
```html
<table>
  <tr>
    <th colspan="2">Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>43</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>57</td>
  </tr>
</table>
```
{% endcode %}

### HTML Table - Rowspan

To make a cell span over multiple rows, use the `rowspan` attribute:

{% code overflow="wrap" lineNumbers="true" %}
```html
<table>
  <tr>
    <th>Name</th>
    <td>Jill</td>
  </tr>
  <tr>
    <th rowspan="2">Phone</th>
    <td>555-1234</td>
  </tr>
  <tr>
    <td>555-8745</td>
</tr>
</table>
```
{% endcode %}

### HTML Table Styling

Use CSS to make your tables look better.

### HTML Table - Zebra Stripes

If you add a background color on every other table row, you will get a nice zebra stripes effect.

<figure><img src="https://1737958340-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVjGFBuDKR1b3eJbq0zoO%2Fuploads%2FoV5UjSJCeuGUyIwAHWnu%2Fimage.png?alt=media&#x26;token=dbb28226-41ec-4e7e-b972-48c530f581f0" alt=""><figcaption></figcaption></figure>

To style every other table row element, use the `:nth-child(even)` selector like this:

{% code overflow="wrap" lineNumbers="true" %}
```css
tr:nth-child(even) {
  background-color: #D6EEEE;
}
```
{% endcode %}

### HTML Table - Vertical Zebra Stripes

To make vertical zebra stripes, style every other _column_, instead of every other _row_.

<figure><img src="https://1737958340-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVjGFBuDKR1b3eJbq0zoO%2Fuploads%2FtbJxt3hjh2SMLCY6hnsz%2Fimage.png?alt=media&#x26;token=53988251-5f5d-43ad-a7bd-0b380f119bfd" alt=""><figcaption></figcaption></figure>

Set the `:nth-child(even)` for table data elements like this:

{% code overflow="wrap" lineNumbers="true" %}
```css
td:nth-child(even), th:nth-child(even) {
  background-color: #D6EEEE;
}
```
{% endcode %}

### Combine Vertical and Horizontal Zebra Stripes

You can combine the styling from the two examples above and you will have stripes on every other row and every other column.

If you use a transparent color you will get an overlapping effect.

<figure><img src="https://1737958340-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVjGFBuDKR1b3eJbq0zoO%2Fuploads%2FKoE7jY6P6qmBfEB5NiGx%2Fimage.png?alt=media&#x26;token=3ab2eb27-f21f-40ec-929a-87416b2812db" alt=""><figcaption></figcaption></figure>

Use an `rgba()` color to specify the transparency of the color:

{% code overflow="wrap" lineNumbers="true" %}
```css
tr:nth-child(even) {
  background-color: rgba(150, 212, 212, 0.4);
}

th:nth-child(even),td:nth-child(even) {
  background-color: rgba(150, 212, 212, 0.4);
}
```
{% endcode %}

### Horizontal Dividers

<figure><img src="https://1737958340-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVjGFBuDKR1b3eJbq0zoO%2Fuploads%2FIBYMp42HxhKHPM3Tic5E%2Fimage.png?alt=media&#x26;token=f7ab0b99-3751-4dd0-80e2-004972bd3f56" alt=""><figcaption></figcaption></figure>

If you specify borders only at the bottom of each table row, you will have a table with horizontal dividers.

Add the `border-bottom` property to all `tr` elements to get horizontal dividers:

{% code overflow="wrap" lineNumbers="true" %}
```css
tr {
  border-bottom: 1px solid #ddd;
}
```
{% endcode %}

### Hoverable Table

Use the `:hover` selector on `tr` to highlight table rows on mouse over:

<figure><img src="https://1737958340-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVjGFBuDKR1b3eJbq0zoO%2Fuploads%2FQsSlmOuO3AiXQVseyKW3%2Fimage.png?alt=media&#x26;token=df6077d8-452e-4e2e-b4d2-23b5bb8671b1" alt=""><figcaption></figcaption></figure>

{% code overflow="wrap" lineNumbers="true" %}
```css
tr:hover {
    background-color: #D6EEEE;
}
```
{% endcode %}
