Tables

Tables are used in almost every web page and have many uses.
Basically they are a way to partition off portions of the page in a grid formation.
They can be bordered or invisible.
Everything about a table can be manipulated with very pleasing results.

Before we make a table I will explain the main elements (tags).
The table tag <table></table> encloses row tags <tr></tr> and the row tags enclose column tags <td></td>
All content will be within the column (td) tags. These are the cells of the table.
The table tag and the cell tags can contain many variables which we will get into.

Open Page2.
Make some space after the heading by pressing enter to give us room to work. This space will not show on the page because we have not given any commands.


<html xmins=http://www.w3.org/1999/xhtml">
   <head >          
      <title >
         Page 2
      </title >
      <meta name="GENERATOR"content="Arachnophilia 5.5">
      <meta name="FORMATTER"content="Arachnophilia 5.5">

   </head >
   <body bgcolor="#ffffff"text="#000000"link="#0000ff"vlink="#800080"alink="#ff0000">

       <div align="center"><H1 >My Second Page </H1 >

       Make some space here

</div >

   </body >

</html >

Go to Macros - Secondary Toolbars - Tables and click on TableWiz

We will make a table with 6 cells, 2 down (rows tr) and 3 across (columns td)
The table will take up 80% of the page width and have a border 5 pixels wide.
Each cell will have a padding of 10 pixels of space around whatever we put in it.
We will include 'Placeholder Data' to help you figure out where everything is.

Click 'Create'
The result is shown below.


<table cellspacing="0" cellpadding="10" border="5" width="80%" >
   <tr >
       <!-- Row 1 Column 1 -->
      <td >
          R1C1
      </td >
       <!-- Row 1 Column 2 -->
      <td >
          R1C2
      </td >
       <!-- Row 1 Column 3 -->
      <td >
          R1C3
      </td >
   </tr >
   <tr >
       <!-- Row 2 Column 1 -->
      <td >
          R2C1
      </td >
       <!-- Row 2 Column 2 -->
      <td >
          R2C2
      </td >
       <!-- Row 2 Column 3 -->
      <td >
          R2C3
      </td >
   </tr >


And this is how it will show on the page.

The place markers will show in their cells when you preview

My Second Page

R1C1 R1C2 R1C3
R2C1 R2C2 R2C3

We can now look at the variables.
The width variable in the table can be % as we have here or by leaving off the % it becomes pixels.
You can also add a width variable to a cell, either % or px, but be aware that all cells in that column will be the same size.
I will make the first cell 300 px wide.
Background colors (bgcolor="" or background graphics (background="") can be added to the table tag and each cell tag.
Let us add a pink background to the table tag. bgcolor="pink"
A different color to the first cell. bgcolor="yellow"
and our background graphic to the second cell. (row 1 column 2) background="mybackground.jpg"


<table cellspacing="0" cellpadding="10" border="5" width="80%" bgcolor="pink" >
   <tr >
       <!-- Row 1 Column 1 -->
      <td bgcolor="yellow" width="300" >
          R1C1
      </td >
       <!-- Row 1 Column 2 -->
      <td background="mybackground.jpg" >

          R1C2
      </td >

I am not going for 'Pretty' here but it gives you an idea.

My Second Page

R1C1 R1C2 R1C3
R2C1 R2C2 R2C3

In the next tutorial we will use a table in a normal way and cover linking graphics to other pages.



Back   Next