|
Contents
Introduction
There are some situations where you'll need to span cells to achieve the desired
table layout. This can be done by using the 2 attributes "COLSPAN" and "ROWSPAN".
These will be explained in this HTML tutorial.
COLSPAN
I believe the best way to learn something is to see it in use so let us use an
example to explain what COLSPAN does. Let us imagine that we want the following
layout, a webpage with the menu on the left hand side and content on the right:
Now, with what you learned in the previous section, "Coding Basic HTML Tables", you might be tempted to code
this table like by using something similar to the following code, however this would be incorrect:
1. <html>
2. <head>
3. <title>More Complex HTML Table Code</title>
4. </head>
5. <body>
6.
7. <table width = "800px" align = "center">
8. <tr>
9. <td>
10. <!-- Logo Here -->
11. </td>
12. </tr>
13. <tr>
14. <td width = "200px">
15. <!-- Menu Here -->
16. </td>
17. <td width = "600px">
18. <!-- Content Here -->
19. </td>
20. </tr>
21. <tr>
22. <td>
23. <!-- Footer Here -->
24. </td>
25. </tr>
26. </table>
27.
28. </body>
29. </html>
Incorrect HTML Table Code
|
So why is the above code incorrect? A table with 3 rows has been defined, and the correct
number of cells seems to have been defined on each row.
Well you're actually not that far off with this code. However you need to know one important
thing about HTML tables, which is that each row within a table needs to have exactly the same
number of cells. These cells are then merged together in various ways to achieve the desired
table layout. This means that in the above example there are in fact 2 cells within each row
and it should be thought of in the way shown below:
The dotted lines show the seperation of the cells before they are merged together. In this
case we are merging cells on the same row, i.e. the span across multiple columns. This means
that we need to use the attribute called "COLSPAN".
Now we can correct the above code with 2 simple changes:
1. <html>
2. <head>
3. <title>More Complex HTML Table Code</title>
4. </head>
5. <body>
6.
7. <table width = "800px" align = "center">
8. <tr>
9. <td colspan = "2">
10. <!-- Logo Here -->
11. </td>
12. </tr>
13. <tr>
14. <td width = "200px">
15. <!-- Menu Here -->
16. </td>
17. <td width = "600px">
18. <!-- Content Here -->
19. </td>
20. </tr>
21. <tr>
22. <td colspan = "2">
23. <!-- Footer Here -->
24. </td>
25. </tr>
26. </table>
27.
28. </body>
29. </html>
Correct HTML Table Code
|
You will notice that all we have done here is to add 'colspan = "x"' within the <td> tag.
The x is the number of columns that the cell should span across, i.e. how many adjacent cells
you need to merge together. You can check that this code is correct by adding the total number
of cells defined within each row. Please note that the changes have been put in bold to make
them more noticeable.
ROWSPAN
In the same way "COLSPAN" is used when spanning a single cell across multiple columns, "ROWSPAN"
can be used to span a single cell across multiple rows, i.e. merging vertically adjacent cells
together. It should also be noted that the number of rows and columns within an HTML table must
always be constant as mentioned before.
People find that using "ROWSPAN" can be a little tricky at times so let us use an example
to clarify it's use:
In this example we have a cell than spans across 3 rows - the dotted lines outlines the
cells that should otherwise be there. When coding this we need to use the "ROWSPAN" attribute
and set it equal to 3. Let us see the actual code that would be used to clarify things:
1. <html>
2. <head>
3. <title>Example of "ROWSPAN" In Use</title>
4. </head>
5. <body>
6.
7. <table width = "800px" align = "center">
8. <tr>
9. <td rowspan = "3" width = "200px">
11. <!-- Left Hand Side Content Here -->
12. </td>
13. <td width = "600px">
14. <!-- Logo Here -->
15. </td>
16. </tr>
17. <tr>
18. <td>
19. <!-- Content Here -->
20. </td>
21. </tr>
22. <tr>
23. <td>
24. <!-- Footer Here -->
25. </td>
26. </tr>
27. </table>
28.
29. </body>
30. </html>
|
The first line that you should draw your attention to is on line
9. Here we are definiting a "DATA" cell (<td>) that spans 3 rows
as we have used 'rowspan = "3"'. We have then created another cell
on line 13 to act as a container for the logo. Notice that we have
in fact defined the width for both cells as otherwise the browser
would automatically set the width to what it deems suitable, which
is something that is not desired.
The next area of of interest is on the next 2 rows. If you look
closely you will notice that on each of these rows we have only
defined 1 "DATA" cell (<td>). This is because we have already
defined a cell that spans across these rows so we do not need to
define those again.
Note that the order is very important here. In the code above we
have set the first cell on the first row to span across 3 rows using
"ROWSPAN" on line 9. If we had instead set the second "DATA" cell to
span across 3 rows on line 13 we would have ended up with the merged
cells to the right, as shown below (assuming that is the only change
in the code):
[
Back to HTML Tutorials ]
|
