Styling Tables – CSS

Objectives

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

  • Populate a table with data
  • Identify some different ways that tables can be styled or customized

styling-table-work

  1. Open existing XHTML table document (Last Name-First-Name-Tables.html) using and embedded style sheet.
  2. The width of the table is 600px.
  3. Place a default setting of the font Arial, then Verdana and color #111111.
  4. The table title or heading size of font is 30px and uses a space of 15px.
  5. Each cell will have space on right of 10px, left of 10px, top of 7px and bottom of 10px.
  6. Author, Title, Reserve Price and Current bid has a 90% font size, uppercase and uses a letter spacing of 0.1em.
  7. The line above Author, Title, Reserve Price and Current bid is 1px wide and color #999.
  8. The line below Author, Title, Reserve Price and Current bid is 2px wide and color #111111.
  9. The gray color used in the cell is #efefef.
  10. Each row should have a hover state using the color #c3e6e5.
  11. Save as Last Name-First-Name-styling_tables.html.

When you have completed the previous table, please complete this table.
london-commute

  1. Create a table in an XHTML document using and embedded style sheet.
  2. The width of the table is 800px.
  3. Colors: #b1cc7f, #d8e1c6, #91c4d5, #66a8be, and #d6eaf1.
  4. Save as Last Name-First-Name-london_commute.html.

Put files in folder: Last Name-First-Name-CSS-Tables.
Upload the files at the end of day to the Google Classroom > Styling Tables.

Please click TURN IN after you submit.

Due Friday, December 9 2016.

Advertisements