Advanced Table Topics

Nested tables

The browser treats each table cell like a little browser window that can contain all kinds of information. Table cells can even contain other tables.

<table border="border" bgcolor="lime" align="center">
    <tr align="center">
       <td><table border="border" bgcolor="yellow">
          <tr><td>1</td>
          <td>2</td></tr>
          <tr><td>3</td>
          <td>4</td></tr>
       </table></td>
       <td>B</td></tr>
    <tr align="center"><td>C</td>
       <td>D</td></tr>
</table>
12
34
 B
CD

Images in Table Cells

Images can also be placed in table cells.

<table border="border" align="center">
   <tr><td><img src="kitty0.jpg"></td>
      <td><img src="clyde0.jpg"></td></tr>
</table>

thead, tbody, tfoot tags

The rules attribute can be combined with these new tags to create more versatile tables. These new tags should also be able to create much better output of tables, but that seems more theory than practice at the moment. This example should be viewed with Internet Explorer.

<table width="50%" rules="groups" border="border">
   <thead align="center">
      <tr><td>Table Header</td></tr>
      <tr><td>Header Line 2</td></tr>
   </thead>
   <tbody>
      <tr><td>Filler</td></tr>
      <tr><td>Filler</td></tr>
      <tr><td>Filler</td></tr>
   </tbody>
   <tfoot align="right">
      <tr><td>Table Footer</td></tr>
      <tr><td>Footer Line 2</td></tr>
   </tfoot>
</table>
Table Header
Header Line 2
Filler
Filler
Filler
Table Footer
Footer Line 2

<colgroup> tag

The colgroup tag is used to format columns of a table. The formatting attributes are align, valign, and width. The span attribute lets you apply those changes to multiple columns at once. This example should be viewed with Internet Explorer.

<table width="100%" border="border">
   <colgroup span="2" width="25%" align="right" />
   <colgroup span="2" width="25%" align="center" />
   <tr><td>This</td><td>is</td>
   <td>a</td><td>test</td></tr>
   <tr><td>This</td><td>is</td>
   <td>line</td><td>two</td></tr>
</table>
Thisisatest
Thisislinetwo

<col> tag

The col tag is used to format columns within a column group. The formatting attributes are align, valign, and width. The span attribute lets you apply those changes to multiple columns at once. This example should be viewed with Internet Explorer.

<table width="100%" border="border">
   <colgroup>
      <col span="2" width="25%" align="right" />
      <col span="2" width="25%" align="center" />
   </colgroup>
   <tr><td>This</td><td>is</td>
   <td>a</td><td>test</td></tr>
   <tr><td>This</td><td>is</td>
   <td>line</td><td>two</td></tr>
</table>
Thisisatest
Thisislinetwo