Não consegui fazer o cabeçalho das notas no desafio 14 sobre tabelas!

Home › Fóruns › Desenvolvimento Web 2020 (HTML5+CSS3) › Não consegui fazer o cabeçalho das notas no desafio 14 sobre tabelas!

Visualizando 1 resposta da discussão
  • Autor
    Posts
    • 24 de fevereiro de 2023 às 04:45 #110858
      Claudia
      Participante

      <!DOCTYPE html>
      <html lang=”pt-br”>
      <head>
      <meta charset=”UTF-8″>
      <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
      <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
      <title>Tabela de Notas</title>
      <style>

      table {

      width: 500px;
      border-collapse: collapse

      }

      th {

      border: 2px solid black;
      padding: 10px;
      text-align: center;
      background-color: rgb(155, 151, 151);
      color: rgb(241, 235, 235);
      }

      td {

      border: 2px solid black;
      padding: 10px;
      text-align: center;
      }

      .nota {

      border: 2px solid black;
      padding: 10px;
      text-align: center;
      }
      .media {

      background-color:rgb(155, 151, 151) ;
      color: rgb(241, 235, 235) ;
      }

      .notas {

      border: 2px solid black;
      padding: 10px;
      text-align: center;
      }

      </style>
      </head>
      <body>
      <h1> Notas Finais</h1>
      <table>
      <caption> Turma 3002</caption>
      <thead>

      <tr>
      <th>Área</th>
      <th scope=”rowgroup”>Disciplinas</th>
      <th colspan=”2″ scope=”colgroup” class=”notas”>Notas:<br> Nota 1 Nota 2 </th>

      <th> Média</th>

      </tr>

      </thead>

      <tbody>

      <tr>
      <td rowspan=”4″>Exatas</td>
      <td>Matemática</td>
      <td>1</td>
      <td>5</td>
      <td>8</td>

      </tr>
      <td>Física</td>
      <td>3</td>
      <td>5</td>
      <td>6</td>

      </tr>
      <td>Química</td>
      <td>3</td>
      <td>5</td>
      <td>6</td>

      </tr>
      <td>Biologia</td>
      <td>3</td>
      <td>5</td>
      <td>6</td>

      <tr>
      <th colspan=”4″ scope=”colgroup”> Média de Exatas</th>
      <td class=”media” >0,0</td>
      </tr>

      <tr>
      <td rowspan=”2″ >Humanas</td>
      <td>História</td>
      <td>0,0</td>
      <td>0,0</td>
      <td>0,0</td>

      </tr>

      <tr>
      <td>Geografia</td>
      <td>0,0</td>
      <td>0,0</td>
      <td>0,0</td>

      </tr>

      <tr>

      <th colspan=”4″ scope=”colgroup” > Média de Humanas</color> </th>
      <td class=”media”>0,0</td>

      </tr>

      </tbody>

      </table>

      </body>
      </html>

    • 24 de fevereiro de 2023 às 18:13 #110906
      Tutora Jessica
      Moderador

      Ola Claudia,
      Seu código precisa utilizar das propriedades rowspan e colspan , após o campo notas 1 e 2 precisam estar em outra linha (<th> </th>).

  • Autor
    Posts
Visualizando 1 resposta da discussão
  • Você deve fazer login para responder a este tópico.