<table border="1">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
1 |
2 |
3 |
Cells expand
to fit |
<table border="1">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>Cells expand<br>
to fit</td>
</tr>
</table>
1 |
2 |
3 |
4 |
Rowspan and Colspan attributes allow cells to occupy more than one row or column
|
5 |
<table border="1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<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>
<tr>
<td>5</td>
</tr>
</table>
|
Days of Week |
Monday |
Tuesday |
Wednesday |
Week 1 |
1 |
2 |
3 |
Week 2 |
4 |
5 |
6 |
<table border="1">
<tr>
<td rowspan="2"></td>
<th colspan="3">Days of Week</th>
</tr>
<tr>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
</tr>
<tr>
<th>Week 1</th>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<th>Week 2</th>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
|
|
Days of Week |
Monday |
Tuesday |
Wednesday |
Week 1 |
1 |
2 |
3 |
Week 2 |
4 |
5 |
6 |
<table border="1" style="empty-cells=hide">
<tr>
<td rowspan="2"></td>
<th colspan="3">Days of Week</th>
</tr>
<tr>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
</tr>
<tr>
<th>Week 1</th>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<th>Week 2</th>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
|
|
Alignment Attributes, Align and VAlign |
Vertical
Alignment |
Top |
Middle |
Bottom |
Horizontal
Alignment |
Left |
Center |
Right |
<table border="1">
<tr>
<td></td>
<th colspan=3>Alignment Attributes, Align and VAlign</th>
</tr>
<tr>
<th>Vertical<br>Alignment</th>
<td valign=top>Top</td>
<td valign=middle>Middle</td>
<td valign=bottom>Bottom</td>
</tr>
<tr>
<th>Horizontal<br>Alignment</th>
<td align=left>Left</td>
<td align=center>Center</td>
<td align=right>Right</td>
</tr>
</table>
<table border="1">
<tr align=center>
<td><img src="glass.bmp"><br>
Images</td>
<td bgcolor="#ffcdcd">
<a href="#TableContents">Table Contents</a><br>
Hotspots</td>
</tr>
<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>
<tr>
<td>4</td>
<td>5</td>
</tr>
</table>
</td>
</tr>
</table>
<table border="1" width="75%">
<tr>
<td width=20%>20%</td>
<td width=50%>50%</td>
<td width=15%>15%</td>
<td width=15%>15%</td>
</tr>
</table>
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>
</tr>
</table>
CellSpacing of 0
|
CellSpacing of 10
|
border-spacing of 10 and 5
|
<table border="1" CellSpacing=0>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
|
<table border="1" CellSpacing=10>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
|
<table border="1" style="border-spacing:10 5">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
|
|
CellPadding of 10
1 |
2 |
3 |
4 |
|
<table border CellPadding=0>
<Caption>CellPadding of 0</caption>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
|
<table border CellPadding=10>
<Caption>CellPadding of 10</caption>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</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>
</tr>
</table>