Creating a Layout with HTML TablesCreate a New Aptana Project   ●   Create a new Aptana Project named “Class 3 Tables”. Ch...
●   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 He...
●   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...
●   Next we will add a table element selector to our tables.css file with a declaration for our    margin    table    {   ...
.header {           text-align: center;    }●   We will want to do the same thing with the footer, so add a class called “...
●   Let’s add a 3 px black border to our table rows and cells    tr, td {             border: 3px solid black;    }       ...
●   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...
●   Now we will add a class selector for .sideCells to our tables.css file with declarations for    width, background-colo...
In our tables.css:.middleCell {        width: 500px;        padding: 10px;        height: 400px;}Now our page looks like t...
Upcoming SlideShare
Loading in …5
×

Class 3 Intro to HTML/ CSS Gdi cincinnati create a table layout with html (aptana)

956 views

Published on

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
956
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
26
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Class 3 Intro to HTML/ CSS Gdi cincinnati create a table layout with html (aptana)

  1. 1. Creating a Layout with HTML TablesCreate 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> 1
  2. 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> 2
  3. 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; } 3
  4. 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 4
  5. 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; } 5
  6. 6. ● Let’s add a 3 px black border to our table rows and cells tr, td { border: 3px solid black; } 6
  7. 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> 7
  8. 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> 8
  9. 9. In our tables.css:.middleCell { width: 500px; padding: 10px; height: 400px;}Now our page looks like this: 9

×