[Basics I] [Basics II] [Emailing] [Graphics] [Lists] [Tables] [Linking] [Marquee] [Backgrounds] [Music] [Email Me] [Home]
Zog’s HTML Made Easy
Everything you need to know to create HTML Tables
TABLE TAGS AND DEFINITIONS
HOW TO ALIGN YOUR TEXT WITHIN THE TABLE
FORMAT (SIZE, SHAPE, & COLOR) YOUR TABLE
CHANGING YOUR FONT STYLE, COLOR, AND SIZE
COLSPAN AND ROWSPAN TAGS
ADDING IMAGES TO YOUR TABLE


TABLE TAGS AND DEFINITIONS
  • If you are planning having a complicated Web-Page I suggest working with Tables. Tables can let you align your text and images on your web-page without having to have everything in the center, left, or right. Tables let you put your text and images next to each other.
  • ALL TABLES start with a <table> tag and end with the </table> tag.
  • TABLE ROW is an individual row that contains at least one data cell. To open a table row use the tag <tr>. To close the Table Row use the tag </tr>.
  • TABLE DATA CELL is an an individual cell in a table row. To open a Table Date Cell use the tag <td>. To close the Table Date Cell use the tag </td>.
  • TABLE HEADER CELL looks like <th>. It is almost the same as <td>. But it is easier to use the <th> table header tag to put “headings” on your table. The DEFAULT format will be in bold and centered. Then Always close with a </th> tag.
RETURN TO THE TOP
RETURN HOME


ALIGNING TEXT
  • ALIGN: Add an “Align” tag to align your text horizontallywithin your table, data cell, or row. If you don't add it, your text or image will DEFAULT to the left.

    Try these tags:
    align=left
    align=center
    align=right

  • VALIGN: Add a “Valign” tag to aligns your text vertically within your table, data cell, or row. If If you don’t add it, your text or image will DEFAULT to the center.

    Try these tags:
    valign=top
    valign=middle
    valign=bottom
RETURN TO THE TOP
RETURN HOME


FORMAT (COLOR, SIZE, AND SHAPE) YOUR TABLE
  • BGCOLOR: Add a “Bgcolor” to your table tag change the background color, table data cells, or table rows different colors.
  • BORDER: Add a “Border” table tag can help you specify the thickness or the border around your table (or whether you do not want a border at all.
  • CELLPADDING: Add a ”Cellpadding” tag to set the margins inside of your table data cells on all 4 sides of your data cell.
  • CELLSPACING: Add a ”Cellspacing” tag to set the spacing between your table data cells.
  • BORDERCOLOR: Bordercolor” tag will set the color of the border around the table.

  • Here is an TABLE EXAMPLE using these codes:
    <table border=4 bordercolor="black">
    <tr>
    <td bgcolor="#8B008B">#1</td>
    <td bgcolor="#FF0000>#2</td>
    </tr>
    <tr>
    <td bgcolor="#00FF00">#3</td>
    <td bgcolor="#00CCFF">#4</td>
    </tr>
    </table>

    This is what it will look like:
    #1 #2
    #3 #4


  • TABLE WIDTH: If you want you can also control the width of your table with the width attribute. Substitue your own number in “%”:

    <table border=5 bordercolor="crimson” width="65%">

  • TD and TH WIDTH: You can also set the width of each individual “table date cell(s)”.
    You only need to specify the “table data cell width” for each cell in the first Table Row only. The subsequent data cells will take the width value of the the first row of data cells.
    Substitue your own number in “%”:

    <table border=5 bgcolor="white” width="55%">

    <td width="33%">Cell #1</td>
    <td width="33%">Cell #2</td>
    <td width="33%">Cell #3</td>
    </tr>
    etc…

  • BORDERCOLORLIGHT: Use the bordercolorlight=”#yourcolor” and bordercolordark=”#yourcolor” to define the actual colors of the top/left border color and the right/bottom border color of your table.

    Note that this is ONLY supported by the newer versions of Internet Explorer Browswers (not Netscapre). So I suggest to also include the basic bordercolor tag.

    Here is an example:
    <table border=1 bgcolor="crimson" border=2 bordercolordark="crimson" bordercolorlight="blue" bordercolor="blue" cellpadding=1>

  • Try substituting different colors and border widths to get the table exactly how you like it. IF YOU DO NOT WANT A BORDER, THEN BORDER=O.

RETURN TO THE TOP
RETURN HOME


CHANGING YOUR FONT
  • If you want to change the FONT of your table you will have to specify the font style and/or size within EACH table date cell.

    For example:
    <table>
    <tr>
    <td font face="Arial" size=3>Date Cell Text</font> </td>
    etc….

  • You can change the font size and style of your table to anything you want. I suggest using some of the common styles, because the viewer of your web page will only be able to see your font face if they have that font style installed on his/her computer.
RETURN TO THE TOP
RETURN HOME


COLSPAN AND ROWSPAN
  • ROWSPAN: Adding “ROWSPAN” will create a column that spans as many rows as you want vertically. ROWSPAN is an attribute of the TD and TH tags.

    Here is an example:
    <table>
    <tr>
    <tdcolspan=4>Takes up 4 rows> </td>
    </tr>
    etc...

  • COLSPAN: Adding “COLSPAN” will create a table row that will span as may columns as you want horizontally. COLSPAN is an attribute of the TD and TH tags.

    Here is an example:
    <table>
    <tr>
    <td rowspan=4>Takes up 4 columns</td>
    </tr>
    etc...
RETURN TO THE TOP
RETURN HOME


ADDING IMAGES TO YOUR TABLE
  • Within the table tag (<table>) add background="yourbackground.gif."
    Your image (in .gif or .jpeg format) will fill our whole table.

    Here is an example:
    <table background="yourimagehere.gif">

RETURN TO THE TOP
RETURN HOME


Created by
Zog's Web Design
Resides on Yahoo!
Yahoo! Rights Apply