Welcome to my Crash Course for making Tables!

Playing around with tables can be a lot of fun, once you know the basics. Experimentation is the best way to really learn the ins and outs of making tables. All you need to know are a couple rules, and you'll be ready to go!

Let's Begin!

All tables have three basic elements.
These are created by using specific HTML "table" tags, which come in pairs:

      <table> and </table> to set up your table
      <tr> and </tr> to create rows
      <td> and </td> to create columns or cells

Some people like to use a fourth element - the heading tag <th> </th>, which is used to add a title or heading to your table. It is used in the same way as the <td> tag, but adds a special emphasis to the text inside it.

The first tag of any table is <table> - without this, you have no table.
Naturally, then, the last tag of any table is always </table>. Like my Mom always said - If you open it, close it!
All the rest of the coding for your table goes between these two tags, in a specific order.
Let's see if I can draw a "picture" of basic table structure...

        <table>
            <tr> (first row)
                <td> first row/first column </td>
                <td> first row/second column </td>
            </tr> (end of first row)
            <tr> (second row)
                <td> second row/first column </td>
                <td> second row/second column </td>
            </tr> (end of second row)
        </table> (end of table)

The above would be a table with two rows and two columns, for a total of four cells.
You may add as many rows and columns as you wish.
Looking at the example, you should note that the elements in the table are all nested, which means
that each element is enclosed within another. The order for closing the elements is important.
If you open in this order: <table> <tr> <td>
Then you must close in this order: </td> </tr> </table>

A Quick Example

With the addition of a few "attributes", you can customize your table.
Add borders, colors, define the size of your table, align your text, and so on.
The code below produces the table beside it...

Customize Your Table

Tables are really very versatile, once you've had a bit of practice.
Continue to Table Attributes for a listing of some of the codes used to customize your table.
Experiment with as many of these attributes as you can to get a good idea of what each one does.
Most of all, have fun with it!


Questions or Comments? - E-mail Me

Related reading, available at Barnes and Noble...

HTML 3 how-to: The Definitive HTML Problem-Solver
Web Publisher's Constuction Kit with HTML 3.2: Publishing Your Own HTML Pages on the Internet
HTML Web Publisher's Construction Kit: Publishing Your Own HTML Pages on the Internet
Hybrid HTML Design: A Multi Browser HTML Reference
Instant HTML Help
HTML Help Unleashed
HTML 3 Interactive Course: Master HTML and Earn a Certificate of Achievement
HTML SourceBook: A Complete Guide to HTML 3.2 & HTML Extensions

mikki's site map