To start a table, use the <TABLE> tag, to end a table, use the </TABLE> tag. No, that's not all :) There are quite a few attributes you can specify in a table:
- WIDTH - this can be given in pixels [not recommended if it's a large table] or as a percentage [the best way to specify a width, because it will automatically make use of your visitor's resolution]
Perhaps I should explain this a bit more. When you set a TABLE WIDTH, say, 600 pixels and your visitor's resolution is 480 pixels, your table will look absolutely hideous to them. If, however, you set a table width of 100%, your table will span the entire width of your visitor's browser window no matter what their resolution.
- CELLSPACING - this determines how many pixels there will be in between your table's data cells [we'll get to those shortly]
- CELLPADDING - this determines how much empty space will surround the text in your data cells.
- BORDER - this determines border size from 0 [no border] to 8 [border 8 pixels thick]
- ALIGN - this can be left, right, or center and it aligns your whole table where you want it to align. This attribute is not very well supported at this time, so just in case use the DIV element before and after the table.
- BGCOLOR - this sets a background colour for your table. This means you can have a block of text with a background different from that defined in the BODY tag of your document, using only a simple table.
So now you have specified all this neat stuff for the appearance of your table. Now you have to start a new table row. You do that by typing <TR> after your TABLE start tag. Now, you can add some attributes to the row that govern the way text will be aligned in the row's data cells:
- ALIGN - this aligns text horizontally [it can be left, right, or center]
- VALIGN - this aligns text vertically [it can be top, bottom, or middle]
You can override this alignment by specifying a different one within a data cell in that row [the attributes are the same] And remember, before you add any data cells, close the row by adding </TR>. Data cells will go in between the start and end tags for the row.
Remember this! You are not allowed to have any row or data cell tags hanging around without being closed, or outside the table.
So what are those elusive data cells? Well they're the places where your content will go. Hey, you can even make a new table within a data cell, and another table within *that* table's data cell.. and so on. You can nest as many tables as you want. How do you make a data cell? Just type <TD></TD> and all your content in between those two tags. Now, don't worry, I know all this is a mouthful, but I'l provide elaborate examples with code samples later on. Just hang in there :)
What else can you do with data cells? Well, you can override text alignment, as I mentioned before. You can also have a table whose data cells are all different colours by using the BGCOLOR attribute. It's usually a very good idea to specify the widths of your data cells using the WIDTH attribute, because that way you can ensure that they are equal in size - otherwise you might get a skewed-looking table.
There's a special kind of data cell called a header cell - <TH></TH> - when you type in a header cell, the text automagically turns bold.
If you want a data cell to span more than one column, you can use the COLSPAN attribute, specifying the number of columns the data cell should span. This number cannot, of course, be more than the number of columns you already have.
And finally, you can also specify a caption for your table - this is a line of text that describes your table [or does whatever you want it to do, really]. The tag to use is <CAPTION> and it must immediately follow the TABLE start tag; you cannot include it anywhere else. It will default to central alignment, which you can override using the ALIGN attribute and align it left or right. And yeah, you have to close the CAPTION tag too :)
Okay, well, I think we could all stand a few examples right about now, couldn't we :)
Getting started
Tables![[Home]](images/home.gif)
![[Previous page]](images/back.gif){kind=small}
![[Next page]](images/next.gif){kind=small}
