Erro html (scope="row") - Crie uma tabela de disponibilidade

freeCodeCamp Support
1

Certificação em design responsivo para web - Em CSS: Fiz desta manerira de acordo com o exercício, mas não avança. O scope=“row” não está sendo aceito. Fico no aguardo de solução. Obrigada! Exemplo:

<table>
  <thead>
    <tr>
      <th scope="col">Time</th>    
    </tr>
  </thead>
  <tbody>
    <tr class="sharp">
      <th scope="row" class="time">09:00</th>
    </tr>  
  </tbody>
<table>
2

Hi @Katarine1,

Would you please post a link to this challenge?

Thank you

3

Olá! Obrigada pela atenção!

Segue o link da tarefa:

4

Hi @Katarine1 ,

Is your table element closed correctly?

Happy coding

5

Oi, obrigada! No exemplo realmente eu esqueci o fechamento da tag . Lá no exercício está com o fechamento normal da tag e não avança.

6

What is the first failing test you see when you check your code?

7

Item 39. Todas as células de cabeçalho da tabela na primeira coluna devem ter um atributo scope com o valor row.

Erro:
Todas as células de cabeçalho da tabela na primeira coluna devem ter um atributo scope com o valor row.

8

Exemplo:

<table>
  <thead>
   <tr>
    <th scope="col">Time</th>
    <th scope="col">Monday</th>
    <th scope="col">Tuesday</th>
    <th scope="col">Wednesday</th>
    <th scope="col">Thursday</th>
    <th scope="col">Friday</th>
  </tr>
 </thead>
 <tbody>
  <tr class="sharp">
    <th scope="row" class="time">09:00</th>
    <td class="available-5" aria-label="5+ available">5+</td>
    <td class="available-4" aria-label="4 available">4</td>
    <td class="available-3" aria-label="3 available">3</td>
    <td class="available-2" aria-label="2 available">2</td>
    <td class="available-1" aria-label="1 available">1</td>
  </tr>
 </tbody>
</table>

  Obrigada!
9

That is not what I saw with the code you posted.

Please post ALL of your updated code, formatted as follows:

There are two ways you can format your code to make it easier to read and test:

  1. After you copy/paste your code into the editor, select it by dragging your cursor over it then click the (</>) button in the toolbar to automatically wrap your code in backticks. (You can click on the animated demo image below to enlarge it.)

1356×380 401 KB

  1. Manually add three backticks on a new line above your code and on a new line after your code. Note that a backtick is NOT the same as a single quote('). To find the backtick key on your keyboard, see this post.

To see changes to your post as you make them, you can click the (M+) button on the toolbar to bring up the rich text editor:

image
image482×117 7.55 KB

Thank you.

10 
<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Availability Table</title>

    <link rel="stylesheet" href="styles.css">

</head>



<body>



  <table>



    <caption>Weekly Meeting Availability Schedule</caption>



    <thead>



      <tr>

        <th scope="col">Time</th>

        <th scope="col">Monday</th>

        <th scope="col">Tuesday</th>

        <th scope="col">Wednesday</th>

        <th scope="col">Thursday</th>

        <th scope="col">Friday</th>

      </tr>



    </thead>

    <tbody>



      <tr class="sharp">

        <th scope="row" class="time">09:00</th>

        <td class="available-5" aria-label="5+ available">5+</td>

        <td class="available-4" aria-label="4 available">4</td>

        <td class="available-3" aria-label="3 available">3</td>

        <td class="available-2" aria-label="2 available">2</td>

        <td class="available-1" aria-label="1 available">1</td>

      </tr>



      <tr class="half">

        <th scope="row" class="time">10:00</th>

        <td class="available-4" aria-label="4 available">4</td>

        <td class="available-3" aria-label="3 available">3</td>

        <td class="available-2" aria-label="2 available">2</td>

        <td class="available-1" aria-label="1 available">1</td>

        <td class="available-0" aria-label="0 available">0</td>

      </tr>



      <tr class="sharp">

        <th scope="row" class="time">11:00</th>

        <td class="available-3" aria-label="3 available">3</td>

        <td class="available-2" aria-label="2 available">2</td>

        <td class="available-5" aria-label="5+ available">5+</td>

        <td class="available-4" aria-label="4 available">4</td>

        <td class="available-2" aria-label="2 available">2</td>

      </tr>



      <tr class="half">

        <th scope="row" class="time">12:00</th>

        <td class="available-2" aria-label="2 available">2</td>

        <td class="available-1" aria-label="1 available">1</td>

        <td class="available-4" aria-label="4 available">4</td>

        <td class="available-3" aria-label="3 available">3</td>

        <td class="available-0" aria-label="0 available">0</td>

      </tr>



      <tr class="sharp">

        <th scope="row" class="time">13:00</th>

        <td class="available-1" aria-label="1 available">1</td>

        <td class="available-0" aria-label="0 available">0</td>

        <td class="available-3" aria-label="3 available">3</td>

        <td class="available-5" aria-label="5+ available">5+</td>

        <td class="available-4" aria-label="4 available">4</td>

      </tr>



    </tbody>

    

  </table>



  <div id="legend">

    <span>Availability</span>

    <div id="legend-gradient"></div>

  </div>

</body>

</html>
11

Please change this header cell so it’s formatted like this one, including a time:

Currently, the tests are too strict and it’s my understanding that the next deployment will fix that.

In the future, when you need help, please post all of your code. We cannot test with snippets.

Thank you.

12

Muito obrigada de coração, meus amigos!