Last month I mentioned the border attribute and discussed how it can be set to any numerical value. This value will be the thickness of the border in pixels. You may also want to change the colour of the border however, and to do this you can use the bordercolor attribute. This attribute can be set to a hexadecimal value or set to one of the pre-set colours as discussed in a previous article.
Examples:
<table border=3 bordercolor=black>
<table border=6 bordercolor=#000000>
<table border=1 bordercolor=red>
<table border=2 bordercolor=#ff0000>
Tables can get quite compicated and sometimes you may not want to have a table with the same amount of cells on each row. Instead you might need a table that looks some like the one shown on the right.
To create a table like the one above, with different amounts of cells in each row and column, you will need to use the colspan and row span attributes.
I will guide you through the steps of creating a table using rowspan and colspan by creating a table like the image above.
((1)) Sketch out the table on a sheet of paper. To create a table like the one above I would draw a sketch like seen in Figure 1.
((2)) Extend the incomplete lines to form a grid-like table. Be sure that you can distinguish the extended lines from the original lines. See Figure 2.
((3)) Enter the dimensions on the diagram. See Figure 3.
((4)) Get Coding. Just like a normal table you start in the top left corner and work your way right and down.
<table border=1>
<tr>
To find out what code we want for the first cell we compare this cell in the three diagrams. In Figure two we can see that the cell takes up two rows and one column. In Figure 3 we can see that its height is 25 and its width is 30. We will leave the cells empty for now.
<td width=30 height=25 colspan=1 rowspan=2><br></td>
When we examine the second cell we see that it is 2 columns wide and one row high. In Figure 3 we see that its actual height is 10 and its width is 60.
<td width=60 height=10 colspan=2 rowspan=1><br></td>
These are the only two cells in this row.
</tr>
There may be some confusion concerning the first cell in the next row. This cell is highlighted it Figure 4. It has a colspan of 1 and a rowspan of, a height of 15 and a width of 25.
 |
 |
 |
 |
 |
Go To Page: 1 2
