Lesson Eleven: Containers, Rows, and Cells

  1. In order to add a table, you must first create a table container. Add this id to your CSS file:
    #tablecontainer1 { display: table; border-spacing 10px; border: solid darkgreen 2px; }
  2. Add this code (in your html file) to call the CSS id and create the container:
    <div id="tablecontainer1"> <p>Container One</p> </div>
    Your page should look like this: Sample

  3. Use the following code in your CSS file to create a table row id and a table cell class: (You can create multiple cell ids if you want your cells to have different properties, however, on this Webpage all the cells will have the same properties.)
    #tablerow1 { display: table-row; }
    .tablecell { display: table-cell; border: solid darkblue 2px; width: 200px; vertical-align: top; }

    Change your paragraph element to:
    <p>Row One Cell One</p>

    Your entire container html code will look like this (the color is added to help you understand how the nesting of the divs works:)
    <div id="tablecontainer1">
    <div id="tablerow1">
    <div class="tablecell">
    <p>Row One Cell One</p>
    </div>
    </div>
    </div>

    Your page should look like this: Sample

  4. Notice the area of separation that exists between the table container and the table cell. This separation is determined by the border-spacing property of 10 pixels that you entered in the tablecontainer1 id of your CSS file. Enter a value of 100px in the border-spacing property in the tablecontainer1 id and view your page.
    Once you have verified the border-spacing property, change the value back to 10px.

  5. Nest the blue code between the Table Row divs to add a second cell and third cell to the Table Container:
    <div id="tablecontainer1">
    <div id="tablerow1">
    <div class="tablecell">
    <p>Row One Cell One</p>
    </div>
    <div class="tablecell">
    <p>Row One Cell Two></p>
    </div>
    <div class="tablecell">
    <p>Row One Cell Three</p>
    </div>
    </div>
    </div>

    Your page should look like this: Sample

Lesson Twelve: Entering a Second Table Row