|
Tables are a series of columns and rows. Columns are the top to bottom sections and the rows are the left to right sections
of the table.
The Colspan and Rowspan commands can help you to define a tables appearance on a web page. Now some people have a bit of
a hard time understanding how Colspan and Rowspan work.
For example, you could use the Colspan command to create a table like this one.
| Row 1 Column 1 |
| Row 2 Column 1 |
Row 2 Column 2 |
Row 2 Column 3 |
|
<TABLE BORDER="1" CELLSPACING="1" CELLPADDING="5">
<TR>
<TD ALIGN="center" COLSPAN="3"> Row 1 Column 1 </TD>
</TR>
<TR ALIGN="center">
<TD> Row 2 Column 1 </TD>
<TD> Row 2 Column 2 </TD>
<TD> Row 2 Column 3 </TD>
</TR>
</TABLE>
|
Since we want our top row of data to be the same length as the three cells in the bottom row we
have Colpsan="3" ( Column Spans 3 columns in Row 2 ) in our TD tag.
The top row now has only one column that spans across the three below it.
Rowspan is used in a similar way except you are spanning rows.
Row 1 and 2
Column 1 |
Row 1 Column 2 |
| Row 2 Column 2 |
Above you have a table which has it's first column covering two rows. Which is where people get confused because
you would say that your Column Spans two row but you use RowSpan not Colspan to do this as you see
in the HTML code below.
|
<TABLE BORDER="1" CELLSPACING="1" CELLPADDING="5">
<TR>
<TD ALIGN="center" ROWSPAN="2">Row 1 and 2 <br> Column 1 </TD>
<TD> Row 1 Column 2 </TD>
</TR>
<TR ALIGN="center">
<TD> Row 2 Column 2 </TD>
</TR>
</TABLE>
|
We used <TD ALIGN="center" ROWSPAN="2"> to have our first row essentially merge with the second row so that
it would span the two rows beside it.
Yes, HTML tables can be confusing sometimes. Probably the best thing to do is to draw out your tables before hand
in order for you to get an idea of how you want your data displayed.
Tables allow you to present data in very creative ways. Don't be afraid to try different formats for creating tables.
| Colspan="2" |
Row 1 Column 3 |
| Row 2 and 3 |
Row 2 Column 2 |
Row 2 Column 3 |
| Row 3 Column 2 |
Row 3 Column 3 |
| Row 4 Column 1 |
Row 4 Column 2 |
Row 4 Column 3 |
|
<TABLE BORDER="1" CELLSPACING="1" CELLPADDING="5">
<TR ALIGN="center">
<TD COLSPAN="2"> Colspan="2" </TD>
<TD> Row 1 Column 3 </TD>
</TR>
<TR ALIGN="center">
<TD rowspan="2" > Row 2 and 3 </TD>
<TD> Row 2 Column 2 </TD>
<TD> Row 2 Column 3 </TD>
</TR>
<TR ALIGN="center">
<TD> Row 3 Column 2 </TD>
<TD> Row 3 Column 3 </TD>
</TR>
<TR ALIGN="center">
<TD > Row 4 and Column 1 </TD>
<TD> Row 4 Column 2 </TD>
<TD> Row 4 Column 3 </TD>
</TR>
</TABLE>
|
| 
