home / articles / html

The Complete Guide to Tables - part 1

    Having trouble aligning text or images on your web pages? Do you want to add organized charts or graphs to your pages? Then you need to learn tables. Tables are an easy but never-the-less important part of HTML. Tables let you break a page into many sections. They can also be used to create charts or graphs, position images, and confine text to a certain area on your pages. Tables are the closest and most widely supported means to get nearly absolute spacing ( until a standard for layers is accepted. ). Mainly tables consist of rows <tr> </tr> and table data or columns <td></td>. Lets make a simple table to demonstrate.

<table border="1"> <tr> <td>Row 1 Column 1 </td> <td>Row 1 Column 2 </td> </tr> <tr> <td>Row 2 Column 1 </td> <td>Row 2 Column 2 </td> </tr> </table>

    This code creates a table with a border width of 1 pixel with 2 rows and two columns on each row. Our tables should look something like this.

    You can make a column take two spaces by adding a colspan="x" ( where x = the number of cells you want column to occupy ) to the <td> tag like this <td colspan="2"> to make the cell take up two columns. The same can be done with rows using rowspan="x" in the <td> tag.

Now lets make another simple table to practice what we have just learned.

<table border="1"> <tr> <td colspan="2"> Row 1 Column 1 & 2 </td> <td rowspan="2"> Row 1 & 2 column 3 </td> </tr> <tr> <td>Row 2 Column 1 </td> <td>Row 2 Column 2 </td> </tr> </table>

Our table should look like this.

    Now that we can make table rows and columns with some proficiency lets talk about alignment.

Table Alignment

    Tables and the text or images inside their cells can be easily aligned vertically or horizontally by using the valign for vertically alignments and align for horizontal alignments. Align has five possible values you can use, values include: left, right, middle, center, and bottom. The valign tag has 3 possible values you can use; they are: top, middle, and bottom. Each of these can be added to a <table> or <td> tag like this <table align="center"> or <td align="left" valign="top">

Now let try making another table using everything we learned today. Lets set this table just one cell for this demonstration. Now lets align the table to the center of the page and the text in the table cell to the bottom right. The code would look like this:

<table align="center" width="200" height="200" border="1"> <tr> <td align="right" valign="bottom"> TEXT </tr> </table>

Now check your table and see if it matches mine.

    Those are the basic functions that you can do with tables. Practice those for a while and next week we will dive into some more intermediate and advanced features of tables.

Including:

• Absolute pixel spacing and its benefits
• Table Headers
• Cell spacing
• Cell padding
• Colored cells
• and Table borders

Author: Rich Stock
Date: [09/15/97]

More articles about HTML
More articles by Rich Stock
Author Biography