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.

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

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

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

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

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.