Tables

A table is a (potentially invisible) grid of boxes that can contain any type of HTML content. It consists of rows, which are in turn made of cells.

The basic structure of a table looks like the following: code format="html4strict" code This would look something like: (By default the table would look only as wide as the content required, and you would not see any lines around the boxes.)
 * top left || top right ||
 * lower left || lower right ||

As you can see, using consistent indentation on a table is very important for readability, which is pretty essential if you are to avoid errors!

Notice that the only thing that can go directly inside of the main code Although all the tags are balanced, there are problems:
 * 1) "This is a bad table" is not within or tags.
 * 2) "Some things are not" is within tags, but not tags.
 * 3) ... and some things just look ok  even when they aren't. " is all in tags, but not within tags.

(Note: there is another type of tag that is a lot like . The tag stands for a header - it is just like a tag, but bolded. It is intended for the top row of a table.)

It is possible to put anything you want inside the ... tags, including another table! (This sort of thing is very hard to read as code, but before CSS it was very common to use nested tables to create precision layouts.) I won't give an example here, but you might well imagine one - it has 6 levels of indentation!

Tables have various types of modifications, some by direct attributes in the tags, and some by CSS. (Some by both, but it would be better to use an inline style than an attribute to ensure that your web page stays up-to-date with changing standards in the future.) Some popular options are:

grooved, etc. || table, tr, td || Sets the type of border around this cell, row or table. || There are many, many things you can do with tables. In class, we showed you how to make a "9-grid" effect. The 9-grid effect is a 3x3 table, with tags that represent corner images at the corners of the table and background-image graphics on the sides that tile to stretch however wide the table needs to be to accomodate the content in the center. The result is a handsome box with full graphical effects that can be used to contain HTML content of any type or size.
 * CSS || border-width || 1px || table, tr, td || Sets the border width around this cell, row or table. ||
 * CSS || border-style || solid, dashed, ridged,
 * CSS || background-color || #ff00cc || table, tr, td || Sets the background color ||
 * CSS || background-image || url(myPicture.jpg) || table, tr, td || Sets the background image ||
 * CSS || padding || 5px or 3% || table, tr, td || Sets the buffer space between the content of this cell and its border. ||
 * CSS || margin || 5px or 3% || table, tr, td || Sets the buffer space between the border of this cell and adjacent items. ||
 * HTML || colspan || colspan="2" || td || Lets this cell be the result of merging this cell and the one(s) that would be to the right of it. ||
 * HTML || rowspan || rowspan="3" || td || Lets this cell be the result of merging this cell and the one(s) that would be below it. ||

Here's how we did this:
 * 1) In Photoshop (or another graphics program), we created a box with right angle or rounded corners. The sides of the box must be such that they can repeat without looking bad even if the image is repeated only fractionally. (Scalloped edges won't do, for instance - so no "thought" bubbles!) Apply whatever layer effects you would like to the box.
 * 2) Divide the box into 9 evenly sized pieces. This can be challenging to do with many graphics editors, so we saved the file in Photoshop and used "Graphic Converter" to divide them up, using its automatic "split" feature.
 * 3) In your HTML editor, create a table with three rows of three cells each.
 * 4) Place an tag in the corner cells, displaying the corner graphics.
 * 5) On the sides, insert a "non-breaking space"  Within the tags, add the style attribute: . You may wish to do this in the center cell, too. The "xxx.gif" is the URL of the appropriate side (or center) graphic.
 * 6) Set the "line-height" CSS attribute of the top and bottom rows to zero.
 * 7) Set the "padding" CSS attribute of the table to zero.
 * 8) Put whatever content you desire into the ... of the center cell.

Again, this is just one use of a table - we will see others as the semester progresses.