Table Related Tags and Topics

<caption> tag, align attribute

This tag allows a caption to be displayed for the table. The two common values for the align attribute are "top" and "bottom".

<table width="100%" cellspacing="5">
    <tr><td width="50%" align="center">
       <table border="border">
          <caption align="bottom">
          Caption on Bottom</caption>
          <tr><td>Table 1</td>
          </tr></table></td>
    <td  width="50%" align="center">
       <table border="border">
          <caption align="top">
          Caption on Top</caption>
          <tr><td>Table 2</td>
          </tr></table></td></tr>
  </table>
Caption on Bottom
Table 1
Caption on Top
Table 2

<td>, <td> tags, align attribute

<table border="border">
      <tr><th align="left">Hdg Left</td>
        <th align="center">Hdg Center</td>
        <th align="right">Hdg Right</td></tr>
      <tr><td width="33%" align="left">Data Left</td>
        <td width="33%" align="center">Data Center</td>
        <td width="34%" align="right">Data Right</td></tr>
   </table>
Hdg Left Hdg Center Hdg Right
Data Left Data Center Data Right

<td>, <td> tags, valign attribute

<table width="150" border="border">
   <tr><th>This is a heading cell</td>
      <th valign="top">Hdg Top</td>
      <th valign="center">Hdg Center</td>
      <th valign="bottom">Hdg Bottom</td></tr>
   <tr><td width="100" valign="top">This is a data cell</td>
      <td valign="top">Data Top</td>
      <td valign="center">Data Center</td>
      <td valign="bottom">Data Bottom</td></tr>
</table>
This is a heading cell Hdg Top Hdg Center Hdg Bottom
This is a data cell Data Top Data Center Data Bottom

<td>, <td> tags, height, width attribute

<table border="border">
   <tr><th>&nbsp;</th>
      <th height="100">Height 100</th></tr>
   <tr><td width="250">Width 250</td>
      <td width="40%">Width 40%</td></tr>
</table>
  Height 100
Width 250 Width 40%

<td>, <td> tags, bgcolor attribute

<table border="border">
   <tr><th bgcolor="lime">Heading Lime</th></tr>
   <tr><td bgcolor="yellow">Data Yellow</td></tr>
</table>
Heading Lime
Data Yellow

<td>, <td> tags, nowrap attribute

<table width="30%" border="border"><tr>
   <td width="25%">This is wrapping text</td>
   <td width="25%" nowrap="nowrap">This is non-wrapping text</td>
</tr></table>
This is wrapping text This is non-wrapping text

<td>, <td> tags, colspan, rowspan attribute

<table border="border">
   <tr><td rowspan="2">rowspan 2</td>
      <td colspan="2">colspan 2</td></tr>
      <td> </td><td> </td></tr>
   <tr><td colspan="3">colspan 3</td></tr>
</table>
rowspan 2 colspan 2
  
colspan 3

<tr> tag, align attribute

<table width="50%" border="border">
   <tr align="left"><td>left</td><td>row 1</td></tr>
   <tr align="center"><td>center</td><td>row 2</td></tr>
   <tr align="right"><td width="50%">right</td>
      <td width="50%">row 3</td></tr>
</table>
leftrow 1
centerrow 2
right row 3

<tr> tag, valign attribute

<table border="border">
   <tr valign="top"><td height="50">top</td></tr>
   <tr valign="middle"><td height="50">middle</td></tr>
   <tr valign="bottom"><td height="50">bottom</td></tr>
</table>
top
middle
bottom

<tr> tag, bgcolor attribute

<table border="border">
   <tr bgcolor="lime"><td>lime</td>
      <td> </tr>
   <tr bgcolor="yellow"><td>yellow</td>
      <td bgcolor="silver">override</td></tr>
</table>
lime 
yellowoverride