Advanced Tables

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.

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

Screenshot

Screenshots and source code for this project are available when you purchase the curriculum.

Rubric