Tables have become an essential tool in developing web pages. With tables you can design your page(s) to look the way you want it to, no matter what the operating system, browser, or monitor size it is viewed with.
The table tags will go inside your Body tags of your html document. There is an opening and a closing tag, like a lot of other tags we have used. Here are tags to begin our table:
<TABLE BORDER> </TABLE>
The first tag will open the table and the second will close the table. All other table tags will go between these two. Browsers will ignore any table tags not inside these two tags.
Each table is composed of rows, a row goes horizontally across the page (from left to right). We will need to tell our row when we want it to end. The tag to do this is the <TR>, Table Row tag. We only need to use this at the end of our rows.
Each of our table rows has one or more data elements in it (or columns). These columns are surrounded by the Table Data tags <TD> </TD>, yes we must use both tags around each item.
So, let's try this out. The easiest way to set the table up is to first set up the codes, then insert the data. Let's set up some of the codes:
<TABLE BORDER>
Now, we will go back and insert our information between all the TD tags, like this.
<TABLE BORDER>
And this is what it will look like on your page:
Ready for another tag? You can see that we started two lists above. The first one is listing my favorite colors, the second one is listing my favorite foods. Let's put a header above these columns. To do this we need to insert the Table Header tag before the Table Data tags. These tags are: <TH> </TH>, these tags will automatically show up bold and centered on the top of your columns. I also use these tags inside my tables if I really want to highlight something special, but remember it will also be centered.
<TABLE BORDER>
See how I inserted the tags BEFORE the rows with the TD tags. Now let's fill them in:
<TABLE BORDER>
Another thing you can do to make them stick out even more is capitalize all the letters in the heading. Let's see what our table looks like now.
I know these headings don't look like they are centered, that is because they are longer than any of the lines of text under them. After adding more text to the right column, check this out:
<TD> </TD> <TD> </TD> <TR>
<TD> </TD> <TD> </TD> <TR>
</TABLE>
<TD>Green</TD> <TD>Chocolate</TD> <TR>
<TD>Purple</TD> <TD>Pizza</TD> <TR>
</TABLE>
Green Chocolate
Purple Pizza
<TH> </TH> <TH> </TH> <TR>
<TD>Green</TD> <TD>Chocolate</TD> <TR>
<TD>Purple</TD> <TD>Pizza</TD> <TR>
</TABLE>
<TH>My Favorite Colors</TH> <TH>My Favorite Foods</TH> <TR>
<TD>Green</TD> <TD>Chocolate</TD> <TR>
<TD>Purple</TD> <TD>Pizza</TD> <TR>
</TABLE>
My Favorite Colors MY FAVORITE FOODS
Green Chocolate
Purple Pizza
My Favorite Colors MY FAVORITE FOODS
Green Chocolate...chocolate...chocolate
Purple Pizza with pepperoni, mushrooms and olives
The above set up works great for small amounts of information. When you get into having 4 or more columns on your page your lines of code will start to overflow onto the next line. Or if your text inserted into your rows gets lengthy the same thing will happen. When/If this happens you should start setting up your table codes like this...
| <TH> </TH> | See how each section has five items, or lines to it? We have just created a table with five columns (going across) and three rows (going down). To make it bigger just add more rows (sets of 5 TD lines you see, on the left) or add another column by adding one line to each group below. Be careful you don't add to many columns, the page is only so wide. We use the TR's to break it up a bit and show us where our lines end. They do go on lines by themselves (the TR's). Now we would go back and insert our items into the headings and rows/columns. |
| <TH> </TH> |
| <TH> </TH> |
| <TH> </TH> |
| <TH> </TH> |
| <TR> |
| <TD> </TD> |
| <TD> </TD> |
| <TD> </TD> |
| <TD> </TD> |
| <TD> </TD> |
| <TR> |
| <TD> </TD> |
| <TD> </TD> |
| <TD> </TD> |
| <TD> </TD> |
| <TD> </TD> |
| <TR> |
For a good example of tables check out my Ohio Festivals pages. You will need to choose a month to click on, that is where the tables are.
Let's put a title on the top of our table. There is a code we can use called the Caption code. It horizontally centers within the boundaries of the tables edges. Lines will wrap to fit within these boundaries also, meaning if your title is very long it will wrap to the second or third line and the ends of the words will stay the same width as the table. Here is the code: <CAPTION> </CAPTION>
This code goes right AFTER our Table opening code, but before any of the row codes. It does NOT go inside your TR tags. Like this:
<TABLE BORDER>
<CAPTION>Kathy's Favorite Things...</CAPTION>
<TH>My Favorite Colors</TH> <TH>My Favorite Foods</TH> <TR>
<TD>Green</TD> <TD>Chocolate</TD> <TR>
<TD>Purple</TD> <TD>Pizza</TD> <TR>
</TABLE>
And it looks like this:
| My Favorite Colors | MY FAVORITE FOODS |
|---|---|
| Green | Chocolate...chocolate...chocolate |
| Purple | Pizza with pepperoni, mushrooms and olives |
Now, that caption is kinda light and small. We can fix that by adding the Bold, Italics, or Underline tags around the words inside the caption codes. (Lesson 5)
I guess the first one I would add would be the Bold tags.
| My Favorite Colors | MY FAVORITE FOODS |
|---|---|
| Green | Chocolate...chocolate...chocolate |
| Purple | Pizza with pepperoni, mushrooms and olives |
Captions can also be aligned to show up at the bottom of the table. Use the align="bottom" tag inside the CAPTION tag to accomplish this. You might use this as a footnote for your table. We might want to call our table: Fig. 6: Favorite Things, and center this line at the bottom instead of the top of our table. NOTE: you may only use one CAPTION tag per table.
Another thing you can do is just use the Heading tags (also in lesson 5) and center it over the table, then you can choose whatever size you want with them. For even more flexibility use your font tags (Lesson 6), and again center it over the table. These items must be place BEFORE the Table tags, they will not go inside the table tags.
Talking about centering, you can center your whole table by using the CENTER tags around the Table tags, or by inserting the ALIGN=" " tag inside the Table Border tag. (Lesson 9).
| My Favorite Colors | MY FAVORITE FOODS |
|---|---|
| Green | Chocolate...chocolate...chocolate |
| Purple | Pizza with pepperoni, mushrooms and olives |
Here are two tables I have created for you, that you just might want to print out and keep for reference.
This first table is a list of the codes we have discussed. The Attributes are codes you can add inside the main tag. Example: For the <TABLE> tag, you can add one of the attributes listed like this to it: <TABLE ALIGN="CENTER">.
| MAIN TAG | ATTRIBUTES YOU CAN USE INSIDE THIS MAIN TAG |
|---|---|
| TABLE | ALIGN, BORDER, CELLPADDING, CELLSPACING, WIDTH |
| TR | ALIGN, VALIGN |
| TD | ALIGN, COLSPAN, HEIGHT, NOWRAP, ROWSPAN, VALIGN, WIDTH |
| CAPTION | ALIGN |
This next table tells you what the attributes will do to the item you are adding it to. Use various attributes to make your tables interesting.
| ATTRIBUTE | WHAT IT DOES... |
|---|---|
| ALIGN="(TOP, BOTTOM, LEFT, CENTER, RIGHT)" -choose one | With the CAPTION tag you will need to specify either TOP or BOTTOM to control whether the caption appears above or below the table. The default is TOP. With all the other tags you would use the values of LEFT, CENTER or RIGHT to control the horizontal placement of your text within the cells. The default value is LEFT. |
| BORDER="number" | The border attribute instructs the browser to display the borders around the table and all its cells. If no number is specified (like we have been using) the default value is 1 (one). If you do not want a border you would use the value of 0 (zero). Replace the word number with the actual number you would like or just leave the =" " off to use the default value. |
| CELLPADDING="number" | This value indicates the amount of space between the border of a cell and the contents of the cell. The default value is one pixel (like this table). If you set the value to zero the text will actually touch the border. So the cell padding is inside the cells, remember this because it is very easy to get it confused with the next item! Example of CELLPADDING. |
| CELLSPACING="number" | This value represents the amount of space inserted between the individual cells in your table. The default value is two pixels between each cell (like this table). By using both the Cell Padding and Cell Spacing attributes you can create very interesting tables. Example of CELLSPACING. |
| WIDTH=("number/percent%") -choose one | Use the WIDTH attribute inside the table tag to set the total width of your table. You can use a number, which will represent pixels on the page, or you can use a percentage (which I find is easier). 100% would be the whole width of your browser window. If you do not set a width on your table, the table will grow with what you put into it, until it is 100% on the page. Using WIDTH with the TH or TD tags will set the width of the cell as an absolute width, either in pixels or as a percentage, of the whole table width. Example: You have four columns and set a width of 20% each, that is 80% of your pages width. The four columns will not get bigger than 20% each. Yes, you can have each column a different percentage, giving them different widths. Just make sure you do not exceed 100%. Also, if you set the width on the TH/TD tags and set a width on your Table tag, make sure they equal. Example: Same as above, four columns equal 80%, your tables Width value should be 80%. Yes, you do need to use the % sign after the number to tell the browser you are using the percentages. If not it will read the number as pixels. |
| VALIGN=("TOP, MIDDLE, BOTTOM, BASELINE") -choose one | Valign is Vertical alignment and is used to control the placement of the cell's contents at the top, middle, or bottom of the cell. You can also align all your elements with a common baseline. The default value is middle. |
| NOWRAP | When used inside the TD/TH codes this attribute will force the browser to display all of the text for that particular cell on a single line. Using this can cause very wide cells...so be very careful. |
| COLSPAN="number" | Using this attribute you can specify your tables cell to span as many of the columns (from left to right) in the table as you would like. The default is one. Again, for an example of this, take a look at my Ohio Festivals site, choose one of the months and look at the 2000 blue line. This is spanning all the columns in the table. |
| ROWSPAN="number" | This one specifies how many rows of the table the cell should span (up and down). Again the default is one. Note: When using the COLSPAN and/or ROWSPAN your columns/rows must equal the number of columns/rows you are working with in your actual table. If your table has 3 columns, you can only span those three columns. |
I going to s-q-u-e-e-z-e this last part to the table section onto this page...so here goes...
Did you notice above that my table color changed? It is white, different from the background image. How'd I do that, it was very easy really. All you have to do is add this tag inside your TABLE tag: BGCOLOR="color code". Remember this was one of the first tags we learned? It put the background (BG) color on our web page....now it's putting the background color to our table. Neat, huh? Just choose what color you want and insert its code (or name) in the above tag.
When you set your BORDER width (with a number), you can change the color of that border too. Again, all we need to do is insert this tag inside our TABLE tag: BORDERCOLOR="color code". See the large table above, it has a border width of 5 and a border color of green.
Last, but not least, we can choose a background image to use in our table. Again, add this tag inside your TABLE tag: BACKGROUND="name-of-image.gif". Watch your text color when using a background, they can become very busy. Remember, this image has to be uploaded to the server to be able to 'see' it in the table background. See the small table in part 3 for an example (also check the source code).
