Advanced Tables

Note: the following material is from an older, outdated version of the web design curriculum pack. Please read about the revised and updated version of our Introduction to Web Design Curriculum.

Objectives

At the end of this lesson, you will be able to:

  • Create tables inside of tables
  • Use CSS padding, align, and vertical align to control how text is placed inside of a table cell
  • Add a background image to a table cell
  • Control the width and height of table cells
  • Create a basic website layout using tables

Instructions

  1. Create a new folder called Advanced Tables.
  2. Copy the Skeleton from the class website and paste it into a new Notepad file.
  3. Save the file as advanced.html. Make sure this file is saved in your Forecast folder.
  4. Create a table with three rows, and only one cell for each row:
  1. Add a table inside the second row. This new table should have one row and four columns. The final result should look like this:
  1. Add a title to your first row. Add a link to a web page in each of the four middle columns. Add “Hello World” to the third row.
Home Page
Google Yahoo Bing W3 Schools
Hello World
  1. Add a style section to your head section. The tags should look like this (don’t copy and paste this code; the quotation marks in Word don’t work with XHTML. You should type this in to your XHTML document.):
    <style type="text/css">
    </style>
    
  2. Add CSS code between the <style> and </style> tags in order to give your table a unique look. See the grading rubric on the last page for the requirements.

Styling Hints

  1. Go to http://www.w3schools.com/ and click on the Learn CSS link. From there, you may browse the links on the left for the style you want. You may also use the search box in the upper right corner to search for specific CSS styles and XHTML elements.
  2. Use a td selector to set any properties that you’d like to apply to all table cells, such as border-width, border-style, and border-color. The width of each column should be 200 pixels.
  3. Use table {border-collapse: collapse;} to collapse cell borders.
  4. Create a class called .linkCell. Inside this class, set the properties that you’d like to apply to the four links on your web page.
  5. Create a class called .headerCell. Inside this class, set the properties that you’d like to apply to the very top row on your webpage.
  6. Create a class called .bodyCell. Inside this class, set the properties you’d like to apply to the large, bottom cell on your webpage.
  7. Use body {background-color: color} to set the background color.

Properties You Will Need To Use

border-width

border-style

border-color

border-collapse

width

background-color

color

text-align

font-family

font-size

height

text-align

padding-bottom

padding-right

font-weight

vertical-align

background-image

Rubric

Component Possible Points Score
The main table contains three rows and one column 2
The table inside the middle row contains one row and four columns 2
The table contains visible, collapsed borders 2
Body
The body has an background color other than white 2
Top Row
The top row is at least 50 pixels high 2
The top row has a background image 2
The font style is large, readable, and NOT Times New Roman 2
The website title is in the bottom right corner of the top row 2
Padding is used on the right and bottom of the top row 2
Middle Row with Four Links
Each cell has a background color 2
Each cell is 200 pixels wide 2
The links are centered in the cells 2
The links work (they open the correct website) 2
The font is NOT Times New Roman 2
Bottom Row
The bottom row is 600 pixels tall 2
Text in the bottom cell is aligned at the top left 2
Padding is used so the text is not directly touching the border of the table 2
The project was submitted on time (20% off for each day late)
Total Score 34

For full projects and source code, download the updated version of our Introduction to Web Design Curriculum.