Note: this tutorial will display oddly on some browsers/screen resolutions because of the combination of "pre" tags and tables. You might try a smaller font and/or a higher screen resolution. We will also offer much of the code and the tables as free standing files you can view via links in the tutorials.
Hopefully you followed along with part 1 and now have your first table under your belt. Now we will explore the attributes available for the first container, the table tag. There are numerous attributes that you can use to control the layout of your table: align='*', summary='*', bgcolor='*', border='*', cellspacing='*', cellpadding='*', and width='*'.
Tables that are narrower than your entire page can be forced to display to the left, right or the center of the browser window. If the table fills the whole browser window, then this attribute becomes meaningless. The tag with this respective attribute set would look like this:
<table align='left'> <table align='right'> <table align='center'>
To be meaningful, the align attribute needs to be combined with the width attribute so that it fills only part of the screen. For our simple example, because we have only a little bit of content, our table is probably filling only part of the window, but as you add more content, the table will expand to 100% unless you tell it not to. Try testing the three values for the align attribute using the table you created in part 1 of this tutorial. Here are the three align attributes applied to a sample file: left :: right :: center
One last note on the align attribute is that it is depreciated, which means that there are other ways to specify the alignment that are preferred, namely Cascading Style Sheets. You can still use this attribute as it is supported currently in all browsers, but in the future may not be and it will also make your pages invalid if you seek to validate your html.
If you are following along at home, you are wondering about now, what if I want to use several attributes with one table tag? The answer is simple, use as many different tags as you want but adding them separated by a space. In our simple example we are already using two attributes, cellspacing and border. You should not use the same attribute twice in one tag, however, as results will be erratic from browser to browser. So with that said, on to the next attribute.
The summary attribute accepts text which approximates the contents or purpose of the table so that someone who does not see your table visually (certain devices, braille, speech) will be able to understand the content, or what it represents. Good form would certainly encourage the use of this attribute.
Background color for the entire table can be set with this attribute. The form is bgcolor='color' where color is one of the accepted colors or bgcolor='#rrggbb' where the number/letter pairs are red/green/blue.
<table bgcolor='blue'> <table bgcolor='#0000FF'> <table bgcolor='#cc33ff'>
Try testing the three values for the bgcolor attribute using the table you created in part 1 of this tutorial. Here are the three bgcolor attributes applied to a sample file: blue-word :: blue-RGB code :: random color
The border attribute is one attribute you will use most often to suppress the resulting outcome. Border is frequently set to zero to make the table become invisible, even though it will control the layout of information on your page. The border is the outer boundary of your table and the divider between table data cells and rows. In addition to the border dividing lines in your table you can set a thicker divider of sorts with the cellspacing attribute. Here are three examples:
<table border='0'> <table border='10'> <table border='20'>
As usual, you can look at our three examples: no border :: medium border :: thick border. Of course, the browser queens give you a cool three-dimensional look as you go to thick borders. Good design generally suggests that you go to thin or no borders despite this fine perk.
Like the border attribute, cellspacing controls the thickness of the division between data cells and rows. This attribute creates a blank area around the data cells, which has the effect of moving them apart from one another. It is best shown with the three examples, and in this case, just like border, less is often more.
<table cellspacing='0'> <table cellspacing='10'> <table cellspacing='20'>
The result is: no space around cells :: medium space around cells :: thick space around cells. Note that even if cellspacing is zero, you still see the border (which for these examples was set to two in all three examples).
Cellpadding is the amount of space between the cell contents and the border of the cell. If it is set to zero, then the data will run right up to the border. This is generally undesirable. Some cellpadding will make the content much easier to read. Imagine if a book had no margins ...
<table cellpadding='0'> <table cellpadding='10'> <table cellpadding='20'>
So again three examples: no space around content :: medium space around content :: thick space around content.
When it comes to width, tables often have a mind of their own. If you place images, for example in a table, the browser may entirely disregard the width settings you specified. Despite these flaws (or arguably features), you can control the width of your tables. If you specify width='50%' the table will take up half of the users available browser window. If you specify width='200' it will be 200 pixels wide. If you want to force the browser to honor your width and not under any circumstance shrink it, you need to put in an image of the width you wish to maintain. This is called the pixel shim trick, or the invisible gif trick. We will learn about this much later. For now, lets just assume our browser will behave and use the attribute.
<table width='200'> <table cellpadding='50%'> <table cellpadding='100%'>
Our tables now look like this: 200 pixels wide :: width 50 percent of browser :: width 100 percent of browser. Play with the size of your browser window and you should be able to get the percentage windows to adjust. Note also that there are borders built into a browser window, so even a 100 percent table doesn't literally extend to the outer edge of the browser window.
In the next tutorial in this series we look at the attributes applicable to the row or "tr" tag as it is known.
Tables Tutorial: part 1 :: part 2 :: part 3
So if you are ready to learn more ...
Back to the Tutorial Index