HTML Tables


  1. Purpose
  2. Basic table tags
  3. Common attributes
  4. Table Headers
  5. Col-span
  6. Row-span
  7. Color
  8. Useful Tips
    1. Empty Cells in a Table
    2. Seldom Used Elements
    3. HTML - Standard Layout
    4. Basic Layout 1
    5. Basic Layout 2
    6. Final Tips

Purpose

The original purpose of tables in HTML, was to present tabular data.

Nowadays, although they are still used for this purpose, many web designers tended to use tables for advanced layouts.

This is probably due to the restrictions that HTML has on layout capabilities

In fact, HTML wasn't really designed as a layout language.

Anyway, for presenting tabular data, or for page layouts, the HTML tags are the same.


Basic table tags

The table tag is the one used to create tables in HTML.

It is used in conjunction with the tr and td tags.

There are other tags for creating tables, but these are the basic ones.

        <table border="1">
          <tr>
            <td>Table cell 1</td>
            <td>Table cell 2</td>
          </tr>
        </table>
      

This results in:

Table cell 1 Table cell 2

The border attribute added to the table tag, allows specify the border thickness.

Specifying border="0" means "no border.


Common attributes

You can use other common attributes with your table tag including: width, cellspacing and cellpadding.

You can also add attributes to the tr and td tags.

For example, you can specify the width of each table cell.

Widths can be specified in either pixels or percentages.

Specifying the width in pixels means an exact width.

Specifying the width in percentages means the table to "grow" or "shrink", limited by other objects on the page.

HTML Code:

        <table border="1" cellpadding="5" cellspacing="5" width="95%">
          <tr>
            <td width="20%">Table cell 1</td>
            <td>Table cell 2</td>
          </tr>
        </table>
      

This results in:

Table cell 1 Table cell 2


Table Headers

Many tables, particularly those with tabular data, have a header row or column.

You may need a header row or column, particularly on those tables with tabular data.

Table headers are displayed in bold and center-aligned in most of the browsers.

        <table border="1" cellpadding="5" cellspacing="5" width="95%">
          <tr>
            <th>Table header</th>
            <th>Table header</th>
          </tr>
          <tr>
            <td width="20%">Table cell 1</td>
            <td>Table cell 2</td>
          </tr>
        </table>
      

This results in:

Table header Table header
Table cell 1 Table cell 2


Col-span

The colspan attribute is used to make a cell span multiple columns.

        <table border="1" cellpadding="5" cellspacing="5" width="95%">
          <tr>
            <th colspan="2">Table header</th>
          </tr>
          <tr>
            <td width="20%">Table cell 1</td>
            <td>Table cell 2</td>
          </tr>
        </table>
      

This results in:

Table header
Table cell 1 Table cell 2


Row-span

The rowspan attribute is used to make a cell span multiple rows.

HTML Code:

        <table border="1" cellpadding="5" cellspacing="5" width="95%">
          <tr>
            <th style="text-align: center;" rowspan="2">Table header</th>
            <td>Table cell 1</td>
          </tr>
          <tr>
            <td>Table cell 2</td>
          </tr>
        </table>
      

This results in:

Table header Table cell 1
Table cell 2


Color

Using "style" parameter, it is possible to apply not only color,
but any applicable CSS property to a table, like: width, padding, margin, etc.

HTML Code:

        <table border="1" cellpadding="5" cellspacing="5" width="95%">
          <tr>
            <th style="color:blue; background-color:yellow;" rowspan="2">Table header</th>
            <td>Table cell 1
          </tr>
          <tr>
            <td>Table cell 2</td>
          </tr>
        </table>
      

This results in:

Table header Table cell 1
Table cell 2


Useful Tips

Empty Cells in a Table

Table cells with no content are not displayed very well in most browsers.

        <table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td></td>
</tr>
</table>

How it looks in a browser:

row 1, cell 1 row 1, cell 2
row 2, cell 1

The borders around the empty table cell are missing.

To fix this, add a non-breaking space "&nbsp;" to empty data cells: 

        <table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>&nbsp;</td>
</tr>
</table>

How it looks in a browser:

row 1, cell 1 row 1, cell 2
row 2, cell 1  


HTML - Standard Layout

A standard layout consists of three elements:

Lets see a few examples.

Basic Layout 1

This results in:

Place a banner here
Content goes here

This is a very basic and organized layout.



Basic Layout 2

This results in:

Banner goes here
Content goes here

Another commonly used layout.



Final Tips