RaysWebClass.Com


Lesson 7:   HTML Tables (Part Two)


  1. Cellpadding & Cellspacing
    An ordinary table:

    A B
    C D
    Code:

    <table border='1'>
    <tr>
      <td>A</td>
      <td>B</td>
    </tr><tr>
      <td>C</td>
      <td>D</td>
    </tr>
    </table>

    Note the space between the outer border and the inner border and how the letters are almost touching the inner border. Add the following code to your open table tag:

    <table border='1' cellspacing='6'>

    A B
    C D
    Cellspacing adjusts the spacing between cells.
    Change the open table tag to:

    <table border='1' cellpadding='6'>

    A B
    C D
    Cellpadding adjusts the spacing within a cells.
    Now change to this:

    <table border='1' cellspacing='0' cellpadding='6'>

    A B
    C D
    By setting the cellspacing='0' the spacing between cells disappears, so you now have a table with a single border around each cell.

    By increasing the border width you can use a table to create a frame around a picture:



    Code:

    <table border='10' cellspacing='0' cellpadding='0'>
    <tr>
      <td><img src='tory.gif'></td>
    </tr>
    </table>

  2. Table & Cell Alignment
    Adding an align attribute in the open table tag will adjust the position of the table on the page. E.G.

    <table align='right'>
    <table align='center'>
    <table align='left'>


    Adding align & valign inside of a cell will adjust an object's position within the cell:

    <td height='100' width='100' align='left' valign='top'>


    <td height='100' width='100' align='center' valign='middle'>


    <td height='100' width='100' align='right' valign='bottom'>


  3. Table Color

    You can change the color of the table border:
    A B
    C D
             
    <table border='4' bordercolor ='blue' cellspacing='0' cellpadding='4'>
    <tr>
      <td>A</td>
      <td>B</td>
    </tr><tr>
      <td>C</td>
      <td>D</td>
    </tr>
    </table>

    Notice how the "3-D" look of the table border is lost when you use the bordercolor tag. You can overcome this by using the bordercolorlight and bordercolordark tags:

    A B
    C D
             
    <table border='4' bordercolorlight ='lightgreen'
     bordercolordark='green'
    cellspacing='0'
     cellpadding='4'>
    <tr>
      <td>A</td>
      <td>B</td>
    </tr><tr>
      <td>C</td>
      <td>D</td>
    </tr>
    </table>

    A table's background color can be set in the open table tag:

    A B
    C D
             
    <table border='4' bordercolorlight ='lightgreen'
     bordercolordark='green'
     bgcolor='yellow'
     cellspacing='0' cellpadding='4'>
    <tr>
      <td>A</td>
      <td>B</td>
    </tr><tr>
      <td>C</td>
      <td>D</td>
    </tr>
    </table>

    Or you can set the background color in table row tag:

    A B
    C D
              <table border='4' cellspacing='0' cellpadding='4'>
    <tr bgcolor ='lightgreen'>
        <td>A</td>
        <td>B</td>
    </tr><tr bgcolor ='lightblue'>
        <td>C</td>
        <td>D</td>
    </tr>
    </table>

    Or you can set background color cell by cell:

    A B
    C D
              <table border='4' cellspacing='0' cellpadding='4'>
    <tr>
        <td bgcolor ='lightgreen'>A</td>
        <td bgcolor ='yellow'>B</td>
    </tr><tr>
        <td bgcolor ='lightblue'>C</td>
        <td bgcolor ='violet' style='color: red;'>D</td>
    </tr>
    </table>

  4. Column Groups
    <html>
    <body>
    <table border='1' cellspacing='0' bgcolor='cornflowerblue'>
    <colgroup></colgroup>
    <colgroup bgcolor='red'></colgroup>
    <colgroup align='right'></colgroup>
    <tr align='center'>
      <td width='220'> testing </td>
      <td width='220'> testing </td>
      <td width='220'> testing </td>
    </tr>
    <tr align='center'>
      <td> testing </td>
      <td> testing </td>
      <td> testing </td>
    </tr>
    <tr align='center'>
      <td> testing </td>
      <td> testing </td>
      <td> testing </td>
    </tr>
    </table>

    testing testing testing
    testing testing testing
    testing testing testing


  5. Page Table Template

    A table can be used as a template for an entire page or an entire web site. By using the following code you can design a template that you can use again and again to create new pages for you Web site.

    <html>
    <head>
        <title>Page Table Template</title>
    </head>
    <body bgcolor='gray' style='margin:0;border:0;padding:0;'>
    <table border='1' bgcolor='white' align='center' width='800' height='100%'>
    <!-- * * * * * * -->
    <!-- * Header  * -->
    <!-- * * * * * * -->
    <tr>
        <td colspan='2' height='100'>
            <!-- * Header goes below here * -->

            <!-- * Header goes above here * -->
        </td>
    </tr>
    <!-- * * * * * -->
    <!-- * Menu  * -->
    <!-- * * * * * -->
    <tr>
        <td width='120' valign='top'>
        <!-- * Menu goes below here * -->

        <!-- * Menu goes above here * -->
        </td>
    <!-- * * * * * * * -->
    <!-- * Main Body * -->
    <!-- * * * * * * * -->
        <td valign='top'>
        <!-- * Main Body goes below here * -->

        <!-- * Main Body goes above here * -->
        </td>
    </tr>
    <!-- * * * * * * -->
    <!-- * Footer  * -->
    <!-- * * * * * * -->
    <tr>
        <td colspan='2' height='60'>
            <!-- * Footer goes below here * -->

            <!-- * Footer goes above here * -->
        </td>
    </tr>
    </body>
    </html>
    The table is 800 pixels wide because monitor are shipped set to 800 by 600 and many people do not change the settings. By restricting your Web page to 800 pixels wide you can be assured that your page will look the same on all computers. The table has four sections: the Header, Menu, Main Body, and Footer. A new page can be created for each new content of the Main Page. You will learn, later, that the content of the Header, Menu and Footer can be placed into include files where a change to the include file will be seen on all the Web pages (click here to see the include file method).


  6. Frames & Rules

    frame = void|above|below|hsides|lhs|rhs|vsides|box|border [CI]
    This attribute specifies which sides of the frame surrounding a table will be visible. Possible values: rules = none|groups|rows|cols|all [CI]
    This attribute specifies which rules will appear between cells within a table. The rendering of rules is user agent dependent. Possible values:

