Tables, Columns and Table Formats

You can organize or design the layout of your information on your web site by using a tag called PRE which stands for preformated text.  If you do the following below 

It looks like

             title            extension
Raha         Producer         8765
Kathy        Accountant       8924
Scarlett     Security Guard   8273

It looks exactly like how you typed your text in the PRE tags.  You can even add tags inside the PRE (links here):

              title                extension
Raha         Producer          8765
Kathy        Accountant        8924
Scarlett     Security Guard    8273

But as you see above, it's hard when you mess with the sizing when it's like this.  It's best to go to table.s

Tables

Tables are used quite often to organize things on your web site.  They can have borders or go without.

Usually the browser ignores any extra spaces, tabs, or line returns you add to your file.  But with the tag TABLE you can design the layout of your page without spacing and tabs and use the table with no border to get the same affect.  

Below is the HTML of the table.  The "

tag is used to begin the table and putting a / in front of it ends the table.  There are three table elements, the most important one is TR for a table row, and TD for a table column tag.  Each one needs an end tag.  So if you look below you will see the start one and the end one.  You start with the row (TR), then you do all the datas (TD) for each one, then you end the TR and then start a new one is a new TR.  See below.

And below is what it looks like
 
 
 

You will notice that the Hero, Power and Nemesis words look different then the others ones. That's because they have the code TH which stands for Table Header.  The Header is automatically centered, and put in bold.

Notice in the picture of what the table looks like that there are three columns, and in the code you will see three sets of TD codes.  Notice that there are four rows, you will find four TR codes, to match this.  This manes it a little easier to plan.  You start one, you end one, etc.

Content is placed within the tables cells.  A table cell is deinfed by the TD and the ending TD.  Finally, the border is what says how wide the table broder will look.

In the starting TABLE code you can add the words CELLPADDING and CELLSPACING attributes.  You can adjust the white space on the table.  Spacing defines the width of the border itself, while padding is the distance between cell borders and the content within.  You can also add color to the table.  With the code  below you set what is in the green (notice the color says "rgb" which stands for red, green, blue.

Finally, to do a table if may need togo across a couple of rows.  See below.  Notice that Row 1, Cell 1 goes across to rows, and Row 3 Cell 1 goes across all three columns.  So you can see that this is used with the tag ROWSPAN to go and cover two rows, and COLSPAN goes across the columns.  See the code below.

Now it's assignment time, then go to the next table section to learn more.