HomeSitemapForumsLessons  

HTML Lesson 3

Tables

Anyone who has managed an MSN Group quickly learns that if they want a site that looks good they have to somehow use tables to give their custom pages backgrounds. Unfortunately, those who have been in the position of helping others to learn about tables has fallen into the habit of providing an easy way out instead of taking the time and patience to teach someone how to create the tables themselves. Far too many have provided templates and generators instead of giving of themselves to teach the individuals how to create their tables. Even I have gone and took the lazy way out many times. Offering to create pages, making templates, but I learned that this is not truly helping the other person, it is instead hindering their ability to learn how to do it for themselves.

The real reward is taking the time to walk a person through each step to creating their first page. To watch and let them struggle with the small details that mean so much to the outcome of a page. To feel their excitement when that one thing that they struggled with has finally been beaten. To know that you have taught someone something that they can be proud of because they have conquered something that they never dreamed they would ever accomplish. When you won't let them give up because giving up means you have failed to teach them something that is so vital to a successful page. It is then that you can say, I have contributed to this person and I have helped them be a success, and it was worth every second I put into it. That is the true reward, the satisfaction of knowing that you contributed to the success of another.

Personally speaking I would never want to have to build tables in a text editor. The building of a table is so complex that the use of a web editor and the ability to switch back and forth from the HTML to the Browser to the web editor window makes building tables so much easier than coding a table manually.

Below you will find the HTML tags and attributes that are used to build tables.

First your basic tags used are as follows:

<TABLE> </TABLE> These are the tags that tell the browser that a table is about to start and where it will end. The table tag can have attributes added to it to compliment the table's appearance.
<TH> </TH> These tags are start and end tags for the column headings with a table.
<TR> </TR> These are the start and end tags for creating rows within the table.
<TD> </TD> These are the start and end tags for creating the columns within the table
The above tags is what creates a basic table without any attributes.
<CAPTION> </CAPTION> You can use these tags to create a title for your table. Only one caption tag is allowed per table.

 The coding to make your basic table using all of the tags above would be coded as follows:

<TABLE><CAPTION>Your Basic Table</CAPTION>
<TR>
<TH>First Column</TH><TH>Second Column</TH>
</TR>
<TR>
<TD>R1 C1</TD><TD>R1 C2</TD>
</TR>
<TR>
<TD> R2 C1</TD><TD>R2 C2</TD>
</TR>
</TABLE>

And the coding above would make the table seen below.

Your Basic Table
First ColumnSecond Column
R1 C1R1 C2
R2 C1R2 C2

Adding Attributes to your table

This is where creating tables becomes so complex, there are so many attributes that can be added to your table to create a an effect that is eye catching and therefore keeps the viewers interested. I will start with the attributes that cover the entire table then go on to individual cell attributes.

Table Attributes

Borders The default border is zero leaving no border as shown in the table above. You can create a border for your table any size you wish, but you do want to make it look nice. The attribute for border is BORDER="5" with the 5 being whatever number you prefer. The table tag with the border attribute would look like <TABLE BORDER="5"> You can also add color to your border but it is browser specific, not all browsers support the colored border. Also with the colored border you can create a light and dark border giving it a 3D effect. A table given all of these attributes would be coded as follows:

<TABLE BORDER="5" BORDERCOLOR="#111111" BORDERLIGHT="#C0C0C0" BORDERDARK="#808080">

Width seems to be an attribute that is hard for the new user to understand. Using the width attribute you can determine the width of the table so that it can expand across the whole page or a smaller width. Width can be determined in both pixels and percentage. Adding the attribute to the table tag would look like <TABLE WIDTH="100%"> or <TABLE WIDTH="200">

Height can also be added to the table if you wish. This is not an attribute that is used often but it can be used. The coding for it would look like <TABLE HEIGHT="100%"> or <TABLE HEIGHT="300"> Again you can use either percentage or pixels.

Background Color will add background color to your entire table. You can choose to do this or choose to add different colors to cells discussed later, or you can do both. Adding the attribute to the table tag would look like <TABLE BGCOLOR="##EFEFEF"> You can also add an image as the background to your table, to accomplish this your code would look like <TABLE BACKGROUND="url to your image">

