.
. Dezining Woman

Rose Bar

Tables

2009-01-18

This is the part that frequently befuddles even those of us with extensive HTML capabilities.  Seems like while paragraphs and divisions and so on are pretty easy to follow, tables are a whole 'nother issue!  Fortunately they really aren't so complicated; they are based on a set of three or four tags.  That's all.

In a nutshell, a table is the organization of information in rows and columns - whether text or images or some combination thereof.  The following is a simple table, with a single cell:

This is a table.  It has a single one-pixel-wide border.  It contains as much information as I want to put into it.  The text you see here will keep wrapping around and increase the height of the table until I quit.  Most Diaryland designs employ tables.

To create a table, you'll need to use three tags (and their closing tags:)

The tags are mostly shorthand for what they are: "table" is the obvious one, not shortened at all. The "tr" stands for "table row" and regulates the horizontal configuration. "Td" is "table data" (or "table division") and represents the individual cells within your table.

Let's say you want to make your table two columns wide but only one row.  Your table will look like this:

This is the first column.  Unless you specifiy otherwise, the column will automatically adjust to the width of the content.  The default vertical alignment is centered for both Firefox and Internet Explorer.
Treasure Chest

The new table has only one row but now has two data cells. Your coding to achieve this magnificent change is simple:

As you can see, you now have TWO sets of "td" open-and-close tags, for two cells.

Let's change things around a little.  Maybe you want one column but two rows.

Wizard
As you can see, this enables you to arrange your items top-to-bottom, vs. side-by-side.  I added some padding to my coding, something I'll omit until we get into CSS.

Keep in mind that the latest version of HTML actually incorporates CSS into its basic functions, so you really shouldn't put off learning the CSS ropes, so to speak.

This is the abbreviated version of the script I used above:

This is the much-simplified version, as I mentioned, but you can see it has two sets of the "tr" (table row) tags.

That's the general idea of tables.  You identify that it's a table; then you mark it by row and by data cell.  From here, however, you can start getting creative.  There is one set of tags I haven't mentioned with regard to tables: the "th" (table head) tag, which replaces the "td" for cells you want to be - you guessed it! - the table headers.

This time I'll expand my table to include three columns, one table header line, and two rows below the header:

This is Column 1
This is Column 2
This is Column 3
Column 1
Column 2
Column 3
Additional Column 1
Additional Column 2
Additional Column 3

I didn't do anything to format the table header cells to the larger, bolder font; simply choosing "th" rather than "td" forced an automatic format of the cells. It's written like this:

Looks complicated, doesn't it? It's a bit longish, but simply put, for each row you have three cells. You code always reads from left to right in a table, then up and down. So you put in your set of three th tags and content; then start a new table row (tr) and add your set of three td tags for the second row; another table row (tr) and the final set of three td tags for the third row; then close out the final row and the table itself.

While there's quite a bit of code there, the principle remains the same. The biggest secret to tables is counting - counting the rows and the cells so they match up. Otherwise you end up with a lopsided table, or possibly no table at all, or maybe one cell that falls in some obscure part of the page by itself.

Next lesson: more on tables.

Rose Bar

 .
.