<!DOCTYPE html>
<html>
<head>
    <title>My Daily Favorites</title>
</head>
<body>
    <h1>My Daily Favorites</h1>
     <table border="1" style="width: 100%; font-family: Helvetica; border-collapse: collapse;">

        <tr style="background-color: OliveDrab; color: white; text-align: center;">
            <th style="padding: 10px;">Sunday</th>
            <th style="padding: 10px;">Monday</th>
            <th style="padding: 10px;">Tuesday</th>
            <th style="padding: 10px;">Wednesday</th>
            <th style="padding: 10px;">Thursday</th>
            <th style="padding: 10px;">Friday</th>
            <th style="padding: 10px;">Saturday</th>
        </tr>

        <tr style="background-color: LightCoral;">
            <td style="padding: 10px;">Cheese</td>
            <td style="padding: 10px;">Cereal</td>
            <td style="padding: 10px;">Bread</td>
            <td style="padding: 10px;">Pumpkin seeds</td>
            <td style="padding: 10px;">Yogurt</td>
            <td style="padding: 10px;">Cottage cheese</td>
            <td style="padding: 10px;">Beef Jerky</td>
        </tr>

        <tr style="background-color: SandyBrown;">
            <td style="padding: 10px;">Binge tv</td>
            <td style="padding: 10px;">Soccer</td>
            <td style="padding: 10px;">Video Games</td>
            <td style="padding: 10px;">Coding</td>
            <td style="padding: 10px;">YouTube</td>
            <td style="padding: 10px;">Helping around house</td>
            <td style="padding: 10px;">Playing with cat</td>
        </tr>

        <tr style="background-color: LightCoral;">
            <td style="padding: 10px;">Dave</td>
            <td style="padding: 10px;">Chris</td>
            <td style="padding: 10px;">Phoenix</td>
            <td style="padding: 10px;">Eva</td>
            <td style="padding: 10px;">Will</td>
            <td style="padding: 10px;">Patrick</td>
            <td style="padding: 10px;">Seth</td>
        </tr>

        <tr style="background-color: SandyBrown;">
            <td style="padding: 10px;">Home</td>
            <td style="padding: 10px;">Arcade</td>
            <td style="padding: 10px;">Park</td>
            <td style="padding: 10px;">Seth's house</td>
            <td style="padding: 10px;">H.E.B</td>
            <td style="padding: 10px;">School</td>
            <td style="padding: 10px;">Grandma's</td>
        </tr>
    </table>
</body>
</html>



In this exercise, you’ll use CSS to stylize your table of favorites.

STARTER CODE
Copy the code from the Table of Favorites exercise, found in HTML- Structuring Websites –> HTML Tables.

As you know, there is no styling on the current table!

YOUR JOB
Use CSS to make your Table of Favorites easier to read.

    Add a “header” class to the first row
        Style that class to have:
            A background color of OliveDrab
            A text color of white
            A text-align of center
    Add an “odd-row” class to the odd rows (first, third, fifth, etc)
        Note we are considering odd and even data rows and ignoring the header row for this purpose.
        Style that class so that the background is SandyBrown
    Add an “even-row” class to the even rows (second, fourth, etc)
        Style that class so that the background is LightCoral
    Add this rule to your styles:

    table {
        width: 100%;
        font-family: Helvetica;
    }

BONUS CHALLENGE

    Add any other styles you like!
        Try setting the padding property of the td tags to 10px
        Now the data in the table looks offset from the title / header row. How can you fix this?
    Add more favorites to the table!





9/15

	Pass	Test	Message
	
	Your code must have a style tag	Try again!
	
	Your code must only have 1 table	Great!
	
	Your table must have at least 5 rows (1 for the header, 4 for your favorites)	Great!
	
	Each row of your table must have exactly 7 columns.	Great!
	
	The first row of your table should have the class "header"	Try Again!
	
	The first row of your table should have a "OliveDrab" background color	Great!
	
	The first row of your table should have "white" text	Great!
	
	The first row of your table should align the text to the "center"	Great!
	
	The odd rows (third, fifth, etc) must have the class "odd-row"	Try Again!
	
	The odd rows (third, fifth, etc) must have a SandyBrown background color	Try Again!
	
	The even rows (second, fourth, etc) must have the class "even-row"	Try Again!
	
	The even rows (second, fourth, etc) must have an "LightCoral" background color	Try Again!
	
	The odd rows must NOT have the class "even-row"	Great!
	
	The even rows must NOT have the class "odd-row"	Great!
	
	Your table must have the "font-family" of "Helvetica"