Cellpadding With cellpadding you will set the  amount of space between the border and the contents within a cell. The tag and attribute will look like <TABLE CELLPADDING="20">

Cellspacing With cellspacing you will set the amount of space between the cells in a table. The tag and attribute will look like <TABLE CELLSPACING="20">

Alignment This will align the entire table on the page, left, right or center. The tag and attribute will look like <TABLE ALIGN="CENTER">

Below you will see the code used to produce the table shown after the code.

<TABLE BORDER="10" CELLPADDING="5" CELLSPACING="5" BORDERCOLOR="#111111" WIDTH="50%" BORDERCOLORLIGHT="#0000FF" BORDERCOLORDARK="#000080" BGCOLOR="#A7C5CD" HEIGHT="50" ALIGN="CENTER">
<TR>
<TD WIDTH="33%"> </TD>
<TD WIDTH="33%"> </TD>
<TD WIDTH="34%"> </TD>
</TR>
<TR>
<TD WIDTH="33%"> </TD>
<TD WIDTH="33%"> </TD>
<TD WIDTH="34%"> </TD>
</TR>
<TR>
<TD WIDTH="33%"> </TD>
<TD WIDTH="33%"> </TD>
<TD WIDTH="34%"> </TD>
</TR>
</TABLE>

If you changed the BGCOLOR in the above and added the background="images/backgrnd.jpg" (using an image in the AMM web) you will see the same table as above only with a background as shown below.

Cells

Even cells have attributes that will change the way a table will be displayed. Below you will find the tags and attributes that are used to design the individual cells of a table.

Alignment you can align your content in a cell vertically or horizontally or both. When aligning horizontally the attributes will be left, right or center; when aligning vertically the attributes will be top, bottom or middle. The tag and attributes for these are <TD ALIGN="CENTER" VALIGN="MIDDLE">

Width and Height are used in the same manner as width and height for the table. Again height is not an attribute used often. The tag and attributes for these are <TD WIDTH="25%" HEIGHT="25%"> or <TD WIDTH="100" HEIGHT="100">

Cell Span is  joining cells together to make a larger cell. You can join cells horizontally, vertically, or both. The tag and attribute for horizontal cell span is <TD COLSPAN="2"> with the 2 making the column spread across two columns and the tag and attribute for the vertical cell span is <TD ROWSPAN="2"> with the 2 making the row spread across two rows.

Background You can add a colored background or an image to each individual cell within a table. To create a background color you would use this coding <TD BGCOLOR="##EFEFEF"> and to add a background image you would use this coding <TD BACKGROUND="url to your image">

Taking the same table as shown under table attributes without the background. Below you will see

<TABLE BORDER="10" CELLPADDING="5" CELLSPACING="5" BORDERCOLOR="#111111" WIDTH="50%" BORDERCOLORLIGHT="#0000FF" BORDERCOLORDARK="#000080" BGCOLOR="#A7C5CD" HEIGHT="50" ALIGN="CENTER">
<TR>
<TD WIDTH="75%" COLSPAN="2" BGCOLOR="#EFEFEF" ALIGN="CENTER" VALIGN="TOP"> </TD>
<TD WIDTH="34%" ROWSPAN="2" VALIGN="BOTTOM"> </TD>
</TR>
<TR>
<TD WIDTH="33%" ROWSPAN="2"> </TD>
<TD WIDTH="33%"> </TD>
</TR>
<TR>
<TD WIDTH="33%"> </TD>
<TD WIDTH="34%"> </TD>
</TR>
</TABLE>

This cell is spanned over two columns and the background color has been changed and has been horizontally aligned to center and vertically aligned to the top. This cell is spanned over two rows and vertically aligned to the bottom of the cell
This cell is spanned over two rows This cell has no extra attributes
This cell has no extra attributes This cell has no extra attributes

And finally any content that you add to the cell you will have to format as shown in the previous lessons.

 

   Site Map

    Copyright 2001-2005 Margaret Walker