Advanced Tables

Bridging Multiple Rows: rowspan


Chocolate White Milk Bittersweet
French American Swiss


<table border="1">

<tr> <td rowspan="2" >Chocolate</td> <td>White</td> <td>Milk</td> <td>Bittersweet</td> </tr>

<tr> <td>French</td> <td>American</td> <td>Swiss</td> </tr>

</table>

Aligning Cell Data Vertically: valign="top|middle|bottom"


Chocolate White Milk Bittersweet
French American Swiss


<table border="1">

<tr> <td rowspan = "2" valign = "top">Chocolate</td> <td>White</td><td>Milk</td><td>Bittersweet</td> </tr>

<tr> <td>French</td> <td>American</td> <td>Swiss</td> </tr>

</table>

Bridging Multiple Columns: colspan


Chocolate
White Milk Bittersweet
French American Swiss


<table border="1">

<tr> <td colspan = "3">Chocolate</td> </tr>

<tr> <td>White</td> <td>Milk</td> <td>Bittersweet</td> </tr>

<tr> <td>French</td> <td>American</td> <td>Swiss</td> </tr>

</table>

Aligning Cell Data Horizontally: "align=left|center|right"


Chocolate
White Milk Bittersweet
French American Swiss


<table border="1">

<tr> <td colspan = "3" align = "center">Chocolate</td> </tr>

<tr> <td align = "center">White</td> <td align = "center">Milk</td> <td align = "center">Bittersweet</td> </tr>

<tr> <td align = "center">French</td> <td align = "center">American</td> <td align = "center">Swiss</td> </tr>

</table>

Using Table Headers with colspan:


Chocolate
White Milk Bittersweet
French American Swiss


<table border="1">

<tr> <th colspan = "3" >Chocolate</th> </tr>

<tr> <td align = "center">White</td> <td align = "center">Milk</td> <td align = "center">Bittersweet</td> </tr>

<tr> <td align = "center">French</td> <td align = "center">American</td> <td align = "center">Swiss</td> </tr>

</table>

Centering the Table. Changing border width, table width, cellpadding, cellspacing, and font size:


Chocolate
White Milk Bittersweet
French American Swiss


<center>
<table border = "10" width = "50%" cellpadding = "10" cellspacing = "10">

<tr> <th colspan = "3"> <font size = "+2">Chocolate</font></th> </tr>

<tr> <td align = "center">White</td> <td align = "center">Milk</td> <td align = "center">Bittersweet</td> </tr>

<tr> <td align = "center">French</td> <td align = "center">American</td> <td align = "center">Swiss</td> </tr>

</table>
</center>

Nesting Tables:


Chocolate
White Milk Bittersweet
French American
SwissDutch


<center>
<table border = "10" width = "50%" cellpadding = "10" cellspacing = "10">

<tr> <th colspan = "3"> <font size = "+2">Chocolate</font></th> </tr>

<tr> <td align = "center">White</td> <td align = "center">Milk</td> <td align = "center">Bittersweet</td> </tr>

<tr> <td align = "center">French</td> <td align = "center">American</td>

<td align = "center">

<table border width="100%"> <tr><td>Swiss</td><td>Dutch</td> </tr> </table>

</td> </tr>

</table>
</center>

Table Background Color and Font Color:


Chocolate
White Milk Bittersweet
French American
SwissDutch


<center>
<table border width = "50%" cellpadding = "10" cellspacing = "10" bgcolor = "#FC96A9">

<tr> <th colspan = "3"><font size = "+2" color= "#990000">Chocolate</font></th> </tr>

<tr> <td align = "center">White</td> <td align = "center">Milk</td> <td align = "center">Bittersweet</td> </tr>

<tr> <td align = "center">French</td> <td align = "center">American</td>

<td align = "center">

<table border width = "100%" bgcolor="#124578">

<tr>
<td>< font color="#FFFFFF">Swiss</font></td>
<td>< font color="#FFFFFF">Dutch</font></td>
</tr>

</table>

</td> </tr>

</table>
</center>

Table Background Color, Font Color and Border Color:


Chocolate
White Milk Bittersweet
French American
SwissDutch


<center>
<table border="5" bordercolor="#8b3a3a" width = "50%" cellpadding = "10" cellspacing = "10"bgcolor = "#FC96A9">

<tr> <th colspan = "3"><font size = "+2" color= "#990000">Chocolate</font></th> </tr>

<tr> <td align = "center">White</td> <td align = "center">Milk</td> <td align = "center">Bittersweet</td> </tr>

<tr> <td align = "center">French</td> <td align = "center">American</td>

<td align = "center">

<table border="2" bordercolor="#ff83fa" width = "100%" bgcolor="#124578">

<tr>
<td>< font color="#FFFFFF">Swiss</font></td>
<td>< font color="#FFFFFF">Dutch</font></td>
</tr>

</table>

</td> </tr>

</table>
</center>

REFERENCE FOR TABLE TAGGING: Kevin Werbach's Bare Bones Guide

ADDITIONAL TABLE HELP: Webmonkey Table Authoring Site


COLORING TABLE BACKGROUNDS AND TEXT:

To color the whole table background:
Background Colors for Tables: <table bgcolor = "#RRGGBB">
To color specific text:
Text Font Color <font color= "#RRGGBB"></font>

To find the code to substitute for RRGGBB in the examples above to create the color you want, use this online color selector.

For more help on backgrounds and colors, see Setting Background and Text Colors

Return to the HTML III class page.

Return to Olin/Uris home page

Last updated 12 October 2007 (MOE)
Olin and Uris Reference
Tony Cosgrave and Michael Engle
URL: http://www.library.cornell.edu/okuref/ws/html/advtables.html