• Like
Class 3 Intro to HTML/ CSS Gdi cincinnati   create a table layout with html (aptana)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

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

  • 482 views
Published

 

Published in Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
482
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
22
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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