Today we'll be practicing making our tables more visually interesting with CSS and internal style sheets.
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.
- Add the price of each sweater below it- $6.99
- Hate how ugly it looks? Want more color options? Go here and try adding some different colors- www.w3schools.com
Ugly Christmas Sweaters | |
---|---|
![]() Only $5.99! |
![]() Only $5.99! |
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 and will include fake prices.