|
|
Tables
|
If you want a succesful webpage, you need to understand tables. Tables are basically "cells" that you can put information into. You can choose how big to make the border, what color the cells/border should be, etc. Let's start with a simple list. Start with the tags <table> and </table>. Inside those tags, put the tags <tr> and </tr> to make a row. Inside those, put the tags <td> and </td> to make a table data cell. If that's confusing, look at my example with the html laid out and organized.
<table border="1">
<tr>
<td>red</td>
</tr>
<tr>
<td>yellow</td>
</tr>
<tr>
<td>blue</td>
</tr>
</table>
To better understand it, here's an example with a 4x4 grid.
<table border="1">
<tr>
<td>red</td>
<td>yellow</td>
</tr>
<tr>
<td>green</td>
<td>blue</td>
</tr>
</table>
If you look closely at the tags, do you see that inside every <tr> and </tr> tag there is a set of <td> tags and inside every <td> and </td> tag there is the information? Confusing, I know, but over time it's easy to get the hang of.
A couple of useful attributes are colspan="NUMBER" and rowspan="NUMBER". You put them in the <td> tag. They let you make one cell "span" the length of two, three, or more cells. Here are some examples.
<table border="1">
<tr>
<td colspan="2">red</td>
</tr>
<tr>
<td>green</td>
<td>blue</td>
</tr>
</table>
<table border="1">
<tr>
<td rowspan="2">red</td>
<td>green</td>
</tr>
<tr>
<td>blue</td>
</tr>
</table>
Example Webpage
|
|
|
Style and Decoration of Tables
|
You probably noticed that I put the border= "1" attribute in the <table> tag. If you use this attribute, you can make the table's border as wide or as small as you want. If you put border= "0" in the table tag, the table border will be hidden, like this:
Some other attributes you can add are:
bgcolor="COLOR"
background="FILENAME.jpg"
bordercolor="COLOR"
cellpadding="NUMBER"
cellspacing="NUMBER"
Some of these attributes you can probably guess what they mean, but I'll explain. The first one, bgcolor, lets you change the background color of the table. You can add this attribute to the <table> tag as well as the <td> tag. It will be a solid color, and for the color choices, go to "Formatting Text", on the left. The attribute background lets you put an image of your choice as the table background, instead of a solid color. This is cool if you use a texture. Remember that if you want words in your table and you use a picture that's too busy and don't change the font color, you might not be able to see the words in the table. bordercolor, obviously, lets you change the border color of the table. The cool thing about changing a table's border color is that they have a light and a dark side, so they look 3D when you make the border bigger. Play around with it!
cellpadding and cellspacing are a little more complicated. cellpadding is the space between the data in the cells and the and the cell border. cellspacing is the space between the cell border and the table border. Here are some examples of what I mean:
<table border="1" cellpadding="10" cellspacing="2">
<table border="1" cellpadding="2" cellspacing="10">
Here are a few examples of finished tables, with all the cool colors/styles added.
<table border="4" bordercolor="royalblue" bgcolor="royalblue" cellpadding="1" cellspacing="5">
<tr>
<td rowspan="2"><font color="skyblue"><b>red</b></font></td>
<td><font color="skyblue"><b>green</b></font></td>
</tr>
<tr>
<td><font color="skyblue"><b>blue</b></font></td>
</tr>
</table>
| red |
| yellow |
orange |
green |
blue |
<table border="5" bordercolor="forestgreen" bgcolor="forestgreen" cellpadding="3" cellspacing="3">
<tr>
<td colspan="4"><font color="springgreen"><b>red</b></font></td>
</tr>
<tr>
<td><font color="springgreen"><b>yellow</b></font></td>
<td><font color="springgreen"><b>orange</b></font></td>
<td><font color="springgreen"><b>green</b></font></td>
<td><font color="springgreen"><b>blue</b></font></td>
</tr>
</table>
<table border="0" bgcolor="black" cellpadding="5" cellspacing="5">
<tr>
<td bgcolor="darkpink"><font color="white"><b>red</b></font></td>
<td bgcolor="goldenrod"><font color="white"><b>yellow</b></font></td>
</tr>
<tr>
<td bgcolor="forestgreen"><font color="white"><b>green</b></font></td>
<td bgcolor="dodgerblue"><font color="white"><b>blue</b></font></td>
</tr>
</table>
Example Webpage
|
|
|
Webpage Layout
|
In addition to small data tables, tables can help you plan the whole layout of your page. Complicated webpages sometmes have tables inside tables inside tables! Once you get the basic concept of tables, you can use them to help you create your webpage. With tables you can create webpages with 2 columns, 3 colums, headers, footers, or even just horizontal sections.
The only things that you will need to know are these two more attributes for the <table> tag: width="NUMBER" and align="ALIGNMENT". For the width of a table, especially with the layout of a webpage, you should use percentages. For the outermost table on your page, you could replace "NUMBER" with "100%".
Do you remember the align="ALIGNMENT" attribute from organizing text? You can use this to align the text and images inside a table or table cell (you can use this attribute inside the <td> tag, too). Where it says "ALIGNMENT", put either "top", "center", "bottom", "left", or "right".
Just put all of your data into the different <td> tags and you're on your way! And don't be afraid to put tables inside tables inside tables...just remember to organize the text inside your html document and you won't get confused.
Oh! One last thing that will help you. If you feel that the tables in your document are way too complicated, consider using what's called a comment. An HTML comment looks like this: <!--comment-->, where "comment" is replaced by the comment you wish to make, such as "this column is blank". Comments help you follow HTML code in your document and don't show up in your browser (internet explorer, etc). Very helpful if you think you have too much code!
Below is an example of our working website with the tables visible. Usually, you'd want to make the border "0". Don't forget to right-click and view the source code!
Example Webpage
|
|
|
|
