HTML TABLES



In this tutorial you should learn:

  1. How to create a simple table.
  2. How to control table parameters.
  3. Spanning a cell across two or more rows or/and columns.
  4. How to create nested tables.
  5. How to use tables to lay out text and images.

Creating a simple table putting header cells on top and/or left

 Top Header 1Top Header 2
Left HeaderData Cell1Data Cell2

<table> <tr><th>&nbsp</th><th>Top Header 1</th><th>Top Header 2</th></tr> <tr><th>Left Header</th><td>Data Cell1</td><td>Data Cell2</td></tr> </table>

Add a caption to a table

<caption align = [left, right, bottom]> - </caption>

This is a bottom caption
 Top Header 1Top Header 2
Left HeaderData Cell1Data Cell2

<table> <caption align="bottom"><i>This is a bottom caption</i></caption> <tr><th>&nbsp</th><th>Top Header 1</th><th>Top Header 2</th></tr> <tr><th>Left Header</th><td>Data Cell1</td><td>Data Cell2</td></tr> </table>

Controlling table's parameters

Controlling table border: width and color

 Top Header 1Top Header 2
Left HeaderData Cell1Data Cell2

<table border="3" bordercolor="darkgreen"> <tr><th>&nbsp</th><th>Top Header 1</th><th>Top Header 2</th></tr> <tr><th>Left Header</th><td>Data Cell1</td><td>Data Cell2</td></tr> </table>

 Top Header 1Top Header 2
Left HeaderData Cell1Data Cell2

<table border="10" bordercolorlight="#dddddd" bordercolordark="#bbbbbb"> <tr><th>&nbsp</th><th>Top Header 1</th><th>Top Header 2</th></tr> <tr><th>Left Header</th><td>Data Cell1</td><td>Data Cell2</td></tr> </table>

Controlling parameters of tables and cells.

cellspacing="15" and cellpadding="0"
Cell 1,1Cell 2,1
Cell 1,2Cell 2,2
cellspacing="0" and cellpadding="15"
Cell 1,1Cell 2,1
Cell 1,2Cell 2,2
cellspacing="7" and cellpadding="7"
Cell 1,1Cell 2,1
Cell 1,2Cell 2,2


<table align="left" border="1" bordercolor="#990000" cellspacing="15" cellpadding="0" bgcolor="#ffcc99"> <caption>cellspacing="15" and cellpadding="0"</caption> <tr><td>Cell 1,1</td><td>Cell 2,1</td></tr> <tr><td>Cell 1,2</td><td style="background:#99ccff">Cell 2,2</td></tr> </table> <table align="left" border="1" bordercolor="#990000" cellspacing="0" cellpadding="15" background="../../images/sky0bg.gif"> <caption>cellspacing="0" and cellpadding="15"</caption> <tr><td>Cell 1,1</td><td>Cell 2,1</td></tr> <tr><td>Cell 1,2</td> <td style="background:URL(../../images/earth.gif)">Cell 2,2</td></tr> </table> <table align="left" border="1" bordercolor="#990000" cellspacing="7" cellpadding="7" background="../../images/sky0bg.gif"> <caption>cellspacing="7" and cellpadding="7"</caption> <tr><td>Cell 1,1</td><td>Cell 2,1</td></tr> <tr><td>Cell 1,2</td> <td background="../../images/earth.gif">Cell 2,2</td></tr> </table>

Spanning a cell across two or more rows or/and columns

Table caption: colspan and rowspan examples
This cell spans four columns
This cell spans
three rows
This cell spans two columns and two rows Col 4, Row 2
Col 4, Row 3
Col 2, Row 4 Col 3, Row 4 Col 4, Row 4

<table border="1" bordercolor="#990000" bgcolor="#dddddd"> <caption align="left">Table caption: colspan and rowspan examples</caption> <tr><td colspan="4">This cell spans four columns</td></tr> <tr> <td rowspan="3">This cell spans<br> three rows</td> <td colspan="2" rowspan="2">This cell spans two columns and two rows</td> <td>Col 4, Row 2</td> </tr> <tr><td>Col 4, Row 3</td></tr> <tr> <td>Col 2, Row 4</td> <td>Col 3, Row 4</td> <td>Col 4, Row 4</td> </tr> </table>

Nesting tables, or embedding a table in another table.


Three tables nested in another table.
cellspacing="15" and cellpadding="0"
Cell 1,1Cell 2,1
Cell 1,2Cell 2,2
cellspacing="0" and cellpadding="15"
Cell 1,1Cell 2,1
Cell 1,2 Cell 2,2
cellspacing="7" and cellpadding="7"
Cell 1,1Cell 2,1
Cell 1,2 Cell 2,2
<table border="1" bordercolor="#009900"> <caption>Three tables nested in another table.</caption> <tr> <td> <table align="left" border="1" bordercolor="#990000" cellspacing="15" cellpadding="0" bgcolor="#ffcc99"> <caption>cellspacing="15" and cellpadding="0"</caption> <tr><td>Cell 1,1</td><td>Cell 2,1</td></tr> <tr><td>Cell 1,2</td><td style="background:#99ccff">Cell 2,2</td></tr> </table> </td> <td> <table align="left" border="1" bordercolor="#990000" cellspacing="0" cellpadding="15" background="../../images/sky0bg.gif"> <caption>cellspacing="0" and cellpadding="15"</caption> <tr><td>Cell 1,1</td><td>Cell 2,1</td></tr> <tr><td>Cell 1,2</td> <td style="background:URL(../../images/earth.gif)">Cell 2,2</td></tr> </table> </td> <td> <table align="left" border="1" bordercolor="#990000" cellspacing="7" cellpadding="7" background="../../images/sky0bg.gif"> <caption>cellspacing="7" and cellpadding="7"</caption> <tr><td>Cell 1,1</td><td>Cell 2,1</td></tr> <tr><td>Cell 1,2</td> <td background="../../images/earth.gif">Cell 2,2</td></tr> </table> </td> </tr> </table>

Using tables to control page layout.


Using Tables To Lay Out Text And Images
This an example of using tables to lay out text and images. You can also control background color and background images of the cells with text. This is another piece of text. It is placed on the other side of the image.
<table align="center" width="500" height="100"> <caption align="bottom">Caption: Using Tables To Lay Out Text And Images</caption> <tr> <td width="40%" style="background:URL(../../images/sky0bg.gif)"> This an example of using tables to lay out text and images. You can also control background color and images of the cells with text. </td> <td><img src="../../images/flame.gif" height=100></td> <td width="40%" style="background-color:#eecc99"> This is another piece of text. It is placed on the other side of the image. </td> </tr> </table>

Using tables to control page size.

Example of a redpage.htm