More About Tables
Now that we’ve created a table, we can modify the code to create a variety of different effects with it.
First of all, you’ve already seen how the border property works. The default value is 0. You can specify any other number to set the width of the border in pixels. Now, if you’re working in Internet Explorer (this won’t work in Netscape Navigator) you can specify the color of the border. Make a copy of your last assignment and try it. In the <table> tag, type bordercolor="#xxxxxx" where the Xs are the same color code we’ve been using. You can also specify what color the dark, shaded portions will be with bordercolordark="#xxxxxx" and what color the lighter part of the border will be with bordercolorlight="#xxxxxx"
You can set the width of your table by adding width="x" where X is the width of the table in pixels. You can also set the height with height="x". But keep in mind that there are limits to how small a table can be. You can’t tell a table to be 1 pixel high and 1 pixel wide because it still needs to display the content of the cells.
You can specify where the table should display on the page with the align="x" property where X is either “left”, “right” or “center”. (The default value is left). If you set it at “right” the text any text you have on the page will wrap around the left side of the table.
Spanning Cells
You can span a cell across columns or rows like this example:
| This cell is spanned across multiple columns. | ||
| 1 | 2 | 3 |
| 4 | 5 | 6 |
| 7 | 8 | 9 |
| This cell is spanned across multiple rows. | 1 | 2 | 3 |
| 4 | 5 | 6 | |
| 7 | 8 | 9 |
You can do this by adding colspan="x" to the <td> tag, where X is the number of columns you want to span across. Or you can add rowspan="x" to the <td> tag, where X is the number of rows you want to span across. Try it. See if you can re-create the examples above.
Cell Alignment
You can align where on a page the table will be (left, right, center). You can also align the contents of each individual cell. You can tell the contents of an entire row to aligned either left, right or centered (the default value is left) by adding this to the <tr> tag: align="x".
You can also add the align="x" tag to individual cells by typing it in the <td> tag. Additionally, you can specify where the content should align vertically with the valign="x" property. The x can be: “top”, “middle” or “bottom”. Use these commands to try and create a table like the example below.
| Top-Left | Top-Center | Top-Right |
| Middle-Left | Middle-Center | Middle-Right |
| Bottom-Left | Bottom-Center | Bottom-Right |
Cell Spacing and Padding
You can also control the amount of space between the text and the borders of the table. There are two different ways to do this. One is by adding cellspacing="x" to the <table> tag, where x is the amount of space in pixels. This adds space between the cells. The other is to add cellpadding="x" to the <table> tag. This property adds space inside the cells, like internal margins. Try these and play around with the values until you understand the difference between Spacing and Padding.
Table Background Colors
Another thing you can do is change the background colors of any part of the table. To change the background color of the entire table type bgcolor="#xxxxxx" in the <table> tag. To change the background color of a row, type the same thing in the <tr> tag. To change the background color of a cell, type the same thing in the <td> tag.
Table Background Image
Yet another thing you can do is specify an image as a background image for your table. You can either put it in the <table> tag or in an individual <td> tag. Type background="image.gif" where “image.gif” is the name of the image you want to place (it must be in the same location as your HTML file to work). Usually it’s not a good idea to do this because it does weird things to your table and doesn’t work the same in Internet Explorer as it does in Netscape Navigator.
Custom Borders
And finally, you can choose which borders to display in your table. To select the outside borders you want to show, add frame="x" to your <table> tag, where x is one of the following: “void”, “above”, “below”, “hsides”, “vsides”, “rhs”, “lhs”, and the default value is “border”. Try all of these until you can tell what each of them does.
You can also choose which inside borders to display by adding rules="x" to your <table> tag, where x is one of the following: “none”, “rows”, “cols”, and the default value is “all”. Try all of these until you can tell what each of them does.