|
Lets start with our first example again. This is the example with the 60% width attribute.
| This is the header cell (<TH> - </TH>) |
| This is a table cell (<TD> - </TD>) |
Okay, let's proceed. The next bit is adding a bit of colour (or color if you are American or writing HTML!). Each cell can be coloured, as can the whole table.
Let's take our example and add a colour code in the first line.
| This is the header cell (<TH> - </TH>) |
| This is a table cell (<TD> - </TD>) |
The opening line now reads:
<TABLE BORDER="1" width="60%" bgcolor="#FFFF00">
You can change the color attribute to anything you want, and use the written word (yellow) or code it - "#FFFF00". Either way you will fill the table with the colour/color and it will make the whole thing stand out.
You may want to change the colour of one cell to make it different from another. Take the example above and colour the second cell so it looks like this:
| This is the header cell (<TH> - </TH>) |
| This is a table cell (<TD> - </TD>) |
All I did was add a bgcolor to the <TD> command, so the entire script now reads:
<TABLE BORDER="1" bgcolor="#FFFF00">
<TH>This is the header cell</TH>
<TR>
<TD bgcolor="#FF0000">This is a table cell</TD>
</TR>
</TABLE>
The next command line is ALIGN. This command aligns the contents left, center or right. Lets go back to our example again, this time with the table contents aligned to the left.
| This is the header cell (<TH> - </TH>) |
| This is a table cell (<TD> - </TD>) |
...and again with the contents aligned to the right.
| This is the header cell (<TH> - </TH>) |
| This is a table cell (<TD> - </TD>) |
So how is this done? The <TH> and <TD> code is added to with align="right", so it now looks like this - <TH align="right">.
That's all very well with one row of cells. What if you want a number of rows, let's say you want three rows of equal size. The coding is very similar, just multiplied! Here's an example. Let's say we want 3 columns with three rows, so it looks like this:
| Cell 1 |
Cell 2 |
Cell 3 |
| Cell 4 |
Cell 5 |
Cell 6 |
| Cell 7 |
Cell 8 |
Cell 9 |
The code now looks like this:
<TABLE BORDER="3" width="60%" height="100" bgcolor="yellow">
<TR>
<TD>Cell 1</TD>
<TD>Cell 2</TD>
<TD>Cell 3</TD>
</TR>
<TR>
<TD bgcolor="#FF0000">Cell 4</TD>
<TD>Cell 5</TD>
<TD>Cell 6</TD>
</TR>
<TR>
<TD>Cell 7</TD>
<TD bgcolor="#0000FF">Cell 8</TD>
<TD>Cell 9</TD>
</TR>
</TABLE>
Notice the difference in the first line? I have made the height a fixed height of 100 pixels so you can see it better. I have also changed the color of cells 4 and 8.
There are two other lines of code that I will deal with here. After that we are into the advanced stuff, and you are better off seeking the really clever stuff. That doesn't mean we can't do it! We prefer to stick to basics on these pages otherwise it could get out of hand! Anyway, the last two commands are Cellpadding and Cellspacing.
To find out about these, please click here.
Top
[1] [2] [3] [4] [5] [6] [7]
<<< Previous page
| 
