HTML Tables

To create tables in HTML you use the <table> tag. Tables should be used for tabular data only, and you can create both complex  and simple tables.

Table Elements

The table below shows the tags needed to create a table.

Sponsored Links
Tag Description
<caption> * A caption for the table
<thead> * Groups a set of table heading tags
<tbody> * The body of a table
<tfoot> * Table footer
<tr> Table row
<td> Table data (known as cells) - <td> elements create a column.

*These elements are not required to create a table; you can create a simple table without them.

Example 1 – Simple Table

The following is a simple table with two rows and two columns:

<table>

  <tr>
   <td>Column 1</td>
   <td>Column 2</td>
  </tr>

  <tr>
   <td>Row 1 - Column 1</td>
​   <td>Row 1 - Column 2</td>
  </tr>

</table>

Output

Column 1 Column 2
Row 1 - Column 1 Row 1 - Column 2

Example 2 – Complex Tables

The following table is much more complex, as it uses headings, body and footers to structure the table. Generally they are not needed when creating tables, but they can be useful if you want to group your table.

<table>

<thead>
   <th>Heading 1</th>
   <th>Heading 2</th>
   <th>Heading 3</th>
</thead>


<tbody>
<tr>
   <td>Column 1</td>
   <td>Column 2</td>
   <td>Column 3</td>
</tr> 
</tbody>


<tfoot>
<tr>
    <td colspan="3" style="text-align:center;">This is the table footer</td>
</tr>
</tfoot> 

</table>

Output

Heading 1 Heading 2 Heading 3
Column 1 Column 2 Column 3
This is the table footer

Table Attributes

Attributes provide additional information for a table. Below are the major attributes you should know.

Attribute Description
Colspan This attribute specifies how many columns the cell should span.
Rowspan This attribute specifies how many rows the cell should span.
Align The alignment of the content in the cell, either left, right, center, or justify.

Example 3 – Colspan Attribute

<table>

<thead>
<tr>
   <th>Column 1</th>
   <th>Column 2</th>
</tr>
</thead>

<tbody>
<tr>
   <td colspan=”2”>I am two columns wide!</td>
<tr/>
</tbody>

</table>

Output

Column 1 Column 2
I am two columns wide!

Example 4 - Row Span

<table style="width: 100%">
    <thead>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
    </thead>
    <tr>
        <td rowspan="2">Row 1 - RowSpan</td>
        <td>Column 2 - Row 1</td>
        <td>Column 3 - Row 1</td>
    </tr>
    <tr>
        <td>Column 2 - Row 1</td>
        <td>Column 3 - Row 1</td>
    </tr>
    <tr>
        <td rowspan="2">Row 2 - RowSpan</td>
        <td>Column 2 - Row 2</td>
        <td>Column 3 - Row 2</td>
    </tr>
    <tr>
        <td>Column 2 - Row 2</td>
        <td>Column 3 - Row 2</td>
    </tr>
</table>

Output

Column 1 Column 2 Column 3
Row 1 - RowSpan Column 2 - Row 1 Column 3 - Row 1
Column 2 - Row 1 Column 3 - Row 1
Row 2 - RowSpan Column 2 - Row 2 Column 3 - Row 2
Column 2 - Row 2 Column 3 - Row 2

Summary

This tutorial covered the basics of HTML tables. Tables should only be used for tabular data, they are not designed for layouts. Tables can be styled using CSS.