Tables With Miko
I love tables! From what I've observed, some people are having trouble coding this.
It appalls me how they misuse such a great part of HTML! Now, I was never planning on making this tutorial but I've changed my mind. In order to give tables justice, it should be coded right! And I'm here to show you how! You can now say good-bye to unnecessary nested tables (table within a table)!
The Basics
This is the very basic coding for a table:
<table border="1" cellspacing="0" cellpadding="0" width="300"> <tr> <td width="300">This is a cell.</td> </tr> </table>
The code above will result in something like this:
| This is a cell. |
The background color is changed for demonstration purposes so you can see what we're talking about. Changing background colors will be explained in the latter part of this tutorial.
Now, I'll explain the tags one by one...
table
This starts the code for the table. Paramerters include: border (puts a border in your cells), cellspacing (space in between the cells), cellpadding (padding within the cells), width (self-explanatory). Other parameters not included in the code above: height (self-explanatory), background (its value should be the URL of background image), bgcolor (background color - its value can be the hex code of the color), style (for CSS).
tr
Table row. No parameters.
td
Table data. This is also what you need to add cells in the table. Parameters include: width (self-explanatory). Parameters not included in the sample above: height (self-explanatory), background (its value should be the URL of background image), bgcolor (background color - its value can be the hex code or name of the color), align (horizontal alignment; its value can be either left, right or center), valign (vertical alignment; its value could either be top, middle or bottom), colspan (will be discussed in the latter part of this tutorial), rowspan (will be discussed in the latter part of this tutorial), style (for CSS).
Was that clear? I'll give you more examples so you can see just what the heck I was talking about. In this one, you'll see how cellspacing and td works:
<table border="0" cellspacing="5" cellpadding="0" width="300"> <tr> <td width="150" bgcolor="#CFC">This is cell #1.</td> <td width="150" bgcolor="#CFC">This is cell #2.</td> </tr> </table>
This will result in something like this:
| This is cell #1. | This is cell #2. |
In the code above, you'll see cellspacing is set to 5. This made our cells 5 pixels apart. If you don't want spaces in between your cells, just set its value to 0.
Since we have 2 cells in 1 row, we have 2 td tags inside the tr tag and their width were divided equally. Note that you can divide it any way you want by adding value for their width. It doesn't have to be equal. To add more cells, just add more td tags in your table like this example:
<table border="0" cellspacing="5" cellpadding="0" width="300"> <tr> <td width="100" bgcolor="#CFC">This is cell #1.</td> <td width="100" bgcolor="#CFC">This is cell #2.</td> <td width="100" bgcolor="#CFC">This is cell #3.</td> </tr> </table>
The code above will return a table with 3 columns. The more td you add, the more columns you'll have.
You can also see how we changed the background color of the cells by adding the bgcolor parameter inside the td tag. It's all pretty elementary so from this point on, I will no longer include the bgcolor in the succeeding sample codes.
The next example will show you how cellpadding works:
<table border="0" cellspacing="5" cellpadding="5" width="300"> <tr> <td width="150" align="center">This is cell #1.</td> <td width="150" align="right">This is cell #2.</td> </tr> </table>
It will look like this:
| This is cell #1. | This is cell #2. |
See what difference cellpadding made? It gave our cells a 5 pixel padding so the text won't be touching the sides of the cells. If you don't want padding in your cells, just set its value to 0. We also saw how the align parameter works. Its default value is left.
If you want to add another row, then we use the tr tag like this:
<table border="1" cellspacing="5" cellpadding="5" width="300"> <tr> <td align="right">This is cell #1.</td> <td align="center">This is cell #2.</td> </tr> <tr> <td width="125" height="50" valign="top">This is cell #3.</td> <td width="175">This is cell #4.</td> </tr> <tr> <td width="125" align="center" valign="bottom">This is cell #5.</td> <td width="175" height="75" align="right">This is cell #6.</td> </tr> </table>
The code above will look something like this:
| This is cell #1. | This is cell #2. |
| This is cell #3. | This is cell #4. |
| This is cell #5. | This is cell #6. |
Observe how we just add the tr and the cells (td) within them which resulted in 3 rows with 2 columns each? The more rows you want, the more tr with td you add to the code. No point adding rows (tr) without cells (td), you know.
We also saw valign and height parameters work in action. In valign, it's pretty simple. I don't really have to go further into it. You can clearly see the example in cells #3 and 5. The default value for it is middle. That's why we didn't put valign="middle" in cells #4 and #6.
See how I only put the height on cell #3 and yet cell #4 also has the same height? It's the same for cells #6 and #5. That's because all the cells in a row will follow the height of the cell that has the highest value for height. So, even if we put height="25" in cell #4, it's height will still be 50.
Notice anything? We didn't put the width for cells #1 and #2 but they have the same width as the cells below them. Like the height, the width of the cells will be the highest value for width in the column. This means that even if we put width="50" in cell #1, its width will still be 125.
If we can compare the width and height of tables to anything, we can compare it to the cells in a Microsoft Excel document. For those of you who are familiar with the program, you'll see that if you change the width of one cell in the column, all the cells in that column will follow that cell's width. Same goes for the height. If we change the height of one cell in a row, all the cells in that row will follow that cell's height.
Clear enough for you? Yes? Let's now proceed to something more challenging...
Colspan
This means column span. How does this work? Let's say you have a long image you want to put on the first row and you want to have 3 columns in the second row.
From what I've explained to you earlier regarding the width of cells following the cell that has the highest value for width in the column, what you can do is to slice the image to match the width of the cells in the second row. That way, it won't mess up the table.
Of course you can do that but why make it hard on yourself when there's a simpler way? Remember what I said about tables being compared to MS Excel cells? Well, in MS Excel, you can merge cells. You can do that too in tables using the wonderful colspan parameter! Here's a sample code:
<table border="0" cellspacing="0" cellpadding="0" width="350"> <tr> <td width="350" align="center" colspan="3">Cell for image.</td> </tr> <tr> <td width="80">Column 1.</td> <td width="190">Column 2.</td> <td width="80">Column 3.</td> </tr> </table>
The above code will generate something like this:
| Cell for image. | ||
| Column 1. | Column 2. | Column 3. |
See how we added colspan="3" in the td for the image cell? That's how we merge cells in tables. Since we have 3 columns or cells below, we put the value 3 in the colspan. The more cells, the higher the value for our colspan. Just remember that the value for colspan depends on how many columns or cells you've "spanned" or merged. Here's another sample code just to hone your understanding of colspan:
<table border="0" cellspacing="0" cellpadding="0" width="350"> <tr> <td width="350" colspan="3">Merged 3 cells, Row 1.</td> </tr> <tr> <td width="80">Column 1, Row 2.</td> <td width="190">Column 2, Row 2.</td> <td width="80">Column 3, Row 2.</td> </tr> <tr> <td width="270" colspan="2">Merged 2 cells, Row 3.</td> <td width="80">Column 3, Row 3.</td> </tr> <tr> <td width="80">Column 1, Row 4.</td> <td width="270" colspan="2">Merged 2 cells, Row 4.</td> </tr> </table>
This will look something like this:
| Merged 3 cells, Row 1. | ||
| Column 1, Row 2. | Column 2, Row 2. | Column 3, Row 2. |
| Merged 2 cells, Row 3. | Column 3, Row 3. | |
| Column 1, Row 4. | Merged 2 cells, Row 4. | |
Got it? Just remember how similar it is to merging cells in MS Excel. Now that we've covered colspan, let's move on to its counterpart...
Rowspan
This means row span. This is very much like colspan but here, we merge rows instead of columns. Here's how it works:
<table border="0" cellspacing="0" cellpadding="0" width="350"> <tr> <td width="120" rowspan="3">Column 1, Merged 3 rows.</td> <td width="230">Column 2, Row 1.</td> </tr> <tr> <td width="230">Column 2, Row 2.</td> </tr> <tr> <td width="230">Column 2, Row 2.</td> </tr> </table>
The above code will look something like this:
| Column 1, Merged 3 rows. | Column 2, Row 1. |
| Column 2, Row 2. | |
| Column 2, Row 3. |
Very similar to colspan, the value of rowspan depends on the number of rows it "spanned" or merged. Here's another variation of how rowspan is used:
<table border="0" cellspacing="0" cellpadding="0" width="350"> <tr> <td width="85">Column 1, Row 1.</td> <td width="180" rowspan="3">Column 2, Merged 3 rows.</td> <td width="85">Column 3, Row 1.</td> </tr> <tr> <td width="85">Column 1, Row 2.</td> <td width="85">Column 3, Row 2.</td> </tr> <tr> <td width="85">Column 1, Row 3.</td> <td width="85">Column 3, Row 3.</td> </tr> </table>
It'll look something like this:
| Column 1, Row 1. | Column 2, Merged 3 rows. | Column 3, Row 1. |
| Column 1, Row 2. | Column 3, Row 2. | |
| Column 1, Row 3. | Column 3, Row 3. |
See how rowspan works? Study the code above. You'll see that the first row (tr) has 3 columns or cells (td). We've already merged the middle column by adding rowspan="3" in the td tag. So, the succeeding 2 rows (tr) only have the first and third columns (td).
Are you with me so far? We're nearing the end of our table journey...
Putting It All Together
It's now time to combine everything we've discussed earlier regarding tables. Let's test how much you've learned from what we talked about. Imagine how this code will look like:
<table border="0" cellspacing="0" cellpadding="5" width="350"> <tr> <td width="265" height="30" bgcolor="#CFC" colspan="2">A</td> <td width="85" height="90" bgcolor="#CCF" rowspan="2">B</td> </tr> <tr> <td width="265" height="60" bgcolor="#FCC" colspan="2">C</td> </tr> <tr> <td width="350" bgcolor="#CFC" align="center" colspan="3">D</td> </tr> <tr> <td width="85" bgcolor="#FCC" height="75">E</td> <td width="180" bgcolor="#CCF" valign="bottom">F</td> <td width="85" bgcolor="#FCC" valign="top">G</td> </tr> <tr> <td width="85" bgcolor="#CCF" align="right">H</td> <td width="265" bgcolor="#CFC" colspan="3">I</td> </tr> </table>
Get a pen and paper and draw what you think that code will look like. If you drew something that looks like this:
| A | B | ||
| C | |||
| D | |||
| E | F | G | |
| H | I | ||
Then, you are wrong! Look at the code again and see what is wrong with the illustration of the table. Still don't get it? On cell B, since we didn't add align="center" in that cell, it should be aligned to the left which is the default align value.
If you got it right, give yourself a pat on the back because you have a good grasp of tables. Good for you!
Conclusion
Aren't tables wonderful? Here are just some tips for you:
- When coding, remember to put spaces so all your
trandtdtags are aligned to each other (like on the sample codes above). That way, it'll be easier for you to spot which part is the row and which is the columns. It'll make your coding easier to understand. - The
borderparameter will put borders on all the cells and not just the table. If you want to add a border to the table only, add it using CSS by using thestyleparameter in thetabletag.
Hope this tutorial helped you to better understand tables.
If you have any questions or if you want to discuss this tutorial, you may post at Blinding Light MB.