Having trouble with Table columns

HTML-CSS
1

For the assignment “Build a Book Inventory App” I have fulfilled every requirement except for one.
“Table must have five columns”.
This is very confusing, since my table does show up in the browser as having five columns. I’m struggling to see any way that the linter can miss this, I even looked at the source code of the example project.

I’m wondering if anyone can see the issue here? This is my source by the way.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Book Inventory</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Book Inventory</h1>
<table>
  <thead>
    <tr>
      <th>Title</th>
      <th>Author</th>
      <th>Category</th>
      <th>Status</th>
      <th>Rate</th>
    </tr>
  </thead>
  <tbody>
    <tr class="read">
      <th>Ready Player One</th>
      <td>Ernest Cline</td>
      <td>Sci-fi, Adventure, Action</td>
      <td><span class="status">Read</span></td>
      <td><span class="rate two">
        <span></span>
        <span></span>
        <span></span>
      </td>
    </tr>
    <tr class="read">
      <th>The Lightning Thief</th>
      <td>Rick Riordan</td>
      <td>Fantasy, Adventure, Action</td>
      <td><span class="status">Read</span></td>
      <td><span class="rate three">
        <span></span>
        <span></span>
        <span></span>
      </td>
    </tr>
    <tr class="in-progress">
      <th>Sea of Monsters</th>
      <td>Rick Riordan</td>
      <td>Fantasy, Adventure, Action</td>
      <td><span class="status">In Progress</span></td>
      <td><span class="rate">
        <span></span>
        <span></span>
        <span></span>
      </td>
    </tr>
    <tr class="to-read">
      <th>The Titan's Curse</th>
      <td>Rick Riordan</td>
      <td>Fantasy, Adventure, Action</td>
      <td><span class="status">To Read</span></td>
      <td><span class="rate">
        <span></span>
        <span></span>
        <span></span>
      </td>
    </tr>
    <tr class="to-read">
      <th>The Battle Of The Labyrinth</th>
      <td>Rick Riordan</td>
      <td>Fantasy, Adventure, Action</td>
      <td><span class="status">To Read</span></td>  
      <td><span class="rate">
        <span></span>
        <span></span>
        <span></span>
      </td>
    </tr>
    <tr class="to-read">
      <th>The Last Olympian</th>
      <td>Rick Riordan</td>
      <td>Fantasy, Adventure, Action</td>
      <td><span class="status">To Read</span></td>
      <td><span class="rate">
        <span></span>
        <span></span>
        <span></span>
      </td>
    </tr>
    <tr class="in-progress">
      <th>Night Shift</th>
      <td>Lilith Saintcrow</td>
      <td>Dark Fantasy, Action</td>
      <td><span class="status">In Progress</span>   </td>
      <td><span class="rate">
        <span></span>
        <span></span>
        <span></span>
      </td>
    </tr>
    <tr class="to-read">
      <th>Twilight</th>
      <td>Stephanie Meyer</td>
      <td>Dark Fantasy, Romance</td>
      <td><span class="status">To Read</span></td>
      <td><span class="rate">
        <span></span>
        <span></span>
        <span></span>
      </td>
    </tr>
    <tr class="to-read">
      <th>New Moon</th>
      <td>Stephanie Meyer</td>
      <td>Dark Fantasy, Romance</td>
      <td><span class="status">To Read</span></td>
      <td><span class="rate">
        <span></span>
        <span></span>
        <span></span>
      </td>
    </tr>
    <tr class="to-read">
      <th>Eclipse</th>
      <td>Stephanie Meyer</td>
      <td>Dark Fantasy, Romance</td>
      <td><span class="status">To Read</span></td>
      <td><span class="rate">
        <span></span>
        <span></span>
        <span></span>
      </td>
    </tr>
    <tr class="to-read">
      <th>Breaking Dawn</th>
      <td>Stephanie Meyer</td>
      <td>Dark Fantasy, Romance</td>
      <td><span class="status">To Read</span></td>
      <td><span class="rate">
        <span></span>
        <span></span>
        <span></span>
      </td>
    </tr>
  </tbody>
</table>
</body>

</html>
2

Hi,
Welcome to the community!
Can you share the link to this project?
It’s better to use the help button provided on the project page. It helps you create a topic with your code and a link to the project.
Good luck!

3

Thanks. I’ll remember that next time. Here’s the link https://www.freecodecamp.org/learn/full-stack-developer/lab-book-inventory-app/build-a-book-inventory-app

4

Okay, if your failing only that one step, it’s probably because of the use of th elements instead of td. Here for example:

 <tr class="read">
      <th>Ready Player One</th>
      <td>Ernest Cline</td>
      <td>Sci-fi, Adventure, Action</td>
      <td><span class="status">Read</span></td>
      <td><span class="rate two">
        <span></span>
        <span></span>
        <span></span>
      </td>
    </tr>

You need to have five td elements in each of your table row.
Good luck!

5

It worked! Thank you very much!

1 Like