Dofactory.com
Dofactory.com

HTML Tables

A table in HTML displays tabular data, just like a spreadsheet.

A table has rows, columns, and, optionally, a header and a footer.

It takes at least 3 different tags to create a table: <table>, <tr>, and <td>.

Example

#

A <table> with three rows and three columns. The top row is a header row.

Firstname Lastname Country
Christina Berglund Sweden
Maria Larsson Sweden
<style>
  .tb { border-collapse: collapse; width:400px; }
  .tb th, .tb td { padding: 5px; border: solid 1px #777; }
  .tb th { background-color: aliceblue; }
</style>

<table class="tb">
   <tr> 
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Country</th>
   </tr>
   <tr> 
      <td>Christina</td>
      <td>Berglund</td>
      <td>Sweden</td>
   </tr>
   <tr> 
      <td>Maria</td>
      <td>Larsson</td>
      <td>Sweden</td>
   </tr>
</table>

Tags to create a table:

The <table> tag creates a table.

The <tr> tag creates a row in a table.

The <td> tag creates a data cell in a row.

The <th> tag creates a header cell in a row.

For details on the table element, see our HTML table tag reference.

Table Border

By default, tables have no borders, but they are added with CSS.

A <table> with highlighted borders.

Firstname Lastname Country
Christina Berglund Sweden
Maria Larsson Sweden
<style>
  .tbb { border-collapse: collapse; width:400px; }
  .tbb th, .tbb td { padding: 5px; border: solid 1px orangered; }
  .tbb th { background-color: aliceblue; }
</style>

<table class="tbb">
   <tr> 
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Country</th>
   </tr>
   <tr> 
      <td>Christina</td>
      <td>Berglund</td>
      <td>Sweden</td>
   </tr>
   <tr> 
      <td>Maria</td>
      <td>Larsson</td>
      <td>Sweden</td>
   </tr>
</table>

For details on border, see our CSS border property reference.


Table Border Spacing

Border spacing is defined with the CSS border-spacing property. The border-collapse property defines whether cells share the borders or have separate borders.

A <table> with separate borders for each cell.

Firstname Lastname Country
Christina Berglund Sweden
Maria Larsson Sweden
<style>
  .tbs { border-collapse: separate; border-spacing: 10px; width:400px; }
  .tbs th, .tbs td { padding: 5px; border: solid 1px #777; }
  .tbs th { background-color: aliceblue; }
</style>

<table class="tbs">
   <tr> 
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Country</th>
   </tr>
   <tr> 
      <td>Christina</td>
      <td>Berglund</td>
      <td>Sweden</td>
   </tr>
   <tr> 
      <td>Maria</td>
      <td>Larsson</td>
      <td>Sweden</td>
   </tr>
</table>

For details on border-spacing, see our CSS border-spacing property reference.


Table Cell Padding

The CSS padding attribute sets the space between the cell content and its borders.

A <table> with extra padding for each cell, giving them some extra room.

Firstname Lastname Country
Christina Berglund Sweden
Maria Larsson Sweden
<style>
  .tbp { border-collapse: collapse; width:400px; }
  .tbp th, .tbp td { padding: 10px; border: solid 1px #777; }
  .tbp th { background-color: aliceblue; }
</style>

<table class="tbp">
   <tr> 
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Country</th>
   </tr>
   <tr> 
      <td>Christina</td>
      <td>Berglund</td>
      <td>Sweden</td>
   </tr>
   <tr> 
      <td>Maria</td>
      <td>Larsson</td>
      <td>Sweden</td>
   </tr>
</table>

For details on padding, see our CSS padding property reference.


Table Text Alignment

By default, table headings are bold and centered.

A <table> styled with a left-aligned, aliceblue heading.

Firstname Lastname Age
Cecilia Smith 40
Maria Jackson 44
Albert de Wei 66
<style>
  .tba { border-collapse: collapse; width:400px; }
  .tba th, .tba td { padding: 5px; border: solid 1px #777; text-align:left; }
  .tba th { background-color: aliceblue; font-weight:bold; }
</style>

<table class="tba">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Cecilia</td>
    <td>Smith</td>
    <td>40</td>
  </tr>
  <tr>
    <td>Maria</td>
    <td>Jackson</td>
    <td>44</td>
  </tr>
  <tr>
    <td>Albert</td>
    <td>de Wei</td>
    <td>66</td>
  </tr>
</table>

For details on text alignment, see our CSS text-align property reference.


Did you know?

Did you know?

Aligning table text horizontally and vertically.

The horizontal positioning is set with the CSS text-align property: either left, center, or right.

Vertical alignment is set with vertical-align. Possible values are baseline, sub, super, text-top, text-bottom, middle, top, bottom, or as a percentage.

A <table> with text that aligns in the middle, both horizontally and vertically.

Firstname Lastname Age
Cecilia Smith 40
Maria Jackson 44
Albert de Wei 66
<style>
  .tbv { border-collapse: collapse; width:400px; }
  .tbv th, .tbv td { padding: 10px; vertical-align: middle; 
                     border: solid 1px #777; text-align: center; }
  .tbv th { background-color: aliceblue; font-weight:bold; }
</style>

<table class="tbv">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Cecilia</td>
    <td>Smith</td>
    <td>40</td>
  </tr>
  <tr>
    <td>Maria</td>
    <td>Jackson</td>
    <td>44</td>
  </tr>
  <tr>
    <td>Albert</td>
    <td>de Wei</td>
    <td>66</td>
  </tr>
</table>           

For details on vertical-align, see our CSS vertical-align property reference.


Table Column Span

Use the colspan attribute to merge two or more columns into a single column.

In this <table>, two header cells have been merged.

Fullname Country
Christina Berglund Sweden
Maria Larsson Sweden
<style>
  .tbc { border-collapse: collapse; width:400px; }
  .tbc th, .tbc td { padding: 5px; border: solid 1px #777; }
  .tbc th { background-color: aliceblue; }
</style>

<table class="tbc">
   <tr> 
      <th colspan="2">Fullname</th>
      <th>Country</th>
   </tr>
   <tr> 
      <td>Christina</td>
      <td>Berglund</td>
      <td>Sweden</td>
   </tr>
   <tr> 
      <td>Maria</td>
      <td>Larsson</td>
      <td>Sweden</td>
   </tr>
</table>

Table Row Span

Use the rowspan attribute to merge two or more rows into a single row.

In this <table>, three rows have been merged into one.

Name Christina Berglund
Countries Sweden
USA
Italy
<style>
  .tbr { border-collapse: collapse; width:400px; }
  .tbr th, .tbr td { padding: 5px; border: solid 1px #777; }
  .tbr th { background-color: aliceblue; }
</style>

<table class="tbr">
  <tr>
    <th>Name</th> 
    <td>Christina Berglund</td>
  </tr>
  <tr>
    <th rowspan="3">Countries</th>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>USA</td>
  </tr>
  <tr>
    <td>Italy</td>
  </tr>
</table>

Did you know?

Did you know?

Table rows with alternating colors

With the CSS tr:nth-child(odd) selector you can style alternating rows in a table.

This is refered to as "Zebra Stripes".

A <table> styled with zebra stripes.

Firstname Lastname Country
Christina Berglund Sweden
Maria Larsson Sweden
Olav Helmland Sweden
Lara Peterson Sweden
<style>
  .zebra { border-collapse: collapse; width:400px; }
  .zebra tr:nth-child(odd) { background: aliceblue; }
  .zebra th, .zebra td { padding: 5px; border: solid 1px #777; }
  .zebra th { background-color: aliceblue; }
</style>

<table class="zebra">
   <tr> 
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Country</th>
   </tr>
   <tr> 
      <td>Christina</td>
      <td>Berglund</td>
      <td>Sweden</td>
   </tr>
   <tr> 
      <td>Maria</td>
      <td>Larsson</td>
      <td>Sweden</td>
   </tr>
  <tr> 
      <td>Olav</td>
      <td>Helmland</td>
      <td>Sweden</td>
   </tr>
  <tr> 
      <td>Lara</td>
      <td>Peterson</td>
      <td>Sweden</td>
   </tr>
</table>

Table Tags

A table is a complex UI feature and to define one in HTML requires multiple tags.
Here is a list of all table tags that you can use to create comprehensive tables.

Tag Description
<table> Defines a table
<tr> Defines a row in a table
<th> Defines a header cell in a table
<td> Defines a cell in a table
<caption> Defines a table caption
<colgroup> Specifies a group of one or more columns in a table for formatting
<col> Specifies column properties for each column within a colgroup element
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table

You may also like


Author: Jack Poorte
Published: Jun 20 2021
Last Reviewed: Sep 30 2023


What's your favorite/least favorite part of Dofactory?


Guides