Understanding HTML tables Part 6

Borders width cellpadding background images rowspan
alignment height cellspacing background colour colspan

Table Attributes

If you want to get a bit more technical with your page layout, you can use the "rowspan" and "colspan" attributes in your "<td>" tag.

Rowspan

You can use the "rowspan" attribute to change the way your table is laid out. It doesn't take a rocket scientist to work out that "rowspan" means 'row span'. What it also means is that you can have one long data cell which spans several other rows of cells.For instance, your table can be set out like this:

<table width="100" height="100">
<tr>
<td rowspan="2">
cell 1 - rowspan="2" means it will span across 2 rows
</td>
<td>
cell 2
</td>
</tr>
<tr>
<td>
cell 3
</td>
</tr>
</table>
cell 1 - rowspan="2"
means it will
span across 2 rows
cell 2
cell 3


This is done by starting at the top left of the page. Where we start is the first "<td>" tag, and if you have a look at the above table...it spans down two "rows" Because of this, you need to put "rowspan="2"" in the first "<td>" tag, as you can see by the above html code. You put your information you want into the cell, then close it off with a "</td>" tag.As the next two "<td>" cells are beside this one, we don't finish off the row yet.

You then open the next data cell across with a "<td>". You put the info you want in there, then close the cell with a "</td>" tag. We want another cell underneath that one, so you need to finish the row. You now type in "</tr>" then start on the next row with a "<tr>".Remember how you typed 'rowspan="2"' in the first "<td>" tag? This means that the data cell will span two rows....SO...the next "<tr>" that you type in will start under the second "<td>" cell you typed in, but still next to the first one (as in the above example). Is this as clear as mud yet? I think I'm confusing myself! Anyway, finish off your table as normal, and see what you have!

Let's get a little more tricky. Let's have the cell which spans two rows on the RIGHT of the table. You now need to think in a more ordered way.

<table width="100" height="100">
<tr>
<td>
cell 1
</td>
<td rowspan="2">
cell 2 - with the rowspan=2
</td>
</tr>
<tr>
<td>
cell 3
</td>
</tr>
</table>
cell 1
cell 2 - with the rowspan=2
cell 3


The table gets read from left to right...so we need to do the 'top' cells first (the ones across the top line of the table). We want cell number 2 to span across 2 rows, so we state that. BECAUSE we set it at 2 rows, the NEXT row we do slips itself in to the LEFT of that cell, because it's the next row down and we needed TWO rows beside cell 2. Please...DON'T ask me to repeat that, I probably never could!

Colspan

"colspan" stands for 'column span'. The colspan attribute works the same as the rowspan one...but the other way. For instance, you can have this:

<table width="100" height="100">
<tr>
<td colspan="2">
cell 1 - colspan=2 means it will span across 2 columns
</td>
</tr>
<tr>
<td>
cell 2
</td>
<td>
cell 3
</td>
</tr>
</table>
cell 1 - colspan=2 means it will span across 2 columns
cell 2
cell 3


This is working on the same theory, except you will note that after you do the data cell for the first cell, it's the end of the row. So, you need to close off the row with a "</tr>" tag and open the next row with a "<tr>" tag. The other difference between this table and the previous one is you need to take out the "</tr><tr>" tags between the second and third cells...because they're now on the same row!

Copy and paste the code from the tables above into your html page...and have a play with it. You can put "<td rowspan="10">" into the first one, and have 10 rows of data alongside it. In fact, you can have as many rows/columns of data as space permits! You just need to be able to work out how to set them out.

Just to tax your brain....

Now, here's a tricky little piece of work. Have a study of it, and see if you can do something similar. I've made it easy and stated what order the cells went in!!!

You can view the source code for this here.


cell 1 cell 2
cell 3 cell 4 cell 5 cell 6
cell 7 cell 8