Table

HTML Tutorials

Tables: How to Organize Data on Your Web Page

Back to Home Page Back to HTML Tutorials Home Page

Tables are one of the best ways to organize data. They are versatile and can accept most any HTML tag. Experiment! Below are just a few ideas to get you started.

Here is the Basic Idea:

<TABLE>

<TR>

<TD></TD>

<TD></TD

</TR>

</TABLE>

You can have as many table rows or table data (cells) that you like. In fact, If you want to get fancy, you can put a second table inside one of the cells.

Explanation of a few table related codes:

<TABLE BORDER = 2, BGCOLOR = "lightblue"> This tag will begin the table, give the table a border 2 pixels wide, and cause the table to have a light blue background.

<CAPTION ALIGN CENTER> Use this tag if you want a label on top of your table.

<TR> This tag begins a new row.

<TH> TH stands for table heading. Some tables need to have a heading for each column.

<TD> This is the tag that allows you to enter table data. It creates the individual cells in which you will place your data. You may notice that two of the cells contain pictures.

Click here if you would like to see the table

<HTML>
<HEAD>
</HEAD>
<BODY>

<CENTER>
<TABLE BORDER = 2, BGCOLOR = "lightblue">

<CAPTION ALIGN = CENTER> A Table of Musical Instruments </CAPTION>

<TR>
    <TH> <FONT COLOR = "red"> Instrument </FONT> </TH>
    <TH> Type </TH>
    <TH> Sound </TH>
    <TH> Picture </TH>
</TR>

<TR>
    <TD> Lead Guitar </TD>
    <TD> String </TD>
    <TD> Most versatile producer of tones </TD>
    <TD> <IMG SRC = "guitar.gif"> </TD>
</TR>

<TR>
     <TD> Bass Drum </TD>
    <TD> Percussion </TD>
    <TD> Sets the basic rhythm and tempo </TD>
    <TD> <IMG SRC = "bass_drum.gif"> </TD>
</TR>

</TABLE>
</CENTER>

</BODY>
</HTML>

Here are some more table codes to try:

Of course, you can combine, mix, and match all you like. The pixel values can be from "0" to anything you like.

Try these codes inside the <TABLE>, <TR>, or <TD> Tags. I am using <TABLE> as an example.

<TABLE BORDER = "3"> The "3" means three pixels wide.

<TABLE CELLSPACING = "5"> Cellspacing gives you room between cells. "5" means 5 pixels.

<TABLE CELLPADDING = "4"> Cellpadding gives you a buffer (padding) inside the cell.

<TABLE FRAME = "????"> You can replace the question marks with the following: "above", "below", "void", etc.

<TABLE RULES = "????"> You can replace the question marks with: "rows", "cols", & "none"

<TABLE WIDTH = "60%"> Best to use % and not pixels. That way the table will adjust to the size of the screen. You can use any percent you like up to 100%. If you want to use this command with <TD>, the % will mean "percent width of the table" and not the width of the screen.

<TABLE HEIGHT = "40%> Again, better to use % and not pixels.

<TABLE ALIGN = "LEFT"> You can also use "CENTER" and "RIGHT".

<TD VALIGN = "TOP"> This will help align the data inside your table. You can also use "CENTER" or "BOTTOM".

<TABLE BGCOLOR = "RED"> Of course, you can use this inside the <TR> and <TD> tags.

<TABLE BORDERCOLOR = "GREEN"> This can also be used for individual <TR> and <TD> tags.

<TABLE BACKGROUND = "picture.gif"> You can also put pictures inside of cells. <TD>

<TABLE BORDER = "10" BORDERCOLOR = "BLUE" BORDERCOLORLIHGT = "#B2B2FF"> Try this and see what happens.