Examples of Tables

Example 1

A very simple table with two rows, two columns and no border.

Cell 1	Cell 2
Cell 3	Cell 4

<table border="0">
<tr>
   <td>Cell 1</td><td>Cell 2</td>
</tr>
<tr>
   <td>Cell 3</td><td>Cell 4</td>
</tr>
</table>

Example 2

Here is the same example with a border.

Cell 1	Cell 2
Cell 3	Cell 4

<table border="1">
<tr>
   <td>Cell 1</td><td>Cell 2</td>
</tr>
<tr>
   <td>Cell 3</td><td>Cell 4</td>
</tr>
</table>

Example 3

Here is the same example illustrating border, cellpadding and cellspacing.

Cell 1	Cell 2
Cell 3	Cell 4

<table border="10" cellspacing="20" cellpadding="5">
<tr>
   <td>Cell 1</td><td>Cell 2</td>
</tr>
<tr>
   <td>Cell 3</td><td>Cell 4</td>
</tr>
</table>

Example 4

The colspan attribute can be used to span multiple columns in a row.

Cell 1 and Cell 2
Cell 3	Cell 4

<table border="1">
<tr>
   <td colspan="2">Cell 1 and Cell 2</td>
</tr>
<tr>
   <td>Cell 3</td><td>Cell 4</td>
</tr>
</table>

Example 5

The rowspan attribute can be used to span multiple rows in a column

Cell 1 and Cell 3	Cell 2
	Cell 4

<table border="1">
<tr>
   <td rowspan="2">Cell 1 and Cell 3</td>
   <td>Cell 2</td>
</tr>
<tr>
   <td>Cell 4</td>
</tr>
</table>

Example 6

A two-column table using colors, a column header row, and a border.

Heading for column 1	Heading for column 2
Data 1, 1	Data 1, 2
Data 2, 1	Data 2, 2
Data 3, 1	Data 3, 2
Data 4, 1	Data 4, 2

<table border="1" cellspacing="0" cellpadding="2">
   <tr style="background-color: #808080; text-align: center">
      <th>Heading for column 1</th>
      <th>Heading for column 2</th>
   </tr>
   <tr style="background-color: #BFBFBF; text-align: center"> 
      <td>Data 1, 1</td>
      <td>Data 1, 2</td>
   </tr>
   <tr style="background-color: #BFBFBF; text-align: center"> 
      <td>Data 2, 1</td>
      <td>Data 2, 2</td>
   </tr>
   <tr style="background-color: #BFBFBF; text-align: center"> 
      <td>Data 3, 1</td>
      <td>Data 3, 2</td>
   </tr>
   <tr style="background-color: #BFBFBF; text-align: center"> 
      <td>Data 4, 1</td>
      <td>Data 4, 2</td>
   </tr>
</table>

Example 7

This is a table that has one row with two cells in it. Each cell is also a table that has four rows of one cell each.

Heading for column 1
Data 1, 1
Data 2, 1
Data 3, 1

Heading for column 1
Data 1, 1
Data 2, 1
Data 3, 1

<table border="0" cellspacing="0" cellpadding="0" bgcolor="#000000">
   <tr>
      <td>
         <table border="0" cellspacing="1" cellpadding="2">
            <tr style="background-color: #0080C0; text-align: center">
              <th>Heading for column 1</th>
            </tr>
            <tr style="background-color: #9999CC; text-align: center"> 
              <td>Data 1, 1</td>
            </tr>
            <tr style="background-color: #9999CC; text-align: center"> 
              <td>Data 2, 1</td>
            </tr>
            <tr style="background-color: #9999CC; text-align: center"> 
              <td>Data 3, 1</td>
            </tr>
         </table>
      </td>
      <td>
         <table border="0" cellspacing="1" cellpadding="2">
            <tr style="background-color: #0080C0; text-align: center">
              <th>Heading for column 1</th>
            </tr>
            <tr style="background-color: #9999CC; text-align: center"> 
               <td>Data 1, 1</td>
            </tr>
            <tr style="background-color: #9999CC; text-align: center"> 
               <td>Data 2, 1</td>
            </tr>
            <tr style="background-color: #9999CC; text-align: center"> 
               <td>Data 3, 1</td>
            </tr>
         </table>
      </td>
   </tr>
</table>

Example 8

Using a table to display one or more paragraphs of text with a heading. Colors are used instead of a border.

This is the heading
This is a paragraph of text that goes along with the heading

<table border="0" cellspacing="0" cellpadding="2" width="25%">
   <tr style="background-color: #808080; text-align: center"> 
      <th>This is the heading</th>
   </tr>

   <tr style="background-color: #9999CC; text-align: left"> 
      <td>
         This is a paragraph of text that goes along with the heading
      </td>
   </tr>
</table>

Example 9

Here is a simple table for an announcement in a box.

This is an announcement

<table align="center" border="2" cellspacing="0" cellpadding="10" summary="table">
<tr>
   <td style="background-color: #A0A0A0; text-align: center">This is an announcement</td> 
</tr>
</table>