The Webmaster's Resource

Main Page Main Page

HTML Tutorials HTML

Design Tips Style

Promotion Tips Promotion

Links Links
      Web Rings
      Credits

Send the Webmaster E-mail Feedback
      Critique
      Sign In
      Guestbook



Sponsored by GeoCities
Get your
FREE web site!

  

<Tables>

 
To make a table for your web page you use the <TABLE> and </TABLE> tags. Using the BORDER attribute inside the <TABLE> tag allows you to control whether the borders of your table are visible or not.

A basic table has rows and cells. You define them using the <TR>, <TH>, and <TD> tags. Look at the following example:

<TABLE BORDER>
<TR>
<TH>Heading</TH>
<TD>Data #1</TD>
<TD>Data #2</TD>
<TD>Data #3</TD>
</TR>
</TABLE>

 Which gives you this:

Heading Data #1 Data #2 Data #3


Setting the BORDER attribute in this case turns the borders on. Setting BORDER=0 turns them off. Borderless tables are usefull if you want to use the table for text and graphics layout or positioning. The <TR> tags define the table row. The first cell in the row uses the <TH> tags to create the table heading. Table headings are in bold text. The other cells are normal text and are defined using the table data, <TD>, tags.

Empty Cells


Empty cells are a useful part of HTML. They are defined like this:

<TABLE BORDER>
<CAPTION ALIGN=TOP>Table</CAPTION>
<TR>
<TD><TD><!- This is the blank cell ->
<TD>2</TD>
</TR>
<TR>
<TD>2<TD>
<TD>4<TD>
</TR>
</TABLE>

Which gives us:

Table
2
2 4


Notice the blank cell in the upper left corner of the table. If you put a <BR> tag between the <TD> and </TD> tags there will be an empty cell instead of a blank one as in this example. Notice that the <CAPTION> tags give you a nice title for the table. The ALIGN attribute has a few possibilities. They are, TOP, which is the default, and BOTTOM. These work for most browsers, except Internet Explorer which uses VALIGN= for top and bottom alignment, and ALIGN=(LEFT, RIGHT, or CENTER) for aligning the caption horizontally.

Table Alignment

Table alignment and text wrapping work just about the same as with images. You use the ALIGN= attribute inside the <TABLE> tag and use the following arguments:

  • LEFT -- Aligns the table on the left and wraps text to the right of the table.
  • RIGHT -- You guessed it. This one puts the table to the right and wraps the text to the left.
  • There is no CENTER argument. However you can use the <CENTER> tags to center the table, but the text won;t wrap around the table.

    • Cell Alignment

    There are two attributes that control the alignment of data within the cell. They are ALIGN and VALIGN. The ALIGN attribute has three arguments. They are LEFT, CENTER, and RIGHT. Of course the control the placement of objects from left to right. VALIGN controls placement up and down with the following arguments, TOP, MIDDLE, and BOTTOM. The format is:

    <TD ALIGN=argument VALIGN=argument>DATA</TD>

    You may use the ALIGN and VALIGN attributes inside the <TR> tag to align an entire row. However, the attributes inside the <TD> tags will over ride them.

    Combining cells to make Headings

    You can make a heading row on top of your table or anywhere else in your table by using the COLSPAN or ROWSPAN attributes. Check this out.

    Example Table
    Heading #1
    Heading #2 Data#1 Data#2
    Data#3 Data#4

    Here's the code for the above table:

    <table border>
    <caption>Example Table</caption>
    <tr>
    <th></th>
    <th colspan=2>Heading #1</th>
    </tr>
    <tr>
    <th rowspan=2>Heading #2</th>
    <td>Data#1</td>
    <td>Data#2</td>
    </tr>
    <tr>
    <td>Data#3</td>
    <td>Data#4</td>
    </tr>
    </table>

    Links and Graphics in Your Table

    You can put any graphic or link into a table, like this:

    <table border>
    <caption>Please visit this cool site</caption>
    <tr>
    <td><a href="http://gcip.net/pcumcfaul/"><img width=60 height=76 border=0 src="mcfaul_seal_icon.gif"></a></td>
    <td><a href="http://gcip.net/pcumcfaul/">PRECOM UNIT McFAUL (DDG 74)</a></td>
    </tr>
    </table>

    Which looks like this:
    Please visit this cool site
    [DDG 74 Seal] PRECOM UNIT McFAUL (DDG 74)

    I had to get in one more plug for my ship.

    Table Odds and Ends

    The <br> tag and the NOWRAP attribute are helpfull if you have cells in your table with long text and want to control the way the text is broken up in the cell.

    This is a long string of words broken automatically by your browser This is a long
    string of words
    broken with
    the <br> tag    		 This string uses NOWRAP in the <TD> tag


    Cell Spacing is the width of the lines that make up the table grid. It is controled by the CELLSPACING attribute inside the <TABLE> tag.

    Border width is controlled by the number after the BORDER attribute inside the <TABLE> tag.

    Cell padding is the distance between the object in the cell and the cell border. Its attribute is CELLPADDING and it goes in the <TABLE> tag.

    Cell color can be varied by including the BGCOLOR attribute in the <TH> or <TD> tags.



    Playing with attributes example
    Border is 10 Cell Spacing is 15
    Cell Padding is 15 Color is Red


         To learn more about HTML, Site Design and Management, check out the books in my Book Store.

    Back Main Page Next
        Copyright © 1997 by Jim Meeker
        E-mail: jim314@oocities.com    ICQ: 724480
    Updated on: 1/17/98 21:11:34 CST