Table
Tutorial

Table of Contents

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>
Contents

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>
Contents

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>
Contents

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>
Contents

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>
Contents

Table cells can contain just about anything


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

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>
Contents

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>
Contents

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>
Contents

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>
Contents

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 Table of Contents is divided into two 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>
Contents