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>
    <meta charset="utf-8">
    <title>The Animal Kingdom Table</title>
    <link rel="stylesheet" type="text/css" href="aktable.css">
    <h1>The Animal Kingdom Table</h1>
    When you are confident that your code is correct:

    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. 


  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.)
    Help us build this table by submitting additional African animals

  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