|
|
|
This section describes how to create tables within your HTML documents. Tables can be used to organise data into rows and columns and also increasingly as a way of arranging text and graphics on the page. Here you'll find the basics and well as more specialized components such as captions, the column elements and how to add colour and graphics to your tables.
<TABLE>, <TR>, <TD>, <TH>, <CAPTION>, <COL>, <COLGROUP>, <SPAN>
Getting StartedEvery table is defined by <TABLE></TABLE> tags and can contain an optional caption. You will see that tables are constructed a row at a time. Table rows are defined by <TR></TR> tags. Within the table row tags you should include at least one table heading or item of table data as contained by <TH></TH> or <TD></TD> tags respectively. For example:
<TABLE> <CAPTION ALIGN="bottom">Musician Ratings</CAPTION> <TR> <TH>Cool</TH> <TH>Sad</TH> </TR> <TR> <TD>Belle & Sebastian</TD> <TD>Michael Bolton</TD> </TR> <TR> <TD>Bentley Rhythm Ace</TD> <TD>Mariah Carey</TD> </TR> </TABLE>
Musician Ratings Cool Sad Belle & Sebastian Michael Bolton Bentley Rhythm Ace Mariah Carey
There are a number of basic methods of making your table look a little better. Firstly you can add a border to every item (cell) in the table; this effectively adds a grid to the table. You can specify the position of a caption (top or bottom) and the width of the table. You can also space out the table contents, either by adding space between the cells or by creating a margin around the contents of each cell. All these effects are created by adding one or more of the following attributes to the <TABLE> tag.
BORDER=value
Including this attribute enables you draw borders around all table cells. You can specify the border thickness in pixels. If this attribute is left out, no borders will appear, however a gap will be left around the cells as if a border was present.
ALIGN=left|right
Used to display the table on the left or right side, or centre of the window. Netscape support this in Navigator 4 upwards. (See FAQs).
CELLSPACING=value
This attribute enables you to specify the amount of space, in pixels, inserted between individual cells in a table.
CELLPADDING=value
This attribute enables you to specify the amount of space, in pixels, inserted between the border of the cell and the contents of the cell.
WIDTH=value|percent
This attribute enables you to describe the desired width of the table, either in pixels or in terms of percentage of the document width.
The most compact table possible would have BORDER, CELLSPACING and CELLPADDING all set to zero. Applying the above attributes to our previous example:
<TABLE BORDER=1 WIDTH="75%" CELLPADDING=6 CELLSPACING=2 ALIGN="RIGHT"> <TR> <TH>Cool</TH> <TH>Sad</TH> </TR> <TR> <TD>Belle & Sebastian</TD> <TD>Michael Bolton</TD> </TR> <TR> <TD>Bentley Rhythm Ace</TD> <TD>Mariah Carey</TD> </TR> </TABLE>
Cool Sad Belle & Sebastian Michael Bolton Bentley Rhythm Ace Mariah Carey
The DetailsAs well as defining a global look for the table you can change the appearance of individual rows or cells. Changes you can make include horizontal and vertical alignment, cell width and height, and text wrapping. You can also add colour and graphics, but we shall look at this later.
The following attributes can be applied to an entire row by including them in the <TR> tag, or to an individual cell by including them in a <TD> or <TH> tag:
ALIGN=left|center|right
Used to justify all text in the row or cell to the left, right or center of the cell.
VALIGN=top|middle|bottom|baseline vertical align
Used to align all text in the row or cell to the top, middle or bottom of the cell, and also to specify that all cells should line up with the same baseline.
The following attributes can also be applied to any cell by including them in the <TD> or <TH> tag:
WIDTH=value|percent
This attribute enables you to describe the desired width of the data cell, either in pixels or in terms of percentage of the table width. Fixing the width of a particular cell effectively fixes the width for that column.
HEIGHT=value|percent
This attribute enables you to describe the desired height of the data cell, either in pixels or in terms of percentage of the table height. Fixing the height of a particular cell effectively fixes the height for that row.
NOWRAP
Inclusion of this attribute specifies that lines within the cell should not be broken (wrap) to fit the cell width.
<TABLE BORDER=1> <TR> <TH>Cool</TH> <TH>Sad</TH> </TR> <TR VALIGN="BOTTOM" ALIGN="CENTER"> <TD HEIGHT=35>Belle & Sebastian</TD> <TD NOWRAP>That Michael Bolton used to have such lovely hair, don't you think Gladys? Such a shame he had to cut those magnificent locks off. Of course, he's just a baldy now.</TD> </TR> <TR VALIGN="TOP"> <TD WIDTH=200 ALIGN="RIGHT">Bentley Rhythm Ace</TD> <TD HEIGHT=35>Mariah Carey</TD> </TR> </TABLE>
Cool Sad Belle & Sebastian That Michael Bolton used to have such lovely hair, don't you think Gladys? Such a shame he had to cut those magnificent locks off. Of course, he's just a baldy now. Bentley Rhythm Ace Mariah Carey
COLSPAN and ROWSPAN attributes as follows:
COLSPAN=value
Used to specify how many columns a cell should span.
ROWSPAN=value
Used to specify how many rows a cell should span.
<TABLE BORDER=1> <TR> <TH ROWSPAN=2></TH> <TH COLSPAN=2>Rating</TH> </TR> <TR> <TH>Sad</TH> <TH>Cool</TH> </TR> <TR> <TH ROWSPAN=2>Artist</TH> <TD>Belle & Sebastian</TD> <TD>Michael Bolton</TD> </TR> <TR> <TD>Bentley Rhythm Ace</TD> <TD>Mariah Carey</TD> </TR> </TABLE>
Rating Cool Sad Artist Belle & Sebastian Michael Bolton Bentley Rhythm Ace Mariah Carey
Not supported by Netscape or Microsoft Internet Explorer 2 and older. Using <COL> or <COLGROUP> tags you can now specify the text alignment for table columns. Essentially this element lets you format cells in a column, in the same manner that <TR> lets you format cells in a row. You should use <COLGROUP> to format 2 or more columns at a time and the <COL> element to format individual columns. The <COL> element should always be contained within <COLGROUP></COLGROUP> tags. The attributes are explained below:
ALIGN=center|justify|left|right
This sets the text alignment within the column.
VALIGN=baseline|bottom|middle|top
This sets the vertical text alignment within the column. Not supported by Microsoft Internet Explorer 3
SPAN=number
This sets the number of columns that the align and valign attributes act upon.
WIDTH=pixels
Specifies the width of the column in pixels.
<TABLE BORDER=1 WIDTH=80%> <COLGROUP> <COL ALIGN="left"> <COL ALIGN="right" VALIGN="bottom"> </COLGROUP> <COLGROUP SPAN=2 ALIGN="center" VALIGN="top"> </COLGROUP> <TR> <TH>Cool</TH> <TH>Groovy</TH> <TH>Unique</TH> <TH>Sad</TH> </TR> <TR> <TD HEIGHT=35>Belle & Sebastian</TD> <TD>The Wedding Present</TD> <TD>Tricky</TD> <TD>Michael Bolton</TD> </TR> <TR> <TD HEIGHT=35>Bentley Rhythm Ace</TD> <TD>Leftfield</TD> <TD>Nine Inch Nails</TD> <TD>Mariah Carey</TD> </TR> </TABLE>
| Cool | Groovy | Unique | Sad |
|---|---|---|---|
| Belle & Sebastian | The Wedding Present | Tricky | Michael Bolton |
| Bentley Rhythm Ace | Leftfield | Nine Inch Nails | Mariah Carey |
Adding Graphics and ColourThis section describes how to add colour and graphics to tables within your HTML documents.
You can now colour your tables. Coloured tables are currently only supported by MS Internet Explorer 3 and Netscape Navigator 3 upwards.
Colours can be included in tables by using adding various attributes to the <table>, <tr>, <td> and <th> elements. These attributes are bgcolour, bordercolor, bordercolorlight and bordercolordark and control the colours of the table background and table borders. Use the <font> or <body> tags to colour the text
itself. For table colouring to work the border attribute must also be present in the <table> tag. All colours must expressed in the conventional way, as either RGB hextriplets or colournames.
You can set a colour scheme for the whole table by placing the attributes in the <table> tags. You can override this colour scheme for a particular row by placing attribute(s) in the <tr> tag. These colours can be overridden further by placing more attributes in the <td> or <th> tags.
bgcolor="#hextriplet"|"colourname"
Used to specify the background colour of the cell(s).
bordercolor="#hextriplet"|"colourname"
MS Internet Explorer 3 upwards only (not supported by Netscape browsers). Used to specify border colour of the cell(s).
bordercolorlight="#hextriplet"|"colourname"
MS Internet Explorer 3 upwards only (not supported by Netscape browsers). You may have noticed that table borders are displayed in 3D. To do this they use a light and a dark colour. You can use this attribute to set the light colour used to create the 3D effect in the cell(s).
bordercolordark="#hextriplet"|"colourname"
MS Internet Explorer 3 upwards only (not supported by Netscape browsers). Used to set the dark colour that creates the 3D effect in the cell(s).
<TABLE BORDER BGCOLOR="Silver" BORDERCOLOR="Black" WIDTH=50%> <TR> <TH>Cool</TH> <TH>Sad</TH> </TR> <TR BORDERCOLOR="Red" BGCOLOR="Green"> <TD>Belle & Sebastian</TD> <TD>Michael Bolton</TD> </TR> <TR BORDERCOLOR="Red" BGCOLOR="Green"> <TD BORDERCOLOR="Yellow">Bentley Rhythm Ace</TD> <TD BGCOLOR="White">Mariah Carey</TD> </TR> <TR BORDERCOLOR="Orange" BORDERCOLORDARK="Blue" BORDERCOLORLIGHT="White"> <TD>The Wedding Present</TD> <TD>Celene Dion</TD> </TR> </TABLE>
Cool Sad Belle & Sebastian Michael Bolton Bentley Rhythm Ace Mariah Carey The Wedding Present Celene Dion
Graphics in tables are currently only supported by MS Internet Explorer 3 and Netscape Navigator 4 upwards. Adding a graphic background to a table is done through use of the background attribute of the <TABLE> and <TD> elements (exactly as for the <BODY> element). The graphic will be cropped and/or tiled to fit in the table as specified. You can also combine the afore mentioned colour attributes with a background graphic so that text will show correctly before the background is loaded.
Note that there are a few differences between how Netscape Navigator 4 and MS Internet Explorer render graphics in tables. Firstly Navigator repeats the background graphic in each cell body, whereas MSIE tiles the graphic behind the whole table, including borders. Additionally, Navigator will not give individual cells a background colour if you have specified a background image for the table.
<TABLE BACKGROUND="graphics/babies.gif" WIDTH=50% BORDER=1> <TR> <TH BGCOLOR="orange">Cool</TH> <TH BGCOLOR="orange">Sad</TH> </TR> <TR> <TD>Belle & Sebastian</TD> <TD>Michael Bolton</TD> </TR> <TR> <TD>Bentley Rhythm Ace</TD> <TD>Mariah Carey</TD> </TR> <TR> <TD>The Wedding Present</TD> <TD BACKGROUND="graphics/flower_t.jpg">Celene Dion</TD> </TR> </TABLE>
Cool Sad Belle & Sebastian Michael Bolton Bentley Rhythm Ace Mariah Carey The Wedding Present Celene Dion
Frequently Asked QuestionsHow do I center my table on the page?
The proper way to center your table is to include an ALIGN="center" attribute in the <TABLE> tag. However, currently the most widely supported way to center a table on the page is to enclose your table in <CENTER></CENTER> tags.
How do I create an empty cell?
A simple way to create an empty cell is to place a non-breaking space special character in the cell. Use the following code:
<TD> </TD>
How do I change the fonts in my table?
With all Netscape browsers up to and including version 4, and Microsoft browsers up to and including version 3, you have to change the font of each individual table cell. In other words you need to include a new pair of <FONT> tags each time you start a new <TD>.
Useful References   |
 |     |