I think of tables as the basic building blocks of my pages. I don't have one single webpage anywhere that doesn't have at least one table in it. The cells of your table are handy controllable compartments to stick things in. So how do you make 'em? Here we go!
<contents>
- a simple table
- colspan and rowspan
- the table tag
- the <tr> tag
- the <td> tag
- the <th> tag
- a full-fledged table
- a data table
This table can be used just to keep all of your text where you want it. Here's an example:
<tr><td>
Here is the text that will go in the table.
</td></tr>
</table>
| Here is the text that will go in the table. |
So what does it all mean? The <table> tag starts and ends the table, of course. <tr> creates a new row and <td> creates a new cell in that row.
<colspan and rowspan>
Using tables to your advantage.
<tr><td rowspan=2> left row, 2 columns </td>
<td> top right </td></tr>
<tr><td> bottom right </td></tr>
</table>
|
left row, 2 columns | top right |
| bottom right |
<tr><td colspan=2>
top row, two columns
</td></tr>
<tr><td> bottom left </td>
<td> bottom right </td></tr>
</table>
| top row, two columns | |
| bottom left | bottom right |
<the table tag>
<table width=300 height=200 cellpadding=2 cellspacing=10 border=2>
width - you can specify any number of pixels you'd like or you can do it in percentages. A table controlled in pixels will always stay the size you set it at, regardless of how big your viewer has their browser window open. If you want your table to always take up half of the screen, no matter what size window your viewer has, use 50%. For example: <table width=50%>.
Things to consider: If you make your table width something pretty big, say 800 pixels wide, it's very likely that your viewer can't get their browser window that wide and they'll have to scroll from left to right to see your page. If you set your table width in percentages, it will adjust to the size of your viewer's window, but since you don't know how big or small it's going to get, you can't control the details of how it's going to look. Percentages are usually good for tables with only text in them. If you don't specify a width, your table will default to being just as big as the largest thing (image or line of text) in there.
height - you usually only want to use this tag if you have some reason to want to keep the height static. For example, if you have a background image in your table that you don't want to tile, you would want your table to have a fixed height setting. Anyway, height works the same as width, except width is legal on all browsers, while height is only allowed on recent versions of Netscape and IE (and compatible browsers).
cellpadding - this is the space between the edge of the cell and the content of the cell. You can just leave that at the default unless you want your text or picture or whatever to be closer to or farther from the edge.
cellspacing - this is the space in between each of your cells. Cellspacing is mainly cool for creating gaps, such as the ones between the code and examples on these pages.
border - this is the border around each cell of your table. For almost every lining-up type table, you'll want NO border, because borders are ugly. If you have some kind of table that is information (i.e. postage prices or something), leave the border on. The reason all the borders are on my tables on this page is so that YOU can see them! The great thing borders are useful for is checking to see if you're making your table right: keep the border on while you're working, then remove it when your table is ready.
<the <tr> tag>
You can't do anything with the <tr> tag. Leave it alone.
<the <td> tag>
<td width=15 height=10 background="image.gif" bgcolor="#f5b5c0" colspan=2 align=right valign=top nowrap>
width & height - same as with the table tag. If you mess with the height and width of cells, either leave those attributes out of the table tag or make sure they add up to what you've said in the table tag.
background - here you can specify a background image for your table. Same as in your <body> tag. Apparently this isn't compatible with older browsers, but who uses these older browsers anyway? Losers, and they're used to webpages looking kinda funny.
bgcolor - here's where you pick the background color of your cell. Love it! That's how I got the yellow and light brown for the table examples up top, of course.
colspan - we've covered that already.
align - this specifies where your text or image is in your cell. You can pick left, center, or right. If you leave it blank, it will default to left.
valign - this is the vertical alignment. You get top, center, and bottom. Default is center.
nowrap - this is used to prevent word-wrapping within a cell. I haven't really used this one before, but you never know.
<the <th> tag>
This is used in place of <td> for the header cells of the table. These work basically the same as <td>s, only the text in them is bold and centered.
<a full-fledged table>
<tr><td rowspan=3 bgcolor="#dbdbdb">
l<br>
e<br>
f<br>
t
</td>
<td bgcolor="#f5b5c0" align=center>
top
</td></tr>
<tr><td bgcolor="#ffffff">
<img src="../pix/rblack.gif" width=40 height=40 alt="arrow">
<img src="../pix/lred.gif" width=40 height=40 alt="arrow">
<img src="../pix/rblack.gif" width=40 height=40 alt="arrow">
</td> </tr>
<tr><td bgcolor="#f5b5c0" align=center>
bottom
</td></tr>
</table>
|
l e f t |
top |
| |
| bottom |
<table width=200 border=2 bordercolor="#DF0029" cellpadding=2 cellspacing=0>
<tr><td>1 CD</td><td>$1.25</td></tr>
<tr><td>1 LP</td><td>$1.75</td></tr>
<tr><td>1 DVD</td><td>$1.75</td></tr>
<tr><td>2 CD's</td><td>$1.75</td></tr>
<tr><td>1 or more books</td><td>$3.50</td></tr>
<tr><td>2 or more LP's</td><td>$3.50</td></tr>
<tr><td>2 or more DVDs</td><td>$3.50</td></tr>
<tr><td>3 or more items</td><td>$3.50</td></tr>
</table>
Shipping prices:
| 1 CD | $1.25 |
| 1 LP | $1.75 |
| 1 DVD | $1.75 |
| 2 CD's | $1.75 |
| 1 or more books | $3.50 |
| 2 or more LP's | $3.50 |
| 2 or more DVDs | $3.50 |
| 3 or more items | $3.50 |
Cool table tip: if you surround your entire page in a table and set its width and height to 99% (not 100%, which gives you a scrollbar), then do align=center and valign=center you can make sure your entire page is centered, no matter what size browser window people are viewing it with! This is my new favorite thing. The other thing you can do with the all-encompassing 99% table is to make sure images or text stay on the bottom of a browser window, which is pretty much impossible to do any other way.