Lesson Twenty Four: Entering a Table - the Table Element

The latest version of HTML (HTML5) allows you to use the <table> element to structure and design portions of your pages.

You can use the <table> element to add a table to your webpages.

  1. Enter the skeleton code below into a new file.
    Open Notepad and add the following text:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>The Animal Kingdom Table</title>
    <link rel="stylesheet" type="text/css" href="aktable.css">
    </head>
    <body>
    <h1>The Animal Kingdom Table</h1>
    </body>
    </html>
    When you are confident that your code is correct:
    Click 

    File, Save As 

    and save your file in the c:\historytree folder as aktable.html.

     

    Double click the aktable.html file to view your table webpage. 

    Sample

  2. Add the following code below the header to make a table (Note: the <tr> tag stands for table row, the <th> tag stands for table header, and the <td> tag stands for table data.)
    <table>
    <caption>
    Help us build this table by submitting additional African animals
    </caption>
    <tr>
    <th>Animal</th>
    <th>Location</th>
    <th>Color</th>
    <th>Type</th>
    <th>Food</th>
    <th>Size</th>
    </tr>
    <tr>
    <td>Elephant</td>
    <td>Plains</td>
    <td>Grey</td>
    <td>Herbivore</td>
    <td>Peanuts</td>
    <td>Large</td>
    </tr>
    <tr>
    <td>Monkey</td>
    <td>Jungle</td>
    <td>Redish</td>
    <td>Omnivore</td>
    <td>Bananas</td>
    <td>Small</td>
    </tr>
    <tr>
    <td>Lion</td>
    <td>Plains</td>
    <td>Brown</td>
    <td>Carnivore</td>
    <td>Animals</td>
    <td>Medium</td>
    </tr>
    <tr>
    <td>Rhinoceros</td>
    <td>Water</td>
    <td>Grey</td>
    <td>Herbivore</td>
    <td>Grass</td>
    <td>Large</td>
    </tr>
    <tr>
    <td>Gorilla</td>
    <td>Jungle</td>
    <td>Black</td>
    <td>Herbivore</td>
    <td>Bananas</td>
    <td>Large</td>
    </tr>
    </table>



  3. This CSS will give you a design for your table, but feel free to make adjustments that are to your liking.
    table { font-size: 140%;
    margin-top: 100px;
    margin-right: auto;
    margin-left: auto;
    color: darkgreen;
    font-family: Verdana, Helvetica, Arial, sans-serif;
    line-height: 1.8em;
    border: solid 2px darkblue;
    border-spacing: 5px; }
    
    th { color: darkblue;
    background-color: maroon; }
    
    td { color: lightgreen;
    background-color: darkgreen;}
    
    td, th { border: 1px solid darkblue;
    padding: 5px; }
    
    caption {color: darkblue;
    font-style: italic;
    padding-top: 8px; }


    Your page should look like this: Sample