#### Simple 2 x 2 table

1 | 2
3 | 4

       <table border>
       <tr>
         <td>1</td>
         <td>2</td>
       <tr>
         <td>3</td>
         <td>4</td>
       </table>

#### Another 2 x 2 table

1 | 2
3 | Cells expand to fit

    <table border>
    <tr>
      <td>1</td>
      <td>2</td>
    <tr>
      <td>3</td>
      <td>Cells expand<br>
           to fit</td>
    </table>

#### Rowspan and Colspan attributes

1 | 2 | 3
4 | Rowspan and Colspan attributes allow cells to occupy more than one row or column
5

    <table border>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    <tr>
      <td>4</td>
      <td rowspan=2 colspan=2>
        Rowspan and Colspan attributes allow cells to
        occupy more than one row or column
      </td>
    <tr>
      <td>5</td>
    </table>

#### Rows and/or Columns may have headings

| Days of Week
| Monday | Tuesday | Wednesday
Week 1 | 1 | 2 | 3
Week 2 | 4 | 5 | 6

    <table border>
    <tr>
       <td></td>
       <th colspan=3>Days of Week</th>
    <tr>
       <td></td>
       <th>Monday</th>
       <th>Tuesday</th>
       <th>Wednesday</th>
    <tr>
       <th>Week 1</th>
       <td>1</td>
       <td>2</td>
       <td>3</td>
    <tr>
       <th>Week 2</th>
       <td>4</td>
       <td>5</td>
       <td>6</td>
    </table>

#### Alignment in cells can be controlled

| Alignment Attributes, Align and VAlign
Vertical Alignment | Top | Middle | Bottom
Horizontal Alignment | Left | Center | Right

    <table border>
    <tr>
       <td></td>
       <th colspan=3>Alignment Attributes, Align and VAlign</th>
    <tr>
       <th>Vertical<br>Alignment</th>
       <td valign=top>Top</td>
       <td valign=middle>Middle</td>
       <td valign=bottom>Bottom</td>
    <tr>
       <th>Horizontal<br>Alignment</th>
       <td align=left>Left</td>
       <td align=center>Center</td>
       <td align=right>Right</td>
    </table>

#### Table cells can contain just about anything
Background colors can be added

Images | 2 x 2 Table Hotspots

Some
Text

Another table
1 | 2 | 3
4 | 5

    <table border>
    <tr align=center>
      <td><img src="glass.bmp"><br>
          Images</td>
      <td bgcolor="#ffcdcd">
          <a href="#TableContents">Table Contents</a><br>
          Hotspots</td>
    <tr align=center>
      <td>Some<br>Text</td>
      <td><table border bordercolor="#37ffcd">
      <caption>Another table</caption>
            <tr>
              <td>1</td>
              <td>2</td>
              <td bgcolor="#D9D9F3">3</td>
            <tr>
              <td>4</td>
              <td>5</td>
            </table></td>
    </table>

#### Cell widths can be specified as a percentage of table width and table width as a percentage of window width

20% | 50% | 15% | 15%

    <table border width=75%>
    <tr>
       <td width=20%>20%</td>
       <td width=50%>50%</td>
       <td width=15%>15%</td>
       <td width=15%>15%</td>
    </table>

#### Tables may be centered and have a caption either on the top or on the bottom.

### Figure 1

Illustration of Centered Table with a Width of 75%
20% | 50% | 15% | 15%

    <table border width=75% align=center>
    <caption align=bottom><h3>Figure 1</h3>
             Illustration of Centered Table with a Width of 75%
    </caption>
    <tr>
       <td width=20%>20%</td>
       <td width=50%>50%</td>
       <td width=15%>15%</td>
       <td width=15%>15%</td>
    </table>

#### The CellSpacing attribute controls the spacing between table cells.

CellSpacing of 0
1 | 2
3 | 4

CellSpacing of 10
1 | 2
3 | 4

       <table border
       CellSpacing=0>
       <Caption>
       CellSpacing of 0
       </caption>
       <tr><td>1</td>
           <td>2</td>
       <tr><td>3</td>
           <td>4</td>
       </table>

       <table border
       CellSpacing=10>
       <Caption>
       CellSpacing of 10
       </caption>
       <tr><td>1</td>
           <td>2</td>
       <tr><td>3</td>
           <td>4</td>
       </table>

#### The CellPadding attribute controls the padding around table cells.

CellPadding of 0
1 | 2
3 | 4

CellPadding of 10
1 | 2
3 | 4

       <table border
       CellPadding=0>
       <Caption>
       CellPadding of 0
       </caption>
       <tr><td>1</td>
           <td>2</td>
       <tr><td>3</td>
           <td>4</td>
       </table>

       <table border
       CellPadding=10>
       <Caption>
       CellPadding of 10
       </caption>
       <tr><td>1</td>
           <td>2</td>
       <tr><td>3</td>
           <td>4</td>
       </table>

Borderless tables

Borderless tables can be very useful for formatting documents. Tables are used in several places in this document to place items side by side. For instance, the Contents window above is divided into four columns using a Table.

| Watermelon with seeds

Text can be placed at the side of an image.

    <table align=center>
    <tr><td><img src="wmelon2.bmp"></td>
        <td>Watermelon<br>with seeds</td>
    </table>