RichInStyle.com HTML 4 guide - Tables

Contents

Tables

An essential part of any publishing method is the use of tables. It is no surprise therefore that HTML should be rich in methods to allow them to be described.

<TABLE>

This indicates the start of a TABLE:

<TABLE>
</TABLE>

<TR>

This indicates a table row.

Note that you may omit the end tags from <TR> elements - their end tags are implied by a <TR> or </TABLE>.

<TD>

This indicates a table cell, which must occur inside a table row.

<TABLE>
  <TR>
    <TD>
      A table cell
    </TD>
    <TD>
      A table cell
    </TD>
  </TR> 
  <TR>
    <TD>
      A table cell in a different row
    </TD>
    <TD>
      A table cell in a different row
    </TD>
  </TR>
</TABLE>

Note that you may omit the end tags from <TD> elements - their end tags are implied by a <TR>, <TH>, </TABLE> or <TD> tag.

<TH>

This is exactly the same as TD, except it is a Table Header cell, and is typically rendered in bold and centered:

<TABLE>
  <TR>
    <TH>
      A table cell
    </TH>
    <TH>
      A table cell
    </TH>
  </TR> 
  <TR>
    <TD>
      A table cell in a different row
    </TD>
    <TD>
      A table cell in a different row
    </TD>
  </TR>
</TABLE>

Note that you may omit the end tags from <TH> elements - their end tags are implied by a <TR>, <TH>, </TABLE> or <TD> tag.

<CAPTION>

This gives a TABLE a caption, typically centered.Tables may contain only one caption, and if used it must be the first element following the TABLE element:

<TABLE>
  <CAPTION align="right">
    A caption
  </CAPTION>
  ...
</TABLE>

Conclusion

That is all you need to create tables. However, there are some more advanced topics.

Borders

In order to specify the borders around tables, HTML provides a number of attributes.

Principal among these is the border attribute. The border attribute specifies the thickness of borders around tables and table cells. For example, <TABLE border="2"> specifies that the table should have a 2-pixel border.

If you do not specify a number, as in <TABLE border>, then 2 pixels is assumed.

If you do not specify the border attribute at all, no border will result.

Cell padding and spacing

The two attributes provided for cell padding and spacing are the cellpadding and cellspacing attributes. Cellpadding specifies the space inside the cells and cellspacing the space between them.

The difference between the two is that cellpadding is always colored by the background of the cell whereas cellspacing is colored by the background of the table.

Width and height of tables

Normally, the width of tables and table cells is provided by the width of their content. However, sometimes you might want to give an explicit width or height. This is done with the height and width attributes. These attributes specify the minimum width or height of the table row, cell or table on which they were specified.

You can specify the lengths as a percentage or as a number of pixels on width, or as a number of pixels on height.

I recommend that you avoid pixels however, since you have no way of knowing the width of the window on the computer that looks at your pages.

As an illustration of what tables can do,

bgcolor

This specifies the table's background color. E.g., <TABLE bgcolor="red">. If unspecified, it has the same background color as the BODY. You should avoid using this attribute in favor of style sheets. E.g., <TABLE class="mytable"> TABLE.mytable {background: red}.

Valign

This can be specified as top (data flush with top of cell), middle (default), bottom or baseline (align all cells in the row with valign: baseline to the same point).

That's the end of this part of the HTML guide. The next section considers objects, so I suggest you click here to continue.

Copyright © RichInStyle.com 2000; all rights reserved. See copyright document for terms of use. Please visit Bukit Lawang flood appeal.