|
|
| ||||||||||||||||||||||||||||||||||
BordersSo far your tables have been using a border around 2 pixels thick. You can make the borders thicker or remove them altogether by using the BORDER attribute in the <table> tag. The tag below would make a border 10 pixels thick: <table width=100 height=100 align="center" border=10> This would make a table similar to the one below.
Notice that the BORDER attribute only effects the overall border surrounding the the table. This is true of all BORDER values except for border=0 which removes all borders. <table width=100 height=100 align="center" border=0> This would remove all the borders including the internal ones:
An average border for a data table runs around 2-5 pixels. There is no way to remove the 3-D effect of table borders like the "NOSHADE" attribute of <hr>. Limit this effect by using narrower borders. Coloring The BorderYou can color your borders by using the BORDERCOLOR attribute in your <table> tag: <table width=100 height=100 align="center" border=5 bordercolor="red"> Here's the table the above tag would produce:
You can use the standard colors. Hexadecimal colors are preferred. Netscape and IE present the BORDERCOLOR differently. Internet Explorer will color all of the borders including the internal ones. Netscape only colors the outside border. The internal borders assume a default color based on the viewers Windows scheme. You can color individual cell borders by using BORDERCOLOR in the individual <td> tags. This does not work in Netscape, but it doesn't hurt anything either.
<table width=100 height=100 align="center" border=5 bordercolor="red"> The above would color the border of cell #1 like this:
Remember that coloring individual cell borders only works with Internet Explorer. It doesn't work in Netscape. Using Background ColorsBackground colors can be applied to the overall <table> or to each individual cell. The method is just like making a background color for the <body> tag using BGCOLOR: <table width=100 height=100 align="center" border=5 bordercolor="red" bgcolor="yellow"> This would color the background of the entire table like this:
You can color individual cells by putting the BGCOLOR attribute in individual <td> tags. This will override the <table>'s BGCOLOR.
<table width=100 height=100 align="center" border=5 bordercolor="red" bgcolor="yellow"> This would make the table below:
Note that you can see a little of the <table>'s yellow background between the cells. The borders are still red as defined in the <table> tag. You can change their color in Internet Explorer as describe previously. Coloring the cells' background works in both Netscape and IE. Using Background ImagesYou can use the BACKGROUND attribute to place a background image in the overall table or individual cells. The BACKGROUNDs will tile just like with the BACKGROUND attribute in the <body> tag. Unfortunately, CSS styling can't be applied here. It's wise to size your images to fit the table or cell you want to put them in. Here's a table with a BACKGROUND:
Here's the code in the <table> tag that made the above table: <table width=300 height=150 align="center" border=2 bordercolor="red" background="avocado.jpg"> Notice that the table's dimensions clip the image. When an image is used as a background it will be clipped or tiled to fill the table. Images used as content in a table will expand the table or cells as needed to fit. Content images will not be clipped under normal, default circumstances. Background images will override a BGCOLOR just like they do in the <body> tag. You can also use a background image in a single cell. This will override any BGCOLOR the cell may have.
<table width=150 height=150 align="center" border=5 bordercolor="red" bgcolor="yellow"> Here's the table:
See the coffee cups in cell #1? The image has a transparent background, so the BGCOLOR (orange) of the cell shows through. The whole thing is layered like this: First the table's overall yellow BGCOLOR is drawn. Then the cell's BGCOLOR (orange) overrides the yellow. Finally, the coffee.gif image is drawn on the orange. Finally the content ("Cell #1") is displayed on top of all of this. Applying StyleAt the present time, you cannot style many properties for the "table" or "td" elements. You can define a "background-color:" property and that's about the only styling that will work consistently. As an alternative to styling table elements, use the tags you've learned (and will learn). You can style the contents of the table just like any other HTML elements. It's only the "table", "tr", and "td" elements that will give you problems. ExercisesMake all of the tables on this page before moving on. Start using copy and paste to save some typing when coding similar <td>s. |
||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||