Main Page
Basic HTML
Advanced HTML
Images
Frames
Tables
Forms
Geo Quick Help
META Tags
Page Tips
ASCII Codes
Color (Hex) Codes
Links
Webrings
What's New
Contact Me
Feedback Form
Help Forum
|
Introduction to Tables
Tables can be very useful when making a page. You often see tables that are used to provide data of some sort. An example of this would be a multiplication table:
| X |
1 |
2 |
3 |
4 |
5 |
| 1 |
1 |
2 |
3 |
4 |
5 |
| 2 |
2 |
4 |
6 |
8 |
10 |
| 3 |
3 |
6 |
9 |
12 |
15 |
| 4 |
4 |
8 |
12 |
16 |
20 |
| 5 |
5 |
10 |
15 |
20 |
25 |
Another kind of table you may have seen is one that frames either an image or some text. Here's how it would look around text:
For those of you not familiar with tables, you might not know that this entire page is a table! The title graphic for the page is in a one cell (which actually spans two columns), the menu is in a cell, the main portion of the page is in a cell, and the footer test is in another two column spanning cell.
All tables consist of certain elements. Cells are the little squares and rectangles you see. In the example above, where you see the text framed, that is a one cell table. The multiplication table consists of lots of cells. You'll also see that the multiplication table has rows and columns. The rows go horizontally, and the columns go vertically.
The rest of this page will go more into depth about tables.
Back to index
Basic Table Layout
The following is a basic layout for a one celled table:
<TABLE>
<CAPTION>Caption text</CAPTION>
<TR>
<TD>Content of cell</TD>
</TR>
</TABLE>
Now let's break down each tag:
<TABLE>
- This tag starts the table.
<CAPTION>Caption text</CAPTION>
- This tag puts a caption above your table. It could be used for a title for your table. Replace where it says "Caption text" with the title of your table.
<TR>
- This tag signifies the start of a table row.
<TD>Content of cell</TD>
- These tags go around the centent of a cell. (Repeat these tags for as many columns are in your cell row.) Within these tags, you can use most text altering tags such as
<I>, <FONT>, etc. If the cell is meant to be a table header cell (usually ones along top and left side of table), replace the <TD> with <TH>. Putting <TH> and </TH> around the contents of a cell causes the cell text to be bold.
</TR>
- This tag ends the table row.
</TABLE>
- This tags ends the table code.
Back to index
Table Attributes
This section will discuss different attributes that can be used with <TABLE> tags.
- ALIGN
- This tag can be used with the
<TABLE> tag to determine the horizontal postitioning of the table. It can also be used in the <TD> tag to specify the positioning of the content of a cell. (Or in the <TR> tag to specify the cell content positioning for an entire row.) ALIGN is usually set equal to LEFT, RIGHT, or CENTER. When placed in the <TABLE> tag, it looks like this:
<TABLE ALIGN=CENTER>
- VALIGN
- This is used the same way as the ALIGN attribute, but it involves the vertical as opposed to the horizontal. VALIGN would be set equal to TOP, MIDDLE, or BOTTOM.
- BORDER
- This attribute determines a table's border size. It is set equal to a number. A small number creates a small border. For instance, the following one celled table has a border of 1:
A larger number makes a bigger border. This table has a border of 10:
Setting the border to 0 would make a borderless table. (This is good when using a table for page layout, such as on this page.)
- BORDERCOLOR
- This attribute is set equal to a color code, or just a name of a color (such as RED or GREEN). It determines the color of the table's border (unless the border is 0).
- WIDTH/HEIGHT
- These attributes are set equal to either a number or a percentage. When these attributes are added to the
<TABLE> tag, they determines the size of the entire table. WIDTH can be used in the first row of <TD> tags to set the widths of the columns for the whole table. Or you can use HEIGHT in the <TR> tag to set a row's height.
- CELLSPACING
- This attribute is set equal to a number. This determines the space in between cells.
- CELLPADDING
- This is also set equal to a number. It determines the amount of space in between the contents of a cell, and the border around the cell. This is probably confusing, so I will show this with a one celled table. The following table has a CELLPADDING of 1:
And this table has a CELLPADDING of 10:
Notice on the second table there is much more room between the text and the walls of the cell than there is in the first table.
BGCOLOR
- This is set equal to a color code or a color name. This attribute is fun to play around with. I don't think older browsers support this feature, but most people will be able to see it. By putting this attribute in the
<TABLE> tag, it sets the backgorund color for the entire table. Putting it in the <TR> sets a background color for just one row. Putting it in the <TD> sets a background color for just one cell.
BACKGROUND
- This attribute is set equal to a image file. You must pick an image file, and type it im like this: BACKGROUND="pic.gif" (replace the image name I typed in with your own filename of course). Then you add the attribute to the
<TABLE> tag to set a background for the entire table. (And just like the BGCOLOR attribute, you can add it to the <TR> to set a background color for just one row, or place it in the <TD> to set a background color for just one cell.)
COLSPAN/ROWSPAN
- These attributes are set equal to a number. This comes in handy if you want a cell to span more than one row or column. The number you'd set it equal to would represent how many rows or columns you want your cell to span. Here's an example of a cell spanning more than one column:
| This could be a title cell |
| Lions |
Tigers |
Bears |
- NOWRAP
- This turns off wordwrap in a cell. You can add it to a
<TD> tag.
Back to index
|
