HTML Nested Tables
<HTML> <HEAD> <BODY> <table border="1" cellspacing="1" width="40%"><tr> <td width="34%">Headers</td> <td width="33%">Column A</td> <td width="33%"> <table border="1" cellspacing="1" width="100%"> <tr> <td width="50%">1-1</td> <td width="50%">1-2</td> </tr> <tr> <td width="50%">1-3</td> <td width="50%">1-4</td> </tr> </table> </td> </tr> <tr> <td width="34%">Row 1</td> <td width="33%">A 1</td> <td width="33%">B 1</td> </tr> <tr> <td width="34%">Row 2</td> <td width="33%">A 2</td> <td width="33%">B 2</td> </tr> </table> </BODY> </HTML> |
The above code will produce the following table on your page:
| Headers | Column A | Column B | ||||
| Row 1 | A 1 |
|
||||
| Row 2 | A 2 | B 2 |
<table border="1" cellspacing="1" width="40%"> table info </table>
border = "#", is measured in pixels. If you use 0 for your border, it will not show any borders at all
cellspacing = "#", is also measured in pixels. This number sets the number of pixels between the border and the data contained within each cell.
width = "%", is a percentage of the browser window you want the table to use. You can specify exactly how large you want your table to be in pixels
You can also specify CELLPADDING and BGCOLOR in the <table> tag.
<tr> row info goes here </tr>
This tag begins and ends each row of information in your table. You can also specify ALIGN (left, right, center), VALIGN (top, bottom, middle), and BGCOLOR for each row.
<td
width="34%">Headers</td>
<td width="33%">Column A</td>
<td width="33%">Column B</td>
The <td> and </td> tags create the individual cells (columns) in the row and are located between the <tr> and </tr> tags. For each cell, you need to specify a width (which can be either a percentage or in pixels - percentage is recommended). Between the tags, you would include the data you want to have appear in that cell.
In addition to the width of each cell, you can also specify CELLPADDING, CELLSPACING, ALIGN (left, right, center), VALIGN (top, bottom, middle), ROWSPAN, and COLSPAN
To your table: <table border="1" cellspacing="1" width="40%" bordercolor="#00FF00" bgcolor="#00FF00">
For tables, you can specify both the color of the border as well as the color of the table itself.
To an individual cell: <td width="33%" bgcolor="#00ff00">
COMMENTS (in other words, documentation) for your HTML. Use:
<COMMENT><!-- put your remarks here --></COMMENT>
Start NOW to document your pages so that when you go back to them, those tricky items like tables within tables within tables won't come back to haunt you! Anything between <COMMENT> AND </COMMENT> will not show up on your page. You will only see it if you view the source for the page.
[CF] [CBA2] [PBA] [CPB] [Return to HTML Index] [SEND E-MAIL] [RETURN TO MS GUNN'S SCHOOL PAGE]
Designed, programmed, edited and copyrighted by Ms Gunn � 1998