Question 397573 in Html Question posted in
Some basic documentation can be found here.

Html – Why is my editor reporting that I have one extra table row element?

The assignment errors are saying that I need 5 table row elements in my table but supposedly I have 6. I’ve went through on zyBooks and Sublime text, I’m only seeing 5. Can anyone else see what’s going on and why it’s saying I have too many table row elements?

I’ve counted the elements over and over and over in the application itself and on Sublime Text.

<body>
  <table>
    <tr>
      <caption>Red Rocks, Colorado</caption>
      <th>Photo</th>
      <th>Date</th>
      <th>Description</th>
    </tr>
    <tr>
      <td>
        <img src="https://via.placeholder.com/50" alt="View from the top row; sitting area holds 9,525 people">
      </td>
      <td>Jan 16,2018</td>
      <td>View from the top row; sitting area holds 9,525 people</td>
    </tr>
    <tr>
      <td>
        <img src="https://via.placeholder.com/50" alt="Facing south from the top of the amphitheater">
      </td>
      <td>Feb 20, 2017</td>
      <td>Facing south from the top of the amphitheater</td>
    </tr>
    <tr>
      <td>
        <img src="https://via.placeholder.com/50" alt="Nearby red rocks sit 6,450 feet (1,970m) above sea level">
      </td>
      <td>Mar 30, 2019</td>
      <td>Nearby red rocks sit 6,450 feet (1,970m) above sea level</td>
    </tr>
    <tr>
      <td colspan="5">Copyright @ 2023 Zippy Photographers</td>
    </tr>
  </table>
</body>

I’m currently reformatting since zyBooks sucks at that. Hopefully that will help.

Tags:

2

Answers


  1. 0

    You’ve misapplied the caption element.

    If included, the <caption> element must be the first child of its parent <table> element.

    By including it in a row, you force the browser to guess at what valid HTML you intended. It’s wrapping the caption in a separate tbody element (which your table lacks). Your assignment analyzer may be interpreting it as another row.

    Be sure to peruse the docs for every element you use so you understand its purpose and its constraints. They’re not to be used arbitrarily.

    Then, look into how to examine your page with your browser’s document inspector. It’s an invaluable tool for troubleshooting and would’ve given you hints to the reason for this problem.

    <body>
  <table>
    <tr>
      <caption>Row 1</caption>
      <th>Row 2</th>
      <th>Date</th>
      <th>Description</th>
    </tr>

    <tr>
      <td>
        Row 3
      </td>
      <td>Jan 16,2018</td>
      <td>View from the top row; sitting area holds 9,525 people</td>
    </tr>

    <tr>
      <td>
        Row 4
      </td>
      <td>Feb 20, 2017</td>
      <td>Facing south from the top of the amphitheater</td>
    </tr>

    <tr>
      <td>
        Row 5
      </td>
      <td>Mar 30, 2019</td>
      <td>Nearby red rocks sit 6,450 feet (1,970m) above sea level</td>
    </tr>

    <tr>
      <td colspan="5">Row 6</td>
    </tr>
  </table>
</body>
    Login or Signup to reply.
  2. 0

    You are missing <thead> <tbody> <tfoot> elements
    and <caption> element should be independent (not inside a <tr> !)

    table {
  background      : darkblue;
  border-collapse : separate;
  border-spacing  : 1px;
  margin-bottom   : .8em;
  }
table caption {
  font-size   : 1.4rem;
  font-weight : bold;
  padding     : .4em 0;
  }
th {
  background-color : #7fccff;
  padding          : .4em .6em ;
  }
td {
  background-color : whitesmoke;
  padding          : .4em;
  }
    <table>
  <caption>Red Rocks, Colorado</caption>
  <thead>
    <tr>
      <th>Photo</th>
      <th>Date</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <img src="https://via.placeholder.com/50" alt="View from the top row; sitting area holds 9,525 people">
      </td>
      <td>Jan 16,2018</td>
      <td>View from the top row; sitting area holds 9,525 people</td>
    </tr>
    <tr>
      <td>
        <img src="https://via.placeholder.com/50" alt="Facing south from the top of the amphitheater">
      </td>
      <td>Feb 20, 2017</td>
      <td>Facing south from the top of the amphitheater</td>
    </tr>
    <tr>
      <td>
        <img src="https://via.placeholder.com/50" alt="Nearby red rocks sit 6,450 feet (1,970m) above sea level">
      </td>
      <td>Mar 30, 2019</td>
      <td>Nearby red rocks sit 6,450 feet (1,970m) above sea level</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">Copyright @ 2023 Zippy Photographers</td>
    </tr>
  </tfoot>
</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search