Web Page Design: Exercise 7

And finally let's add content to the History page.
Copy this image below to the images folder if it's not already there:

NOTE: You may have to remove the [1] from the name of the copied image.
For example, history.gif may copy over to the images folder as history[1].gif


Add this content to the History page:

    Dear visitor,

    <p>
    Our company, Global Company, has been around sense

    <!-- * * * * * * * * * * * * * * * * -->
    <!-- * Display Day/Date 2 Days Ago * -->
    <!-- * * * * * * * * * * * * * * * * -->
    <SCRIPT LANGUAGE="Javascript">
      var dayNames = new Array(
      "Sunday","Monday","Tuesday","Wednesday",
      "Thursday","Friday","Saturday");
      var monthNames = new Array(
      "January","February","March","April",
      "May","June","July","August",
      "September","October","November","December");
      var now = new Date();
      now.setDate(parseInt(now.getDate()-2));
      document.write(dayNames[now.getDay()] + ", " +
      monthNames[now.getMonth()] + " " +
      (now.getDate()) + ", " + now.getFullYear());
    </SCRIPT>.

    We have developed no less than 3 products in our sterling two day history - the Doodad, the Gadget, and the Widget. We are very proud of our accomplishments and expect to have 4 products within the next three decades. The President, CEO, Product Developer, Wed Designer, and sole employee says:
    </p>

    <blockquote>
    "I created this company from the ground up and I am very proud of what I have accomplished in only two and a half days!"
    </blockquote>

    <p>
    Although none of our products have grown beyond the initial drawing phase, we hope to have full working models in a decade or two.
    </p>

    <p>
    Please feel free to persue our product lines and if you see anything you like, feel free to order directly from this Web site.
    </p>

    Sincerely,
    <br><br>

    Ray LePine,
    <small>President, CEO, Product Developer, Web Designer and sole employee</small>
    <br><br>

    <div align='center'>
        <img src='images/history.jpg'>
    </div>