Original Page:

Original Page CSS:

/* style1.css*/

.title { font-size: 22px; font-weight: bold; text-align: center; text-decoration: underline; }

.table1 { font-family: Arial, Helvetica, sans-serif; border-collapse: collapse; }

.table1 td { border: 1px solid #ddd; padding: 8px ; }

.table1 tr:nth-child(even) { background-color: #f2f2f2 }

.table1 tr:nth-child(odd) { background-color: DodgerBlue; color: white; }

.table1 td:nth-child(odd) { color: red; }

.table1 td:nth-child(even) { color: green; }

.table2 { border-collapse: collapse; width: 75%; margin-top: 20px; margin-right: auto; /* center in the page */ margin-left: auto; }

.table2 th { padding-top: 12px; padding-bottom: 12px; text-align: right; background-color: #4CAF50; color: white; }

.table2 td { border: 1px solid black; padding: 10px; }

.table2 tr:nth-child(even) { background-color: red; }

.table2 tr:nth-child(even) { background-color: blue; }

NEW: Create a second page (e.g. "page2.html") and another style sheet (e.g. "page2.css"). The object here is to understand how to use DIV tags to create a page that looks the same as your second page, but without using TABLES. Using only

tags and classes (e.g.

...) make a page that looks identical to your second page. You should used a

...

where you used the .. tag in your other page Inside that tag, put

...

where you used the ... tags Inside that, put

...

or

...

for the or tags. In your CSS make sure to give "width" to the .cell and .header classes along with the other style that made your table look like it did. 1 2 3 6 Lab 2/4: backgrounds and tables 12 13 14 15 16 19 22 23 24 27 30 31 32 35 38 39 43

17 row 1,1 18	20 row 1,2 21
	25 row 2,2 26	28 row 2,3 29
	33 row 3,2 34	36 row 3,3 37
41 row 4 42

45 40 44 46 48 47 49 52 53 54 55 56 57 58 59 60 61 62 63

50 This is a header 51
one	two	three
four	five	six

64 65 66 67