Back to hTmL-hElPz~
:continuous updates:
Members:

Basic Tables:
MEETING AGENDA
 
Basic Tables:

Sunday, FEBRUARY 25, 2001

Tables and Resources

What are tables used for?
Tables are used to make data easier to interpret or to just give your document more impact.

CODE:
<table border=2> <tr> <th>What are tables used for?</th> </tr> <tr> <td>Tables are used to make data easier to interpret or to just give your document more impact.</td> </tr> </table>


Tables are one of the most challenging things to code with HTML. It isn't very hard, it just takes a while to get the hang of. Tables start with the <table> tag, and usually contain the border=n attribute within the opening tag. If the border=0, than the table's border is invisible. Usually when you do not use the border attribute the table border will become invisible. This is useful when you want to align text in rows and columns, but don't want a table border around it. border=1 is a thin border. border=2 is a little thicker, border=3 a little more thick.. and so on. The table MUST end with a </table&lgt; tag, or the table will not appear at all.

This table has a border of 0.
CODE:
This table has a border of 0.

This table has a border of 3.
CODE:
<table border=3> <tr> <td>This table has a border of 3.</td> </tr> </table>

Each row within the table is defined by the opening <tr> tag and the optional </tr> closing tag. Within each table row are table cells, which are defined by the <td>opening and </td> closing tags. Most table rows contain more than one cell. Many times, you will need a heading for a column of cells of the first row. To do this, you will use the <th> opening and </th> closing tag. The table heading tag makes the text in that cell BOLD and CENTERED. You only need use the heading cells when necessary.


Members:
MEETING AGENDA

Example of a table with multiple rows and columns...
Heading AHeading BHeading C
Cell ACell BCell C
Cell DCell ECell F

CODE: <table border=2> <tr> <th>font face="Verdana, Arial, Helvetica, sans-serif" size="1">Cell A</td><td><font face="Verdana, Arial, Helvetica, sans-serif" size="1">Cell B</td><td>Cell C</td> </tr> <tr> <td><font face="Verdana, Arial, Helvetica, sans-serif" size="1">Cell D</td><td><font face="Verdana, Arial, Helvetica, sans-serif" size="1">Cell E</td><td><font face="Verdana, Arial, Helvetica, sans-serif" size="1">Cell F</td> </tr> </table>

But what if you want your table to look like the following?

Heading AHeading BHeading C
Cell A & DCell BCell C
Cell ECell F

CODE: <table border=2> <tr> <th><font face="Verdana, Arial, Helvetica, sans-serif" size="1">Heading A</th><th><font face="Verdana, Arial, Helvetica, sans-serif" size="1">Heading B</th><th><font face="Verdana, Arial, Helvetica, sans-serif" size="1">Heading C</th> </tr> <tr> <td rowspan=2><font face="Verdana, Arial, Helvetica, sans-serif" size="1">Cell A & D</td><td><font face="Verdana, Arial, Helvetica, sans-serif" size="1">Cell B</td><td><font face="Verdana, Arial, Helvetica, sans-serif" size="1">Cell C</td> </tr> <tr> <td>

Notice how the rowspan=2 attribute was added. This allows that cell to span two rows. If you want a cell to span more than column, use the colspan=n attribute. Also, you may wish to use the ALIGN and VALIGN attributes to align the contents of cells. If you wish to change the horizontal alignment of the contents of a certain cell, add ALIGN=LEFT, ALIGN=CENTER, or ALIGN=RIGHT to the opening <td> tag. If you wish to change the vertical alignment of the contents of a cell, use the VALIGN=TOP, VALIGN=MIDDLE, or VALIGN=BOTTOM attributes. You may also want to try out the WIDTH=n% attribute, to change the width of a table or a cell.

Example of ALIGN attributes within a table...

CODE: <table border=1 width=100%> <tr> <td align=left><font face="Verdana, Arial, Helvetica, sans-serif" size="1">Left Alignment</td> <td align=center><font face="Verdana, Arial, Helvetica, sans-serif" size="1">Center Alignment</td> <td align=right><font face="Verdana, Arial, Helvetica, sans-serif" size="1">Right Alignment</td> </tr> </table>

Left Alignment Center Alignment Right Alignment

ALIGNING DATA
 In all previous examples, the position of the data within the cell has been left to the default settings. You can set the alignment of your data within each cell, using the ALIGN (horizontal alignment) and VALIGN (vertical alignment) attributes.ALIGN and VALIGN are attributes of the TD and TH tags.

align=left / align=center / align=right
The TH default setting is to the center of the cell.
The TD default setting is to the left of the cell.

valign=top / valign=middle / valign=bottom
The TH default setting is to the middle of the cell.
The TD default setting is to the middle of the cell.


td align=right
valign=bottom

If you do not specify the align or valign attributes, then the data will go to the default settings, which will be different depending on whether it is a TD or TH cell.

TH defaults:
align=middle
valign=middle

TD defaults:
align=left
valign=middle
TH Defaults 		th valign=top
th valign=bottom

TD Defaults
td valign=top
td valign=bottom

td align=center
valign=top
td align=center
td align=center
valign=bottom

td align=right
valign=top
td align=right



TR ALIGN
ALIGN is also an attribute of the TR tag.

Instead of specifying the alignment attributes within every cell in a table row, you can preset the alignment for the entire row by specifying ALIGN or VALIGN within the TR tag.

<tr align=right valign=bottom>
<td>data</td> ... etc ... etc ... etc


The alignment for the whole row has been specified in the TR tag.
data
data
data

*If your not sure how to take the code off of this page and onto your page. This is how you do it: take your cursor on your mouse and go the the beginning of the code. Left click down and hold it then dragover/highlight the code till the end. Let go of your mouse. Now the code will be highlighted. Hold down Ctrl & C key at the same time. Then go to your page and you will paste your background onto your page. Go where it says <body> and click your cursor to the left then release your mouse, then hold down the Ctrl & V key at the same time. Then Presto you have added your code. [If you have any problems feel free to contact me..]

©2001 WCM1 dezignz.