You make tables from a set of tags including the opening and closing tags <table> and </table> and table row <tr> and table detail <td> definition tags. The tags also accept a range of switches so that you can control width, background colour and borders. Let's examine an example table, used in showing the conjugation of a French verb, faire to do or to make.
| FAIRE = to do or to make. | |||
| PRESENT | IMPERFECT | ||
| je fais | I make
| je faisais | I used to make |
| tu fais
| you make | tu faisais | you used to make |
| il fait | he makes | il faisait | he used to make |
| nous faisons | we make | nous faisions | we used to make |
| vous faites | you make | vous faisiez | you used to make |
| ils font | they make | ils faisaient | they used to make |
Here's the code from the top of that verb table
<table bgcolor=ffffff border=2 cellpadding=2>
<tr>
<td colspan=4 align=left>FAIRE = to do or to make.
<tr>
<td colspan=2 align=center>PRESENT
<td colspan=2 align=center>IMPERFECT
<tr>
<td>je fais
I'll discuss each tag line by line:
The table open tag has 3 switches:
bgcolor to set the background of the whole table to white in this case
(ffffff is white), note you can reset the colour of individual table detail
cells to other background colours.
border sets the width of the border ruled around the whole table, a very
wide border, say, 10 or more pixels, gives the border a raised shadow or 3D
effect. Try it when have time.
cellpadding sets the white space or margin from the text to the inside
edge of the border or grid of the table.
On the next line of code is the table row tag
<tr>
Rows run across the width of the screen, like lines. You must insert a new table
row tag for each row in your table.
On the next line is the table detail tag <td>
You must put in a table detail tag for each cell of information you wish to
show in your table. The table detail tags can have switches, too, the one in
this line of the example needs to tell the browser that this cell is going to
stretch over the full width of 4 columns without any grid lines breaking the
cell. To do this I used the column-span tag and specified the number of columns
to span across.
Question: How have I stretched the cell containing the table detail: IMPERFECT, to make it span two columns?
Suggested Response: By using the tag <td
colspan=2> before the detailed text IMPERFECT