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.