html tables

html tables

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.

table cells rows & columns

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.

html table example

These are the attributes of the <table&gt; 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 (&nbsp) into it:

<td><br></td>
or <td>&nbsp</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.

Leave a Reply

Your email address will not be published.