Tags and Meaning |
Description |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Table Tags <TABLE></TABLE> |
The main container
is the <TABLE></TABLE> tags, which enclose the following tags:
All the examples that follow have to be defined within the <BODY></BODY> tags. I have left out the rest of the HTML code to make the explaining process a little easier. Every table needs at least one row, and of course every row has to have at least one table data cell. So let's create a table with one row and one data cell. But, we need something to put in that cell. Let's populate it with the following text: My first table.
And this is what the output will look like in your browser:
But you can't see the table. This is where the BORDER attribute of the <TABLE></TABLE> tags come in. BORDER defines the width of the border surrounding the table. The value for BORDER is a number in pixels (e.g. BORDER="5"). The default value is 0 pixels, and is defined as follows:
And there you have it, a table with a border:
The border can be made bigger or wider if you want, simply enter a bigger amount for the BORDER attribute, like so:
And the output for this will look as follows:
When no sizes are specified the table is only as big as it needs to be. The WIDTH and HEIGHT attributes however, will let you specify a custom size for your table. Note however, width and height can be entered as a percentage (WIDTH="50%") or pixel (HEIGHT="100") value:
And this is what the output will look like:
We have established that <TR></TR> defines the rows of a table. That would mean that if you wanted two rows in your table, you would have to define it as follows:
And the output will look like this:
This means that for every row you want, you have to define a new set of <TR></TR> tags. The same goes for the <TD></TD> tags, which by adding a new set of these tags will create a new column in the row it is specified in. So let's make a table with two rows and two columns each:
And the output for this will look as follows:
Other attributes of the <TABLE></TABLE> tags are: CELLSPACING, CELLPADDING, BGCOLOR, BORDERCOLOR, BORDERCOLORLIGHT, BORDERCOLORDARK, BACKGROUND and ALIGN. Note however, that it's not necessary to use any of the attributes for your table. CELLSPACING tells the browser how much space to include between the walls of the table and between individual cells. The value is a number in pixels (e.g. CELLSPACING="5"). Let's take the previous example and set its CELLSPACING equal to 5. Note that I'm only showing the line of code that is going to change, so the rest of the tags to build up the table will be left out for the sake of clarity and simplicity, and don't forget the closing table tag </TABLE>.
And this is what the output will look like in your browser:
CELLPADDING tells the browser how much space to give data elements away from the walls of the cell. The value is a number in pixels (e.g. CELLPADDING="5").
And this is what the output will look like in your browser:
You can use more than one attribute at a time, so let's put in both CELLSPACING and CELLPADDING. <TABLE BORDER="1" CELLSPACING="10" CELLPADDING="15"> And this is what the output will look like in your browser:
BGCOLOR lets you specify a background color for your table, and only the table area will be filled with the specified color. The value of BGCOLOR can either be just the color name like green, red, yellow or a color code like #008000.
And this is what the output will look like in your browser:
BACKGROUND works in much the same way as BGCOLOR, the only difference is that instead of specifying a color you give it a picture or image to use as a background. Let's use the following picture as a background for the table:
And this is what the output will look like in your browser:
BORDERCOLOR does just what it says, it changes the color of the table's border. The value of BORDERCOLOR can either be just the color name like green, red, yellow or a color code like #008080.
And this is what the output will look like in your browser:
BORDERCOLORLIGHT, BORDERCOLORDARK both work the same except that each one colors a different part of the table. The value of BORDERCOLORLIGHT, BORDERCOLORDARK can either be just the color name like green, red, yellow or a color code like #008080. To demonstrate the attributes a little better I'm going to increase the border size to 5. Let's start with BORDERCOLORLIGHT.
And this is what the output will look like in your browser:
The following code is for BORDERCOLORDARK:
And this is what the output will look like in your browser:
As you can see the BORDERCOLORLIGHT attribute colors the top and left part of the table while the BORDERCOLORDARK attribute colors the bottom and right part. So if we combined the two attributes together for one table, the following effect will be created:
And this is what the output will look like in your browser:
Images can also be used and manipulated in a table data cell. Remember, in the absence of other instructions, the table will make itself just big enough to contain the data. The table simply expands to the proper size. Take the following for example:
And this is what the output will look like in your browser:
As you can see, if you play with the table attributes a little you can use a table to create the effect of a frame around a picture.
And this is what the output will look like in your browser:
The following table demonstrates the BGCOLOR, BORDERCOLOR, BORDERCOLORLIGHT, BORDERCOLORDARK and BACKGROUND attribute for individual data cells:
And this is what the output will look like in your browser:
Note however that when specifying any of the data cell attributes, in other words within the <TD></TD> tags, they will override the attributes specified for the table or <TABLE></TABLE> tags. So let's say you created a table with the background color set to turquoise and the one data cell was defined to have a background color Navy, this is what it will look like:
And this is what the output will look like in your browser:
ALIGN and VALIGN used within the <TD></TD> tags will align the text or object within the data cell. ALIGN will place the text or object horizontally within the data cell. Valid values for the ALIGN attribute are LEFT, RIGHT or CENTER. VALIGN places the text vertically within the data cell. Valid values for the VALIGN attribute are TOP, MIDDLE, BASELINE or BOTTOM. Take a look at the following:
And this is what the output will look like in your browser:
WIDTH and HEIGHT used within the <TD></TD> tags sets just that, but only for the specified data cell. You can set the data cells individually like so:
Note that if you set the HEIGHT of the first cell or column, the second cell or column is going to be the same height regardless of whether you have set its HEIGHT attribute to a different value. And this is what the output will look like in your browser:
As mentioned before the attribute settings of a cell or column will override the attribute setting of the table. In other words if you set the tables' WIDTH attribute equal to 100 and then specify the one cell or column to have a WIDTH of 60 and the other cell or column 50, the table will display in total at a width of 110 and not 100 as specified in the table's attribute. Where it does come in handy to specify the WIDTH attribute of the table and then the WIDTH attributes of the cells or columns, is where you set the tables' WIDTH attribute equal to; let's say 400 pixels, and then set the first cell or column's WIDTH attribute equal to 70% and the second to 30%. This means the first cell or column will take up that percentage of the total width of the table and the second cell or column the rest, like so.
And this is what the output will look like in your browser:
The <TH></TH> tags are used to define table headings. It works just like the <TD></TD> tags, the only difference being that the text defined within the <TH></TH> tags are automatically made darker or bold. Look at the following example:
And this is what the output will look like in your browser:
The <TD></TD> and <TH></TH> tags have two more attributes COLSPAN and ROWSPAN. COLSPAN is used to force a cell to span more than one column. A valid value will be a number of columns not more than the amount of columns specified for one row in a table. In other words if the total columns for a table is 3, you can not set the value of COLSPAN equal to 4, only equal or less, the same applies for ROWSPAN. Look at the following example:
Note that the number you set COLSPAN to, is the amount of data cells you are combining as one big data cell. In other words, if you set COLSPAN to 2 as in the example and there are three data cells per row, then you only have to define the amount of outstanding data cells, in this case one more set of <TD></TD> tags, but if you had set COLSPAN equal to 3 you would not have defined any more data cells or <TD></TD> tags for the first row. And this is what the output of the example above will look like in your browser:
ROWSPAN is used to force a cell to span more than one row. The same rule as with the COLSPAN attribute applies here, regarding defining data cells. The only difference is that you work down and not across. In other words, if you set ROWSPAN equal to 2 and the table is defined to have three rows and three columns, you will still define three data columns or <TD></TD> tags in the row you defined ROWSPAN, but only have two data cells or <TD></TD> tags defined in the row the data cell expands to, since one data cell is going to be taken up. Take a look at the following example, and note how the second row only has one data cell defined.
And this is what the output will look like in your browser:
And of course, the COLSPAN and ROWSPAN attributes can also be used in combination.
And this is what the output will look like in your browser:
Some HTML authors are omitting closing cell </TD>, </TR>, </TH> and </TABLE> tags. The idea is that the browser should know that when another cell begins, the last one must have ended. Unfortunately, as your tables become more complex, some browsers don't always understand this and the table goes awry. The easiest way to completely sidestep this issue is to always include those closing tags. Only one more question remains, can we have a table within a table? Most definitely. Take a look at the following:
And this is what the output will look like in your browser:
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
