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.

HTML Buttons

HTML Comments

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?

#

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?

#

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