|
This is the most elementary example of a table:
<TABLE SUMMARY="an overview of what is here" BORDER=4 CELLPADDING=5 CELLSPACING=5 WIDTH=200>
<TR>
<TD>Here is Cell 1</TD>
<TD>Here is Cell 2</TD>
</TR>
<TR>
<TD>Cell 3</TD>
<TD>And there is the final cell, number 4</TD>
</TR>
</TABLE>
| Here is Cell 1 | Here is Cell 2 |
| Cell 3 | And there is the final cell, number 4 |
<TABLE> and </TABLE> indicate that the data in between them forms a table. The attributes WIDTH, CELLPADDING, CELLSPACING and BORDER are explained below.
The SUMMARY attribute is used to give an overview of the table's purpose and contents for use by braille or speech synthesizers.
<TR> and </TR> enclose the data for one row in a table. The total number of rows is defined by the number of <TR> tags you use. <TD> and </TD> enclose the data for one cell. The total number of cells in a row defines the number of columns in the table. In principle you can omit the closing tags for rows and cells as they are implied by other tags.
In this example there is only plain text in each cell. You can also put in images or links, or any combination of those.
Most browsers will automatically adept the size of the table and the width of the columns to the contents of each cell, as in this example. If you define different number of columns in different rows, the browser will try to make sense out of it but the result may not be very nice.
A table can be centered by adding the ALIGN="center" attribute to the TABLE tag.
<TABLE WIDTH=100 BORDER=2 ALIGN=center>
<TR><TD>Stick to the right</TD></TR>
</TABLE>
| In The Middle |
A table can be aligned left or right. Any surrounding text will flow around the table if it is aligned like this.
<TABLE WIDTH=100 BORDER=2 ALIGN=right>
<TR><TD>Stick to the right</TD></TR>
</TABLE>
| Stick to the right |
As you can see, the text of this paragraph is put right next to the table. If you want the continue text below the table, use the <BR CLEAR=right> which will force the browser to put anything that follows after the table.
The WIDTH attribute can be used in the <TABLE> or <TD> tag. Its value can be a percentage or an absolute value in pixels (points in the window). Using a percentage for width attribute in the TD tag is not compliant with HTML 3.2 but widely supported by browsers. Here are three examples of use in the <TABLE> tag:
<TABLE WIDTH=100% BORDER=2 ALIGN=center>
<TR><TD>One cell only</TD></TR>
</TABLE>
| One cell only |
<TABLE WIDTH=50% BORDER=2 ALIGN=center>
<TR><TD>One cell only</TD></TR>
</TABLE>
| One cell only |
<TABLE BORDER=2 ALIGN=center>
<TR><TD>One cell only</TD></TR>
</TABLE>
| One cell only |
In the first example the table will span the whole window, in the second one half of it and in the final example the width of the table will be set to match its contents.
The second way in to use the WIDTH attribute is in the <TD> tag. Again, look at these two examples:
<TABLE BORDER=2 ALIGN=center>
<TR><TD>Cell 1</TD>
<TD>And here is Cell 2</TD>
</TR></TABLE>
| Cell 1 | And here is Cell 2 |
<TABLE BORDER=2 ALIGN=center>
<TR><TD WIDTH=50%>Cell 1</TD>
<TD WIDTH=50%>And here is Cell 2</TD>
</TR></TABLE>
| Cell 1 | And here is Cell 2 |
In the first example, the width of each cell is adapted to its contents. In the second example, the width of each cell is 50% of the width of the total table. If you have set the width of the table to any value, this will result in two columns each half of that. Otherwise, a browser will calculate the necessary width of the table and make sure the columns are equal. Note that the use of a percentage in the WIDTH attribute of a TD tag is not according to HTML 3.2. There are also problems with different browsers displaying this in different ways.
The HEIGHT attribute allows setting the height of an individual cell excluding the cellpadding (see below). The value you specify will normally be used, unless it conflicts with requirements of other cells.
<TABLE BORDER=2 ALIGN=center>
<TR><TD HEIGHT=30>Cell 1</TD>
<TD>And here is Cell 2</TD>
</TR></TABLE>
| Cell 1 | And here is Cell 2 |
Make sure the cells of one row do not have conflicting height attributes, and the contents of the cells do not conflict with that attribute.
The CELLPADDING attribute sets how much space is put around the contents of a cell. For example:
<TABLE BORDER=2 CELLPADDING=2 ALIGN=center>
<TR><TD>Padding is 2</TD></TR>
</TABLE>
| Padding is 2 |
<TABLE BORDER=2 CELLPADDING=20 ALIGN=center>
<TR><TD>Padding is 20</TD></TR>
</TABLE>
| Padding is 20 |
As you can see, the CELLPADDING atrribute controls the space put between the contents of a cell and its borders. The default for the padding is zero. Unless you give it an higher value, the borders of the cells will be drawn directly around the contents.
The CELLSPACING attribute sets how much space is put between the cells. These two examples should be fairly self-explanatory:
<TABLE BORDER=2 CELLSPACING=20 ALIGN=center>
<TR><TD>One cell</TD>
<TD>Another cell</TD></TR>
</TABLE>
| One cell | Another cell |
<TABLE BORDER=2 CELLSPACING=2 ALIGN=center>
<TR><TD>One cell</TD>
<TD>Another cell</TD></TR>
</TABLE>
| One cell | Another cell |
The ALIGN and VALIGN can be used in a <TR>, <TH> or <TD> tag. This depends if you want to define the alignments per cell or per row. ALIGN controls the horizontal alignment. Possible values are "left", "center" or "right". VALIGN controls vertical alignment. Possible values are "top", "middle" or "bottom". Here is an example of the use of VALIGN:
<TABLE BORDER=1 ALIGN=center>
<TR>
<TD>One<BR>Two<BR>Three</TD>
<TD VALIGN=top>One</TD>
<TD>Two</TD>
<TD VALIGN=bottom>Three</TD>
</TR>
</TABLE>
|
One Two Three |
One | Two | Three |
The defaults are "left" for ALIGN and "middle" for VALIGN. Normally, you would not use these values with one exception. If you set either to for a whole row, by including this attribute in the <TR> tag, you can overrule it for one cell by using the same attribute in a <TD> tag. In the following example VALIGN is set to "top" for the whole row, with the third cell as an exception:
<TABLE BORDER=10 ALIGN=center>
<TR VALIGN=top>
<TD>One<BR>Two<BR>Three<BR>Four</TD>
<TD>One</TD>
<TD>Two</TD>
<TD VALIGN=middle>Three</TD>
<TD>Four</TD>
</TR>
</TABLE>
| One Two Three Four |
One | Two | Three | Four |
The align attribute can be used in a very similar manner:
<TABLE WIDTH=80% BORDER=5 ALIGN=center>
<TR>
<TD ALIGN=right WIDTH=150>Right</TD>
<TD WIDTH=150>Default is left</TD>
<TD WIDTH=150 ALIGN=center>Center</TD>
</TR>
</TABLE>
| Right | Default is left | Center |
In the various examples above, I have used different values for the BORDER attribute and you can see the different effects it has. The BORDER attribute sets the size of the lines around the table. The default of the attribute is zero. If you don't give it a value, the table will have no border.
The COLSPAN attribute tells Netscape that a cell should span more than one column. The ROWSPAN attribute does the same for rows. For example:
<TABLE BORDER=2 ALIGN=center>
<TR ALIGN=center>
<TD>One</TD>
<TD>One</TD>
<TD>One</TD>
<TD ROWSPAN=2>Two rows</TD>
</TR>
<TR ALIGN=center>
<TD COLSPAN=2>Two columns</TD>
<TD>One</TD>
</TR>
</TABLE>
| One | One | One | Two rows |
| Two columns | One | ||
As you can see, the fourth cell of the first row spans two rows and the first cell of the second row spans two columns. You have to make sure the number of cells, rows and columns fit together or you will get very chaotic results.
The <TH> and </TH> (table header) tags are mostly identical to the <TD> tag, except that they will display the contents of the cell in bold and the default horizontal alignment is centered rather than left. For example:
<TABLE BORDER=3 ALIGN=center>
<TR><TH>Name</TH><TH>E-mail</TH></TR>
<TR><TD>Jan Weijers</TD><TD>jan@weijers.net</TD></TR>
</TABLE>
| Name | |
|---|---|
| Jan Weijers | jan@weijers.net |
The other difference is that for the <TH> tag the default for ALIGN is "center". You can use the ALIGN and VALIGN attributes in a <TH> tag.
A caption tag can be used to put an explanation below or above a table:
<TABLE BORDER=3 ALIGN=center>
<CAPTION ALIGN=bottom>List of e-mail addresses</CAPTION>
<TR><TH>Name</TH><TH>E-mail</TH></TR>
<TR><TD>Jan Weijers</TD><TD>jan@weijers.net</FONT></TD></TR>
</TABLE>
| Name | |
|---|---|
| Jan Weijers | jan@weijers.net |
The attribute ALIGN="bottom" puts the caption under the table. The other possibility is ALIGN="top" which puts the caption above the table. The default is "top" so if you do not specify an ALIGN attribute, the caption will go above the table.
It is possible to give each cell in a table its own background colour:
<TABLE BORDER=2 CELLPADDING=5 CELLSPACING=2 ALIGN=center>
<TR ALIGN=center VALIGN=middle>
<TD BGCOLOR=yellow>Yellow Background</TD>
<TD BGCOLOR=blue>Blue Background</TD>
<TD BGCOLOR=maroon>Maroon Background</TD>
</TR>
</TABLE>
| Yellow Background | Blue Background | Maroon Background |
Some browsers do not automatically adjust the colour of the text to the background to keep things readable. Therefore it is advisable to set a text colour by using the <FONT COLOR=...> tags.
There is a way to set the colours for the borders of the table that only works in Explorer and is not part of HTML 3.2 or HTML 4.
<TABLE BORDER=5 BORDERCOLORDARK=maroon BORDERCOLORLIGHT=yellow CELLPADDING=10 CELLSPACING=3 ALIGN=center>
<TR><TD>Colouring the borders...</TD></TR>
</TABLE>
Since HTML 4, you are supposed to use Style Sheets to set the colours for cells, borders and text of tables.
By default text in a cell is wrapped to fit the table within the margins of the screen (or the window, to be precise) and to fit the cells within the table:
<TABLE BORDER=2>
<TR>
<TD>Semper</TD>
<TD>Semper ... deicerentur.</TD>
</TR>
</TABLE>
| Semper | Semper ubi sub ubi. Quone modo nunc, fulve bos? Si hoc non legere potes, tu asinus es. Tua mater tam antiqua ut linguam latinam loquatur. Itaque cum adpropinquarent Britanniae et ex castris viderentur, tanta tempestas subito coorta est ut nulla earum cursum tenere posset, sed aliae eodem unde erant profectae referrentur, aliae ad inferiorem partem insulae, quae est propius solis occasum, magno suo cum periculo deicerentur. |
The NOWRAP attribute can be used to stop the text from wrapping:
<TABLE BORDER=2>
<TR>
<TD>Semper</TD>
<TD NOWRAP>Semper ... deicerentur.</TD>
</TR>
</TABLE>
| Semper | Semper ubi sub ubi. Quone modo nunc, fulve bos? Si hoc non legere potes, tu asinus es. Tua mater tam antiqua ut linguam latinam loquatur. Itaque cum adpropinquarent Britanniae et ex castris viderentur, tanta tempestas subito coorta est ut nulla earum cursum tenere posset, sed aliae eodem unde erant profectae referrentur, aliae ad inferiorem partem insulae, quae est propius solis occasum, magno suo cum periculo deicerentur. |
|
It is not normally possible to put text in two (or more) columns. However, there is a way around this using a table:
<TABLE WIDTH=80% ALIGN=center>
<TR VALIGN=top>
<TD WIDTH=200>Semper ubi sub ubi ... tenere posset,</TD>
<TD WIDTH=200>sed aliae eodem ... deicerentur.</TD>
</TR>
</TABLE>
| Semper ubi sub ubi. Quone modo nunc, fulve bos? Si hoc non legere potes, tu asinus es. Tua mater tam antiqua ut linguam latinam loquatur. Itaque cum adpropinquarent Britanniae et ex castris viderentur, tanta tempestas subito coorta est ut nulla earum cursum tenere posset, | sed aliae eodem unde erant profectae referrentur, aliae ad inferiorem partem insulae, quae est propius solis occasum, magno suo cum periculo deicerentur. |
As you can see, the first <TD> tag has a WIDTH="50%" attribute. This is because normally the browser will adjust the size of the cells to the text that you put in it. If you want the columns to have the same width, you either put exactly the same amount of text in it or -which is easier- use the WIDTH attribute to force equal columns. The 50%, by the way, is a percentage of the width of the table, not of the window. It is also not according to HTML 3.2 to use a percentage here but it works fine in most browsers.
In the same way you can of course create 3 columns, 4 columns, etc.
|