Introduction to Tables
Tables are a necessity for any professional web designer. Without tables, pages are often very disorganized, or very ordinary. By using tables, sites can be organized logically and information can be displayed in a uniform way. To create a simple table, you must begin by using the <TABLE> container tag. This tag also has several attributes that you will find to be extremely important. We will cover those attributes soon. First, we will discuss the basic structure of a table.
Tables are divided into rows and columns. They are reminiscent of charts or graphs you see often with vertical and horizontal lines. Each box within the lines is called a cell. With HTML, you can create rows, columns, cells, and table headers. Table headers are the same as any other cell, only they are usually centered and displayed in a bold font.
The tags are as follows:
- <TH> - Table Header
- <TD> - Table Data (or Cell)
- <TR> - Table Row
Note: All three of these tags are container tags which indicates that a corresponding closing tag is also required (some browsers will ignore a left off closing tag).
Here is an example of a basic table:
<HTML>
<HEAD>
<TITLE>Creating Tables</TITLE>
</HEAD>
<BODY>
<B>Students Enrolled</B>
<TABLE BORDER="1">
<TR>
<TH>Males</TH>
<TH>Females</TH>
</TR>
<TR>
<TD>48%</TD>
<TD>52%</TD>
</TR>
</TABLE>
</BODY>
</HTML>
View code in browser
Here are some important points to remember when designing tables:
The <TD> and <TH> tags are required to input data.
They both define a cell, <TH> being a header cell, and
<TD> being a data cell.
The <TR> tags defines the table layout.
It has nothing to do with the data inside.
The following is a way to make the above table a little more interesting:
<B>Students Enrolled</B>
<TABLE BORDER="1">
<TR>
<TD WIDTH="40"> </TD>
<TH>Males</TH>
<TH>Females</TH>
</TR>
<TR>
<TD WIDTH="40"> </TD>
<TD>48%</TD>
<TD>52%</TD>
</TR>
</TABLE>
View code in browser
We put a <TD></TD> before the table headers, and before the table data. When you insert an empty <TD> tag, it creates a blank cell.This is a good technique for organizing your table, however it doesn't look very good with a border.So, we put a (which is a non-breaking space). We did this simply to have some content in our blank cells. And, to top it off, we gave the cells some width, 40 pixels.
Back to top
<TR> and <TD> have many alignment options. These alignment options align the contents inside the table. There are three choices for the ALIGN attribute:
- Left - Aligns the contents to the left
- Right - Aligns the contents to the right
- Center - The contents are centered
In addition to standard alignment, table cells can be vertically aligned. This is done with the VALIGN attribute. Here are three options for the VALIGN attribute:
- Top - The contents rest on the top of the cell
- Middle - The contents remain in the middle of the cell (this is the default)
- Bottom - The contents rest on the bottom of the cell
For the next example, we'll place an image in a table cell using the following code:
<TABLE WIDTH="100" BORDER="1">
<TR>
<TD ALIGN="center" VALIGN="top" HEIGHT="150">
<img src="images/fredlogo.gif" width="141" height= "150"></TD>
<TD ALIGN="left" VALIGN= "BOTTOM"HEGHT="150">
<img src="images/fredlogo.gif" width="141" height= "150"></TD>
<TD ALIGN="RIGHT" HEIGHT="150">
<img src="images/approved32.gif" width="131" height= "40"></TD>
</TR>
</TABLE>
View code in browser
Don't worry if you didn't follow that. We're going to break it down in the next section.
Back to top
Now let's try to add a row to the last example. To add another row we should just be able to add a <TR> </TR> tag and be done with it, right? Nope. We still have to define each cell individually, so we have to use three more <TD> tags. This is where people start having some difficulty with tables, so we'll break down the code even further:
<TABLE WIDTH="100%" BORDER="1">
This is the table definition. All this says is that our table will span the entire screen and has a border of 1 pixel. In order to complete the table, we must add and format the rows and cells.
<TR> (This tag turns on the first row.)
<TD ALIGN= "center"VALIGN="top"HEIGHT="150">
This defines the first cell of the table. This tag
says that the text or graphics will be center aligned,
vertically aligned on the top, and the entire cell has a
height of 150 pixels. If we closed the table here
(with </TR> and </TABLE>) we would have a
one cell table.
<img src="images/fredlogo.gif" width="141" height="66">
This is the contents of the first cell, an image.
</TD> (This closes the first cell.)
<TD ALIGN="left" VALIGN="bottom" HEIGHT="150">
This opens a new cell and defines it. As of now, we
have 2 columns. The data inside this cell will be
aligned to the left and to the bottom.
<img src="images/fredlogo.gif" width= "141"height="66">
This is the contents of the second cell, or the
second column of the first row.
</TD> (This closes the second cell, or
second column of the first row.)
<TD ALIGN="right" HEIGHT= "150">
This opens a new cell and defines it. As of now, we have
3 columns.The data inside this cell is aligned to the
right and the middle. We know it will be aligned to the
middle because middle is the default vertical alignment.
<img src="images/approved32.gif" width="131" height="40">
This is the contents of the third cell, or the third
column of the first row.
</TD> (This closes the third cell, or the third
column of the first row.)
</TR> (This closes the first row.)
If we closed the table now, we would have the same table
displayed in the last sample. Only now we want to add a
blank row. First we must add a new row tag.
<TR> (This opens the second row.)
<TD> (This opens the first cell or column of the
second row. In this case, the cell will be blank.)
(This stands for non-breaking space.)
This is the HTML equivalent of a space.
This is necessary only when the cell has a color or
a background image.
</TD> (This closes the first cell of the second row.)
<TD> (This opens the second cell of the second row.)
(Spacer)
</TD> (This closes the second cell of the second row.)
<TD> (This opens the third cell of the second row.)
(Spacer)
</TD> (This closes the third cell of the second row.)
</TABLE> (This closes the table.)
Here is the code together:
<TABLE WIDTH="100%" BORDER="1">
<TR>
<TD ALIGN="center" VALIGN="top" HEIGHT="150">
<img src= "images/fredlogo.gif"width="141"height="66"></TD>
<TD ALIGN="left" VALIGN="bottom" HEIGHT="150">
<img src="images/fredlogo.gif" width="141" height="66"></TD>
<TD ALIGN="right" HEIGHT="150">
<img src="images/approved32.gif" width="131"
height="40"></TD>
</TR>
<TR>
<TD> </TD>
<TD> </TD>
<TD> </TD>
</TR>
</TABLE>
View code in browser
What if we wanted to add a column to that table? If the last part made sense, this will be even easier. To add a column, we just have to add an extra <TD> cell inside each <TR> row. The following code (*see bold text) will add a column after the first image:
<TABLE WIDTH="100%" BORDER="1">
<TR>
<TD ALIGN="center" VALIGN="top" HEIGHT="150">
<img src="images/fredlogo.gif" width="141" height="66"></TD>
<TD> </TD>
<TD ALIGN="left" VALIGN="bottom" HEIGHT="150">
<img src="images/fredlogo.gif" width="141" height="66"></TD>
<TD ALIGN="right" HEIGHT="150">
<img src="images/approved32.gif" width="131" height="40"></TD>
</TR>
<TR>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
</TR>
</TABLE>
View code in browser
*NOTE: Remember in order to add a column, a <TD> tag has to be added inside every <TR> tag.
Back to top
The tables we've been working with thus far look pretty bland.Luckily it's easy to add color to tables in the form of borders and backgrounds
To give the border some color, all one has to do is define it in the opening <TABLE> tag:
<TABLE WIDTH="100%" BORDER="1" BORDERCOLOR="blue">
This gives the same table we were working with a blue border.
What if we wanted to give our table a background color?Applying backgrounds is identical to how one would specify colors in the <BODY> tag, with the BGCOLOR attribute.Table tags also use this attribute.
<TABLE WIDTH="100%" BORDER="1" BORDERCOLOR="blue" BGCOLOR="purple">
We now have a purple table with a blue border.
Images can also be used for a table's background. Images are used with the BACKGROUND attribute, just like the <BODY> tag.
<TABLE WIDTH="100%" BORDER="1" BORDERCOLOR="blue"
BACKGROUND="images/approved32.gif">
Individual cells can also be given a background color or a background image in the same fashion. Instead of giving a color to the <TABLE> tag, give one to the <TD> tag for the cell you wish to have some color. In this example, we'll give the first column the purple color and the last cell will have the background image:
<TABLE WIDTH="100%" BORDER="1" BORDERCOLOR=" blue" BGCOLOR="white">
<TR>
<TD ALIGN="center" VALIGN="top" HEIGHT="150" BGCOLOR="purple">
<img src="images/fredlogo.gif" width="141" height="66"></TD>
<TD ALIGN="left" VALIGN="bottom" HEIGHT="150">
<img src="images/fredlogo.gif" width="141" height="66"></TD>
</TR>
<TR>
<TD BGCOLOR="purple"> </TD>
<TD BACKGROUND="images/approved32.gif"></TD>
</TR>
</TABLE>
View code in browser
Back to top
The COLSPAN and ROWSPAN attributes give us more flexibility with our table designs. If we want to give the table a header or sidebar, these attributes are what we would use. We use these attributes in the <TD> tag. We have to assign a number for how many rows or columns we wish to span.
<TD COLSPAN="3">
This would mean we want that cell to span 3 cells.
Here is an example of COLSPAN:
<TABLE WIDTH="100%" BORDER="1">
<TR>
<TD COLSPAN="3">Column span of 3 used here</TD>
</TR>
<TR>
<TD>Column 1</TD>
<TD>Column 2</TD>
<TD>Column 3</TD>
</TR>
</TABLE>
View code in browser
ROWSPAN works in the same fashon:
<TABLE WIDTH="100%" BORDER="1">
<TR>
<TD ROWSPAN="2">Row span of 2 used here - Column 1</TD>
<TD>Row 1 - Column 2</TD>
<TD>Row 1 - Column 3</TD>
</TR>
<TR>
<TD>Row 2 - Column 2</TD>
<TD>Row 2 - Column 3</TD>
</TR>
</TABLE>
View code in browser
Back to top
Tables can easily be placed within tables. This can make it easier to layout certain elements without having to do a lot of spanning. The drawback to this technique is it takes browsers longer to render nested tables.
To nest a table, simply start a new <TABLE> within the existing table. For this example, we'll use a 2 column, 1 row, 600 pixels wide and 300 pixels tall table:
<TABLE WIDTH="600" HEIGHT="300" BORDER="5">
<TR>
<TD VALIGN="middle" ALIGN="center" WIDTH="300">
<IMG SRC="images/fredlogo.gif"></TD>
<TD VALIGN="middle" WIDTH="300">This is the second cell.
Notice that the closing </TABLE> tag is not inserted at this point. Let's add another table. This code will produce the interior table
<TABLE WIDTH="100%" BORDER="1">
<TR>
<TD align="center">Interior Table</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
View code in browser
*NOTE: The above </TD>, </TR> and </TABLE> tags from the nested table were omitted and need to be included at the end.
Back to top
Cellpadding and Cellspacing are two attributes which can greatly affect the look of a table. These attributes can give extra space within cells and borders. They are defined with a number in pixels. The higher the number, the more the spacing/padding.
The syntax is as follows:
<TABLE WIDTH="600" HEIGHT="300" CELLPADDING="15" CELLSPACING="15">
The CELLPADDING is how much spaces elements have within the table. For example, if the cellspacing number were lower, the nested table would come closer to its cell boundaries.
CELLSPACING makes the border thicker. The higher the number, the thicker the border. Without a border, it uses the same size to space cells away from each other.
View code in browser
Back to top
The <CAPTION> tag lets you add a caption to a table. Captions are useful for summarizing the information in a table. By default, most browsers display captions centered above a table. Using the ALIGN attribute with the BOTTOM value allows you to have a caption appear below the table. Displaying a caption below a table is useful when you want to provide additional information or summarize the data in a table.
The code to add a caption to your table would be as follows (placement is directly after your <TABLE> tag):
<TABLE>
<CAPTION>Caption information goes here</CAPTION>
View code in browser
To place the caption below the table, use the ALIGN attribute as follows:
<CAPTION ALIGN="bottom'>Caption information goes here</CAPTION>
View code in browser
*NOTE: The HTML standard specifies that you should not add more than one caption to a table on your web page.
Back to top
Table-based layouts are by far the most common form of basic layout construct on the web today. The tables in the last example were very organized, but the borders distracted us from the layout. If we took them off, the table would probably look a lot nicer. To create a borderless table, simply use a BORDER="0".
<TABLE WIDTH="600" HEIGHT="300" BORDER="0">
View code in browser
How does one advance from basic to advanced table use? Practice is all it takes. The more practice (and patience) the better one will become at table layout.
The new standard for laying out complex documents is to use Cascading Style Sheets (CSS). If you would like to learn more about CSS, check the Web Services web page (http://www.fredonia.edu/WebServices/) training schedule for the date of the Introduction to Cascading Style Sheets workshop.
Back to top
This concludes the Creating Tables tutorial. As you begin working on tables, it may be helpful to use a WYSIWYG program which will allow you to work with the source code. When you create and modify your tables, you can watch the WYSIWYG generate the code. It will also help to explore other websites. If you are impressed by a site's organization, then look at the source code and explore their table layout.
Back to top
|
