Advanced HTML: Tables

The best way of seeing how tables work is to start with an example:

HTML Displayed 
  <table border>
    <tr>
      <td>Tables</td>
      <td>divide things</td>
    </tr>
    <tr>
      <td>into little</td>
      <td>compartments.</td>
    </tr>
  </table>
Tables divide things
into little compartments.
Note that the indenting and white space here is arbitrary; I put it in to make it easy to follow the HTML. The closing </td> and </tr> tags are optional, but nested tables (tables within other tables) might not work well if they are omitted.

Among the most useful attributes of tables and the table row (<tr>) and table data (<td>) elements are sizes, alignment, colors, colspan and rowspan, shown in the following:

HTML Displayed 
  <table width="80%"
   bgcolor=aqua>
    <tr>
      <td width="50%">data1</td>
      <td width="15%">data2</td>
      <td width="15%"
        bgcolor=yellow>data3</td>
    </tr>
    <tr>
      <td valign=top
        rowspan=2>data4</td>
      <td colspan=2>data5</td>
    </tr>
      <td colspan=2
        align=right>data6</td>
    </tr>
  </table>
data1 data2 data3
data4 data5
data6
Things to Note:
  1. the border attribute specifies that the table should have a displayed border; saying border=5 would make the border 5 pixels wide
  2. width may be given in percent (of the window, or of the area available for the table) or in pixels: Example: width="50%" or width=100
  3. bgcolor may be specified for tables (table), table rows (tr) and table data elements (td)
  4. a background image may be specified instead of a color by using the background="image" attribute instead of bgcolor
  5. data elements are omitted in rows which are to be overlapped by elements spanning more than one column (with a colspan attribute) or row (with a rowspan attribute)
  6. valign can be one of top, middle, or bottom
  7. align can be one of left, right, or center
  8. the table data element td also accepts the nowrap attribute (<td nowrap>), which indicates that no line wrapping should be done in the cell---instead, they are specified explicitly with <br> tag.
For a complete list of attributes for the table, tr and td tags, see the list of table attributes. Tables are used extensively to format this page; use View -> Source to see how!

[advhtml] [colors] [reuse] [valid] [images] [objects] [imaps] [tables] [frames] [forms]
[title] [objectives] [www uses] [the works] [basic html]
[adv html] [editors] [resources]   [feedback]

Last modified: Tue Jul 8 13:53:14 CDT 1997
HTML/WWW Wkshop: Adv HTML-Tables
©1997 Gavin LaRose
Comments to: glarose@NebrWesleyan.edu