Today we'll be practicing making our tables more visually interesting with CSS and internal style sheets. You worked with internal style sheets on your last project to style text, headlines, links, etc. You will now use them to style tables.

You will learn attributes for the table itself, the text within it, the background color, and headers, etc. Table refers to the entire table, td refers to the table cells (content within the rows), and th refers to table header, an optional header you can have to separate content within your table.

You're going to create a table that looks like the following:

You will start out with the code below. Follow the instructions to change the text, background color, etc. I have put the first two images in the table and you will have to put in the four remaining images. All images are sweater-1.gif, sweater-2.gif, sweater-3.gif, etc.

Please make the following changes to the table below:

- Make the border 1px

- Make the table 700px

- Change the background color to lightgreen

- Make the font size 1em

- Make the font weight bold

- Change the th (table header) from pink to red

- Change the font in the th from white to darkgreen

- Make the font size 2em

- Please replace the text "put sweater image here" with an image of one of the remaining four sweater images.

Ugly Christmas Sweaters
put sweater image here put sweater image here
put sweater image here put sweater image here

When you're done it should look like the table in the image above but will be larger than that.

I've put the following table examples in as images and you will be asked to make some changes in your table code above.

Notice how there is a border around the table and each of the pictures in the table. What if you just wanted a border only around the table?

Under the td section in the style sheet, instead of border="1" put border="0". It should look like the following:

What if you wanted a border just around the pictures and not the entire table?

Under the td section in the style sheet, instead of put border="1". In the table section put border="0". It should look like the following:

That looks weird with the light green background. How about we make the background white?

That looks better!