This month I will discuss tables. Tables are helpful in
html not only for representing tabular data but also for laying out web pages. I will not be using the band metaphor because this is a fairly technical as opposed to practical section to teach.
To indicate the start of a table you use the
<table>
tag and to indicate the end of a table you use the
</table>
tag. If you want your table to have borders you would write
<table border=1>
or
<table border=2>
or more generally
<table border=[thickness of border]>
. By default your table will not have borders on most browsers but to be absolutely certain it has no borders you should write
<table border=0>
.
Data in tables is displayed in rows and columns. Rows go across columns go up and down. In
html you write in data for a table row by row. Top row first and working down to the bottom row. To indicate the start of a row you use the
<tr>
tag and to indicate the end of the row you use the
</tr>
tag.
For now we will assume that each row has to have the same number of cells, which form columns.
To indicate the start of a cell you use the
<td>
tag and to indicate the end of a cell you use the
</td>
tag. All this talk of tags may be confusing so I will write some example code to make it easier to understand.
The following code creates a table with two rows, each with three cells (and therefore the table has three columns), the table has a border which is 2 pixels wide:
<table border=2>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
That table is empty and therefore useless. Now I will put in some information:
<table border=2>
<tr>
<td>This is the first cell of the first row.</td>
<td>This is the second cell of the first row.</td>
<td>This is the third cell of the first row.</td>
</tr>
<tr>
<td>This is the first cell of the second row.</td>
<td>This is the second cell of the second </td>
<td>This is the third cell of the second </td>
</tr>
</table>
result of above code This code creates this table in Internet Explorer. There are several attributes of the <table> tag, the <tr> tag and the <td> tag.
These are the attributes of the
<table>
; tag.
BORDER: as discussed earlier. Default:0
CELLSPACING: sets the number of pixels between each cell. Default:2-4
CELLPADDING: sets the number of pixels of padding inside each cell. Default:2-4
BACKGROUND: sets a background image. Default: none
BGCOLOR: sets a background colour as discussed in a previous article. Default: #FFFFFF (white)
ALIGN: can be set to ‘left’, ‘right’ or ‘center’. Sets the alignment of the entire table in the browser window. Default: center
WIDTH: can be set as a percentage of the browser window or as a definite number of pixels . Default: [as required]
HEIGHT: sets in pixels the height of the table. Default: [as required]
These are the attributes of the
<tr>
tag:
BGCOLOR: sets a background colour as discussed in a previous article. Default: #FFFFFF (white)
ALIGN: can be set to ‘left’, ‘right’ or ‘center’. Sets the alignment of the text in each cell of that row. Default: ‘left’
These are the attributes of the
<td>
tag:
BGCOLOR: sets a background colour as discussed in a previous article. Default: #FFFFFF (white)
ALIGN: can be set to ‘left’, ‘right’ or ‘center’. Sets the alignment of the text in that cell. Default: ‘left’
BACKGROUND: sets a background image. Default: none
WIDTH: can be set as a percentage or as a definite number of pixels . Default: [as required]
HEIGHT: sets in pixels the height of the cell. Default: [as required]
These are the
basic structural attributes. None of them are required and if not included there values are assumed to be the defaults I have mentioned above.
It is not always necessary for each cell to contain data. If you want a cell to contain no data and to still present properly you should put a
<br>
tag or the non-breaking space character (
 
) into it:
<td><br></td>
or
<td> </td>
Next month I will discuss more attributes relating to
colour and more structural attributes also. I will also in another article discuss practical uses for tables.