Tutorials: Tables
Mastering tables is actually quite simple. Tables
can organize information on your site, or be your entire layout! The basics
are not too hard and you should be able to catch on.
First of all, here is some basic table code:
<table border="1" bordercolor="#000000">
<tr>
<td bgcolor="#FFFFFF">One</td>
<td bgcolor="#666666">Two</td>
<td bgcolor="#FFFFFF">Three</td>
</tr>
<tr>
<td bgcolor="#666666">Four</td>
<td bgcolor="#FFFFFF">Five</td>
<td bgcolor="#666666">Six</td>
</tr>
</table>
Which creates a table like this:
| One |
Two |
Three |
| Four |
Five |
Six |
Seems simple enough, right? First we'll go through what each
table needs, and then what each table can have.
Look at the table above, it has 3 tags that are required: the
table tag, the table row (tr) tag, and the table data (td) tag. Tables begin
and end with the table tag. After the table tag begins, you then
put in the table row tag, to start a new row. Then you add as many
table data tags as you want. All the information in each table cell
(each cell is made of one td tag) goes inbetween the beginning and
ending td tags. When you want to start another row, you end the
current tr tag, and start another. When you are done with your table,
you end the current row, and then end the table.
That was how each table is set up, but there are lots of different
things you can do to tables to fancy them up a bit.
Here are some things you can add to your table tag to change how
your table looks:
Border - Keeping a border or not
Bordercolor - Changing border color
Bgcolor - Background color
Background - Background image (will URL)
Cellpadding - Margins in cells
Cellspacing - Spacing between cells
Width - Width of table (in pixels)
Height - Height of table (in pixels)
So if you wanted to change the table we have above, you could
use those techniques and make it look like this:
| One |
Two |
Three |
| Four |
Five |
Six |
By using table code like this:
<table border="1" bgcolor=white border=2
cellpadding=5 cellspacing=5>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
<tr>
<td>Four</td>
<td>Five</td>
<td>Six</td>
</tr>
</table>
Making a Solid Border
Add the style attribute to make nice looking solid borders to the
table tag, so it looks like this:
<table style="border:solid 1px #000000">
Column and Row "Spanning"
You can also run a certain row or column so that it does not end
when you end the td or tr tag. See the 2 examples:
ROWSPAN:
<table border="1" bordercolor="#000000">
<tr>
<td>One</td>
<td rowspan=3>Rowspan</td>
</tr>
<tr>
<td>Two</td>
</tr>
<tr>
<td>Three</td>
</tr>
</table>
And the table looks like this:
COLSPAN:
<table border="1" bordercolor="#000000">
<tr>
<td colspan=3>Colspan Here!</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
</table>
And the table looks like this:
| Colspan Here! |
| One |
Two |
Three |
And that's tables!
|
|
