Page Banner

Lesson Practice 6-2:
Styling Tables


Task 1 - Controlling Cell Widths and Heights

  1. Open a text2.htm in Notepad++.  Immediately Save the file in your CSS folder as box6.htm.

  2. In the title element, add the title: Controlling Cell Widths and Heights

  3. Remove the width attribute from the table tag.

  4. Change the h2 header at the top of the page to same text as in the title.

  5. To the table rule, add a declaration making the width of the table 60% of the available space on the page.

  6. Create a class named .cellw and add a declaration to set the width to 33%.

  7. Create a class named .rowh and add as declaration to set the height to 100 pixels.

  8. Add the cellw class to all cells in the first row.

  9. Add the rowh class each row in the table.

  10. Add a div element to enclose the entire table. Apply the center class to the div element.

  11. Preview the file to see the effects. If any property does not work, trouble-shoot to fix it.

  12. Save the file again.


Task 2 - Working with Vertical Alignment in Tables

  1. Open a box6.htm in Notepad++.  Immediately Save the file in your CSS folder as box7.htm.

  2. In the title element, add the title: Working with Vertical Alignment in Tables

  3. Change the text in the h2 header at the top of the page to the same text as in the title.

  4. Create a class named .top and set the vertical alignment to top.

  5. Create a class named .bottom and set the vertical alignment to bottom.

  6. Add the top class to the second, fifth and eighth rows (the ones that say row 1, row 4, and row 7).

  7. Add the bottom class to the fourth and seventh rows (the ones that say row 3 and row 6).

  8. Preview the file to see the effects. Notice that the rows you did not change are centered vertically by default. If any property does not work, trouble-shoot to fix it.

  9. Save the file again.


Task 3 - Working with Spacing in Tables

  1. Open a box7.htm in Notepad++.  Immediately Save the file in your CSS folder as box8.htm.

  2. In the title element, add the title: Working with Spacing in Tables

  3. Change the text in the h2 header at the top of the page to the same text as in the title.

  4. Create a class named .topspace and set the top padding to 20 pixels.

  5. Create a class named .bottomspace and set the bottom padding to 15 pixels.

  6. Create a class named .sidespace and set the left and right padding to 10 pixels.

  7. Add the topspace class to each cell in the second row (the ones that says row 1).

  8. Add the bottomspace class to each cell in the the seventh row (the ones that says row 6).

  9. Add the sidespace class to the first and last cells in each row.

  10. Preview the file to see the effects. If any property does not work, trouble-shoot to fix it.

  11. Save the file again.


Task 4 - Controlling Table Borders

  1. Open a box8.htm in Notepad++.  Immediately Save the file in your CSS folder as box9.htm.

  2. In the title element, add the title: Controlling Table Borders

  3. Change the text in the h2 header to the top of the page to the same text as in the title.

  4. In the table rule, remove the border spacing declaration and add the border-collapse property set to collapse.

  5. Preview the file to see the effects.

  6. Change/add declarations in the table rule to make the border darkgray, 2 pixels and solid.

  7. Change/add declarations in the td rule to make the border darkgray, 1 pixel and solid

  8. Create a class named .bottomborder and set the bottom border to darkred, 2 pixels and double.

  9. Apply the bottomborder class to the cells in the top row (with col1, col2, col3 in it).

  10. Preview the file to see the effects. If any property does not work, trouble-shoot to fix it.

  11. Save the file again.

bonom bar