Lesson Eleven: Containers, Rows, and Cells

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; }
```
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
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
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.

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:

Lesson Twelve: Entering a Second Table Row

Coding

Lesson Eleven: Containers, Rows, and Cells