|
To begin tables, we have to learn a few terms:
Table: <table>
Table row: <tr>
Table cell: <td>
These are the 3 main terms.
The bare bones of table tags is:
<table> Starts a table
<tr> opens a row
<td> opens a cell, where you put the data
</td> closes the cell
</tr> closes the row
</table> closes the table
If you have tried coding the above, you soon discovered that there is nothing to see.
If you add borders, you will see a little square.So try,
<table border=5>
<tr> <td> </td> </tr>
</table>
OK,it doesn't look like much yet because you have no data.
So in the data cell, put:
<FONT face=Diner color=#000080 size=5> My First Table</FONT>
Now you see the table with it's data.
You could have put a picture in there instead; try:
<IMG src="exact path">
OK you have just learned the basics of a table.
****Continueing with tables, we will build a table with with 2 cells...
<table border=5>
<tr>
<td> Cell 1</td>
<td> Cell 2</td
</tr> <table>
and what about 2 cells, and two rows:
<table border=5>
<tr>
<td> Cell 1</td>
<td> Cell 2</td>
</tr>
<tr>
<td> Cell 3</td>
<td> Cell 4</td>
</tr>
</table>
In order to have variety in your rows and columns, you have to learn 2 new terms:
colspan which means spanning column and
rowspan which means spanning row.
Now, let's see how we can use these:
If you want one cell in the first row and 2 cells in the second row, your first row will have to "span" the 2 cells in the second row, so you would write:
<table border=5>
<tr>
<td colspan=2> Cell 1</td>
</tr>
<tr>
<td> Cell 2</td>
<td> Cell 2</td>
</tr>
</table>
copy the above code and see what it looks like.
Now if you want your row to span, you will have this:
<table border=5>
<tr>
<td rowspan=2> Cell 1</td>
<td> Cell 2</td>
</tr>
<tr>
<td> Cell 3</td>
</tr>
</table>
Try all these possibilities.
Next time we will start adding style to our tables.
Ciao for now.
|
