1

Creating a Layout with HTML Tables Create a New Aptana Project

● Create a new Aptana Project named “Class 3 Tables”. Change the name of your HTML page to funWithTables.html. Create a new stylesheet called tables.css and link the stylesheet to your HTML page in your new project.

● Inside the body, add a <table> element with three nested <tr> table row elements. <table> <tr> </tr> <tr> </tr> <tr> </tr> </table>

2

● In the first table row, we will add a <td> column with a colspan of 3 for our header

<td colspan=”3”>This is the Header</td>

● In the second table row, we will add three <td> columns for our left, middle and right

columns <td>left col</td> <td>middle col</td> <td>right col</td>

● In the third table row, we will add a <td> column with a colspan=”3” for our footer

<td colspan=”3”>This is the footer</td>

3

● Now we can preview our page. It doesn’t look like much. Time for some CSS!

● The first thing we will do is add a body element selector to our tables.css file with a declaration for a text-align property to center our page body {

text-align: center; }

4

● Next we will add a table element selector to our tables.css file with a declaration for our

margin table {

margin: 0 auto; }

● Now let’s add some classes to our CSS and HTML to make our three column layout. First, add a class called “header” to your 3 colspan <td> in your first table row.

<td colspan="3" class="header">this is the header</td>

● Now add the class selector to your tables.css

5

.header { text-align: center; }

● We will want to do the same thing with the footer, so add a class called “footer” to your 3 colspan <td> in your last table row.

<td colspan="3" class="footer">this is the header</td>

● And since we want to treat the CSS the same for the .header and .footer classes, we

can just add .footer to the class selector we are using for .header. .header, .footer {

text-align: center; }

6

● Let’s add a 3 px black border to our table rows and cells

tr, td { border: 3px solid black;

}

7

● Now this is what we should see when we preview our page in Aptana

● Let’s add some style to the left column and right column. We will add a class called sideCells to the first and second <td> cells in our second table row. <td class="sideCells">left col</td>

<td>middle col</td> <td class="sideCells">right col</td>

8

● Now we will add a class selector for .sideCells to our tables.css file with declarations for

width, background-color, color and padding properties .sideCells {

width: 200px; background-color: purple; color: white; padding: 10px;

}

● This is what our Aptana preview page should look like now

● We need to create one more class selector for our middle column and add the class

name to the second <td> element in our second table row. In our HTML: <td class="middleCell">middle col</td>

9

In our tables.css:

.middleCell { width: 500px; padding: 10px; height: 400px;

}

Now our page looks like this: