|
|
Now that you know how to make basic tables, I will show you how to make some tables that are a little more involved. To start, let's begin by editing the table's properties. To do this, we will specify certain things in the "table" tag. The commands we can add there are border, cellspacing, and cellpadding. Let's begin with the simple 2x2 table I showed you in the previous lesson:
<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table> |
It will look like
 |
| Cell 1 |
Cell 2 |
Cell 3 |
Cell 4 |
|
In the table tag, add the three new specifications I showed you above. Your table tag should now look like this:
<table border=1 cellspacing=0 cellpadding=0>
In the example table above, notice that I added those new things right into the table tag. Now, I want you to change the border to 10, and see what the table will look like...The code should look like this:
<table border=10 cellspacing=0 cellpadding=0>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table> |
It will look like
|
| Cell 1 |
Cell 2 |
Cell 3 |
Cell 4 |
|
Notice how much fatter the outer part of that table is compared with the one at the top. Okay, now set the border back to 1, but change the cellspacing to 10 and see what happens. Try this with the cellpadding, too.
The next things to learn about tables are colspan (column span) and rowspan (row span). The colspan and rowspan tags go into the "td" tags in your table. The first tag I'll show you is the colspan tag. The colspan tag will allow one or more cells to span an indefinite amount of cells below them depending on what you specify. Here is an example:
to make a table like that, write this code:
<table border=1>
<tr>
<td
colspan=3><center>Cell 1</td>
</tr>
<tr>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr></table>
In the above examples, cell 1 takes up the whole first row. This is done by making it the only table data cell in that row. The next row is comprised of the other three cells, and the colspan tag in the cell above places it across the tops of all of them. The rowspan tag works the same way, but it makes a cell span rows instead of columns like this:
Now that you probably have a good idea of how to manipulate these things, try making your own tables and mess with the variables to see what you can make. Next lesson: Frames...
<<<<Previous lesson ||||||
Next lesson>>>>
|
