HTML Topics: Tables

Course Material Index  Section Index  Previous Page  Next Page 

Tables

Tables are a convenient way to arrange the text and objects in the browser window. For scientific pages, they are an essential tool. Note that the original browsers (including early versions of Netscape and Internet Explorer) had little or no ability to format tables.

Consider the following HTML:

<TABLE>
<TR><TH>Eggs<BR>Box Label</TH><TH>Size 1</TH><TH>Size 2</TH><TH>Si
<TR><TH>L1</TH><TD>12</TD><TD>44</TD><TD>54</TD></TR>
<TR><TH>L2</TH><TD>65</TD><TD>98</TD><TD>12</TD></TR>
<TR><TH>L3</TH><TD>58</TD><TD>12</TD><TD>66</TD></TR>
</TABLE>

This produces the following table:

Rows within the table are specified by the use of the <TR> tag. The <TH> tag is used for headings and you can see that it produces, by default, centred bold text. Contrast this with the <TD> tag which is used for the data, and which leaves the data left-justified. Note that the table contents can be all text, text and images, or just images.

The <TABLE> tag has many attributes, e.g. for controlling the spacing of the individual cells or for setting a border. Introducing a border with <TABLE BORDER=1> gives:

Note that border is shaded, but that effect is poor against a white background (compared to, say, a grey background). A common use of the border attribute is in table construction since it outlines the position of the cells when the table is viewed by the browser.

The attributes CELLSPACING and CELLPADDING are used to specify additional space (in pixels) between cells and around the contents of data within the cells, respectively. In the absence of a border, both have a similar effect as shown below:

<TABLE BORDER=0 CELLPADDING=4> gives

<TABLE BORDER=0 CELLSPACING=8> gives

Click here for a comparison with BORDER=1.

The tags <TR>, <TH>, and <TD> all have the attribute ALIGN (where the value is one of LEFT, CENTER, or RIGHT) to define the alignment of cell contents. When used with <TR>, it sets the default method for alignment of the cell contents within the row, in contrast to its use with <TH> and <TD>, where it applies only to individual headings or data, respectively.

Use the "View Source Document" option on your browser to look at the raw HTML for this page in order to see how the following effects are achieved:

The table makes use of some useful qualifiers (COLSPAN equal to an integer value and ROWSPAN equal to an integer value) to the table item tag. This allows columns and rows to be stretched across more than 1 column or row, respectively.

Course Material Index  Section Index  Previous Page  Next Page