Asked by t

Test Cases


9/15


Pass Test Message
Your code must have a style tag Great!
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" Great!
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" Try Again!
The even rows must NOT have the class "odd-row" Try Again!
Your table must have the "font-family" of "Helvetica" Great!


<!DOCTYPE html>
<html>
<head>
<title>Table of Favorites</title>
<style>
/* 1. Global Table Style */
table {
width: 100%;
font-family: Helvetica;
border-collapse: collapse;
}

/* 2. Header Row Styles */
.header {
background-color: OliveDrab;
color: white;
text-align: center;
}

/* 3. Odd Row Styles (Your provided CSS) */
.odd-row {
background-color: SandyBrown; /* TEST: SandyBrown background color */
}

/* 4. Even Row Styles (Your provided CSS) */
.even-row {
background-color: LightCoral; /* TEST: LightCoral background color */
}

/* Optional: Adds borders to cells for clarity */
th, td {
border: 1px solid black;
padding: 8px;
}
</style>
</head>
<body>
<h1>My Favorites Leaderboard</h1>

<table border="1">
<tr class="header">
<th>Rank</th>
<th>Category</th>
<th>Item</th>
<th>Rating</th>
<th>Year</th>
<th>Notes</th>
<th>Favorite Color</th>
</tr>

<tr class="even-row">
<td>1</td>
<td>Book</td>
<td>The Martian</td>
<td>5/5</td>
<td>2011</td>
<td>A must-read.</td>
<td>Blue</td>
</tr>

<tr class="odd-row">
<td>2</td>
<td>Movie</td>
<td>Inception</td>
<td>5/5</td>
<td>2010</td>
<td>Mind-bending.</td>
<td>Green</td>
</tr>

<tr class="even-row">
<td>3</td>
<td>Food</td>
<td>Pizza</td>
<td>5/5</td>
<td>-</td>
<td>Best comfort food.</td>
<td>Red</td>
</tr>

<tr class="odd-row">
<td>4</td>
<td>Game</td>
<td>Zelda: BOTW</td>
<td>5/5</td>
<td>2017</td>
<td>Pure adventure.</td>
<td>Gold</td>
</tr>
</table>

</body>
</html>

All Answers 1

Answered by GPT-5 mini AI
You're very close — the HTML/CSS looks fine at a glance, but the grader often checks the DOM structure strictly. The most common cause for these "odd/even row" failures is that the browser (or grader parser) implicitly inserts a <tbody> around the data rows, which can change how rows are counted or validated. The fix is to explicitly separate the header and body using <thead> and <tbody> and make sure each data row has only one of the row classes (odd-row or even-row).

Here's a corrected version you can use (I removed the table border attribute and kept borders via CSS):

<!DOCTYPE html>
<html>
<head>
<title>Table of Favorites</title>
<style>
/* 1. Global Table Style */
table {
width: 100%;
font-family: Helvetica;
border-collapse: collapse;
}

/* 2. Header Row Styles */
.header {
background-color: OliveDrab;
color: white;
text-align: center;
}

/* 3. Odd Row Styles */
.odd-row {
background-color: SandyBrown;
}

/* 4. Even Row Styles */
.even-row {
background-color: LightCoral;
}

/* Optional: Adds borders to cells for clarity */
th, td {
border: 1px solid black;
padding: 8px;
}
</style>
</head>
<body>
<h1>My Favorites Leaderboard</h1>

<table>
<thead>
<tr class="header">
<th>Rank</th>
<th>Category</th>
<th>Item</th>
<th>Rating</th>
<th>Year</th>
<th>Notes</th>
<th>Favorite Color</th>
</tr>
</thead>
<tbody>
<tr class="even-row">
<td>1</td>
<td>Book</td>
<td>The Martian</td>
<td>5/5</td>
<td>2011</td>
<td>A must-read.</td>
<td>Blue</td>
</tr>

<tr class="odd-row">
<td>2</td>
<td>Movie</td>
<td>Inception</td>
<td>5/5</td>
<td>2010</td>
<td>Mind-bending.</td>
<td>Green</td>
</tr>

<tr class="even-row">
<td>3</td>
<td>Food</td>
<td>Pizza</td>
<td>5/5</td>
<td>-</td>
<td>Best comfort food.</td>
<td>Red</td>
</tr>

<tr class="odd-row">
<td>4</td>
<td>Game</td>
<td>Zelda: BOTW</td>
<td>5/5</td>
<td>2017</td>
<td>Pure adventure.</td>
<td>Gold</td>
</tr>
</tbody>
</table>

</body>
</html>

What changed and why:
- Added explicit <thead> and <tbody> so the grader sees the header as separate and counts rows consistently.
- Ensured each data row has either class="even-row" or class="odd-row" (not both).
- Removed the obsolete border="1" attribute (kept borders in CSS).

Try that and re-run the tests — it should resolve the odd/even row checks. If it still fails, paste the latest test output and I’ll help diagnose further.