Beyond Basics – Tables



Tables are your friends. They help to keep the elements in a webpage aligned. You can use them to align pictures, text, links, pretty much anything you want. I use them in many of my webpages, including here on this page.

Tables are also pretty flexible. You can have a border around them or set a background within them. You can use them like a spreadsheet, keeping everything within its own cell. These cells can contain almost anything, pictures, text, links, just about anything you want.

The first few times that you set up tables in your web pages I would suggest that you use a table generator. Copy and paste the code into a text file and save it with a name that will tell you what it is such as table with header or 3 column table or anything that you will remember. Any time you need a table with those attributes you will now have a quick way to copy and paste them into your web page using just a text editor. Make sure you use a placeholder to distinguish each individual cell, this can be text or numbers or the alphabet. This way if you open up the page in a wysiwyg editor you will know where each cell is. Place this holder between the <td> and </td> tags.

Here is a list of table attributes and what they do:

Tables:

  • <TABLE attribute1="..." attribute2="...">...< /TABLE>
    Creates a table that can include any number of rows.

      Attributes:

    1. BORDER="..."--Specifies the width of the border around the table. If set to 0, there will be no border.

    2. BACKGROUND="..."--Specifies the address of an image to be tiled as background.

    3. BGCOLOR="..."--Specifies the background color of the table.

    4. BORDERCOLOR="..."--Specifies the border color of the table.

    5. BORDERCOLORLIGHT="..."--Specifies the lighter color used in creating the 3D borders independently.

    6. BORDERCOLORDARK="..."--Specifies the darker color used in creating the 3D borders independently.

    7. WIDTH="..."--Specifies the width of the table on the page.

    8. CELLSPACING="..."--Specifies the amount of space between the cells in the table.

    9. CELLPADDING="..."--Specifies the amount of space between the edges of the cell and the text inside.

    10. FRAME="..."--Specifies which sides of the outer border of the table are displayed.

        Possible types:

      1. VOID--No outside borders are displayed.

      2. ABOVE--Displays a border on the top side of the table.

      3. BELOW--Displays a border on the bottom side of the table.

      4. HSIDES--Displays the top and bottom borders of the table.

      5. LHS--Displays the left-hand side border.

      6. RHS--Displays the right-hand side border.

      7. VSIDES--Displays the right and left side borders.

      8. BOX--Displays a border on all sides of the table.

      9. BORDER--Displays a border on all sides of the table.

    11. RULES="..."--Specifies which inner borders of the table are displayed.

        Possible types:

      1. NONE--No inside borders are displayed.

      2. GROUPS--Displays inner borders between the various table groups such as THEAD, TFOOT, TBODY, and COLGROUP groups.

      3. ROWS--Displays inner borders between the table rows.

      4. COLS--Displays inner borders between the table columns.

      5. ALL--Displays inner borders between all rows and columns.

  • <CAPTION attribute1="...">...< /CAPTION>
    Specifies the caption of the table.

      Attributes:

    1. ALIGN="..."--Specifies the position of the caption. Possible values are LEFT, RIGHT, BOTTOM, or TOP.

  • <TR attribute1="..." attribute2="...">...< /TR>
    Specifies a table row. It can enclose the table heading and table data.

      Attributes:

    1. ALIGN="..."--Specifies the horizontal alignment of the row contents. Possible values are LEFT, RIGHT, and CENTER.

    2. BGCOLOR="..."--Specifies the background color for the row.

    3. BORDERCOLOR="..."--Specifies the border color of the row.

    4. BORDERCOLORLIGHT="..."--Specifies the lighter color used in creating the 3D borders independently.

    5. BORDERCOLORDARK="..."--Specifies the darker color used in creating the 3D borders independently.

    6. VALIGN="..."--Specifies the vertical alignment of the row contents. Possible values are TOP, MIDDLE, BOTTOM, and BASELINE.

    7. HEIGHT="..."--Specifies the height of the cell.

  • <TH attribute1="..." attribute2="...">...< /TH>
    Makes the cell a table heading.

      Attributes:

    1. ALIGN="..."--Specifies the horizontal alignment of the cell contents. Possible values are LEFT, RIGHT, and CENTER.

    2. NOWRAP--Prevents word wrapping within the cell

    3. BGCOLOR="..."--Specifies the background color for the cell.

    4. BACKGROUND="..."--Specifies the address of an image to be tiled as background.

    5. BORDERCOLOR="..."--Specifies the border color of the cell.

    6. BORDERCOLORLIGHT="..."--Specifies the lighter color used in creating the 3D borders independently.

    7. BORDERCOLORDARK="..."--Specifies the darker color used in creating the 3D borders independently.

    8. VALIGN="..."--Specifies the vertical alignment of the cell contents. Possible values are TOP, MIDDLE, BOTTOM, and BASELINE.

    9. ROWSPAN="..."--Specifies the number of rows the cell will span.

    10. COLSPAN="..."--Specifies the number of columns the cell will span.

    11. WIDTH="..."--Specifies the width of the cell.

    12. HEIGHT="..."--Specifies the height of the cell.

  • <TD attribute1="..." attribute2="...">
    These go inside the TR tags and they define the data in a cell. End tag may be used.

      Attributes:

    1. BACKGROUND="..."--Specifies the address of an image to be tiled as background.

    2. BGCOLOR="..."--Specifies the background color for the individual cell.

    3. BORDERCOLOR="..."--Specifies the border color of the cell.

    4. BORDERCOLORLIGHT="..."--Specifies the lighter color used in creating the 3D borders independently.

    5. BORDERCOLORDARK="..."--Specifies the darker color used in creating the 3D borders independently.

    6. ALIGN="..."--Specifies the horizontal alignment of the cell contents. Possible values are LEFT, RIGHT, and CENTER.

    7. NOWRAP--Prevents word wrapping within the cell

    8. VALIGN="..."--Specifies the vertical alignment of the cell contents. Possible values are TOP, MIDDLE, BOTTOM, and BASELINE.

    9. ROWSPAN="..."--Specifies the number of rows the cell will span.

    10. COLSPAN="..."--Specifies the number of columns the cell will span.

    11. WIDTH="..."--Specifies the width of the cell.

    12. HEIGHT="..."--Specifies the height of the cell.

  • <COLGROUP attribute1="..." attribute2="...">
    Specifies the properties of one or more columns. This tag generally goes right after the opening TABLE tag.

      Attributes:

    1. ALIGN="..."--Specifies the position of the text within the cells of the Columns. Possible values are CENTER, LEFT, RIGHT, BOTTOM, or TOP.

    2. SPAN="..."--Specifies the number of columns for which these attributes will apply.

  • <COL attribute1="..." attribute2="...">
    Used with the COLGROUP tag, this specifies the properties of one column. This tag overrides any attributes specified in the COLGROUP tag that comes right before it.

      Attributes:

    1. ALIGN="..."--Specifies the position of the text within the cells of the Column. Possible values are CENTER, LEFT, RIGHT, BOTTOM, or TOP.

    2. SPAN="..."--Specifies the number of columns for which these attributes will apply.

  • <TBODY>...< /TBODY>
    Encloses the body of your table. This tag is optional unless you are using the THEAD or TFOOT tags. It used to separate the rows in the table from those in the header or footer.

  • <TFOOT>...< /TFOOT>
    Encloses the table rows that are to be used as a footer. It is an optional tag and comes right after the ending TBODY element.

  • <THEAD>...< /THEAD>
    Encloses the table rows that are to be used as a header. It is an optional tag and comes before the opening TBODY element.