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 Column | Second Column |
| R1 C1 | R1 C2 |
| R2 C1 | R2 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.
