ir para conteúdo

Treinamento de HTML

Tabelas

Uma tabela repreenta dados tabulares — ou seja, informações apresentadas em uma tabela bidimensional composta por linhas e colunas de células contendo dados.

Observação: Os números mencionados nos exemplos, são as linhas do código fonte HTML.

← Retornar para página principal

Tabela simples

Exemplo incorreto



      <table>  

        <tr>

          <td>Marco Telles</td>

          <td>Lider Técnico</td>

        </tr>

        <tr>

          <td>Joana Silva</td>

          <td>Team Lead</td>

        </tr>

        <tr>

          <td>Leopoldo Nogueira</td>

          <td>PO</td>

        </tr>

        <tr>

          <td>Pedro Santos</td>

          <td>CX</td>

        </tr>

      </table>

Exemplo prático

Marco Telles Lider Técnico
Joana Silva Team Lead
Leopoldo Nogueira PO
Pedro Santos CX

Exemplo Correto



      <table>

        <caption>Lideres tecnicos</caption>

        <thead>

          <tr>

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

            <th scope="col">Função</th>

          </tr>

        </thead>

        <tbody>

          <tr>

            <td>Marco Telles</td>

            <td>Lider Técnico</td>

          </tr>

          <tr>

            <td>Joana Silva</td>

            <td>Team Lead</td>

          </tr>

          <tr>

            <td>Leopoldo Nogueira</td>

            <td>PO</td>

          </tr>

          <tr>

            <td>Pedro Santos</td>

            <td>CX</td>

          </tr>

        </tbody>

      </table>

Exemplo prático

Lideres tecnicos
Nome Função
Marco Telles Lider Técnico
Joana Silva Team Lead
Leopoldo Nogueira PO
Pedro Santos CX

Tabela complexa

Exemplo incorreto



      <table class="complexexample">

        <caption><span lang="en">Onboarding</span> de Acessibilidade</caption>

        <tbody>

          <tr>

            <th rowspan="5">Segunda, 1 de Junho</th>

            <td>9:00 a.m - 10:30 a.m</td>

            <td>RH 001</td>

            <td>Introdução a empresa: Visão e missão</td>

          </tr>

          <tr>

            <td>10:30 a.m. - 12:00 p.m.</td>

            <td>RH 001</td>

            <td>Políticas de Recursos Humanos</td>

          </tr>

          <tr>

            <td align="center" colspan="5">

              <strong><em>Almoço de 12:00 às 13:00.</em></strong>

            </td>

          </tr>

          <tr>

            <td>13:00 - 14:30</td>

            <td>RH 001</td>

            <td>Benefícios da empresa</td>

          </tr>

          <tr>

            <td>15:00 - 16:30</td>

            <td>RH 005</td>

            <td>Health and Safety Procedures</td>

          </tr>

          <tr>

            <th id="monday" rowspan="5">Terça, 2 de Junho </th>

            <td>9:00 a.m - 10:30 a.m</td>

            <td>RH 001</td>

            <td>Introdução a empresa: Visão e missão</td>

          </tr>

          <tr>

            <td>10:30 a.m. - 12:00 p.m.</td>

            <td>RH 001</td>

            <td>Políticas de Recursos Humanos</td>

          </tr>

          <tr>

            <td align="center" colspan="5">

              <strong><em>Almoço de 12:00 às 13:00.</em></strong>

            </td>

          </tr>

          <tr>

            <td>13:00 - 14:30</td>

            <td>RH 001</td>

            <td>Benefícios da empresa</td>

          </tr>

          <tr>

            <td>15:00 - 16:30</td>

            <td>RH 005</td>

            <td>Health and Safety Procedures</td>

          </tr>

        </tbody>

      </table>

Exemplo prático

Onboarding de Acessibilidade
Segunda, 1 de Junho 9:00 a.m - 10:30 a.m RH 001 Introdução a empresa: Visão e missão
10:30 a.m. - 12:00 p.m. RH 001 Políticas de Recursos Humanos
Almoço de 12:00 às 13:00.
13:00 - 14:30 RH 001 Benefícios da empresa
15:00 - 16:30 RH 005 Health and Safety Procedures
Terça, 2 de Junho 9:00 a.m - 10:30 a.m RH 001 Introdução a empresa: Visão e missão
10:30 a.m. - 12:00 p.m. RH 001 Políticas de Recursos Humanos
Almoço de 12:00 às 13:00.
13:00 - 14:30 RH 001 Benefícios da empresa
15:00 - 16:30 RH 005 Health and Safety Procedures

Exemplo Correto



      <table class="complexexample">

        <caption><span lang="en">Onboarding</span> de Acessibilidade</caption>

        <tbody>

          <tr>

            <th id="date">Data</th>

            <th id="schedule">Agenda</th>

            <th id="location">Localização</th>

            <th id="topics1">Tópicos</th>

          </tr>

          <tr>

            <th id="monday" rowspan="5">Segunda, 1 de Junho</th>

            <td headers="schedule monday">9:00 a.m - 10:30 a.m</td>

            <td headers="location monday">RH 001</td>

            <td headers="topics1 monday">Introdução a empresa: Visão e missão</td>

          </tr>

          <tr>

            <td headers="schedule monday">10:30 a.m. - 12:00 p.m.</td>

            <td headers="location monday">RH 001</td>

            <td headers="topics1 monday">Políticas de Recursos Humanos</td>

          </tr>

          <tr>

            <td headers="schedule monday" align="center" colspan="5">

              <strong><em>Almoço de 12:00 às 13:00.</em></strong>

            </td>

          </tr>

          <tr>

            <td headers="schedule monday">13:00 - 14:30</td>

            <td headers="location monday">RH 001</td>

            <td headers="topics1 monday">Benefícios da empresa</td>

          </tr>

          <tr>

            <td headers="schedule monday">15:00 - 16:30</td>

            <td headers="location monday">RH 005</td>

            <td headers="topics1 monday">Health and Safety Procedures</td>

          </tr>

          <tr>

            <th id="monday" rowspan="5">Terça, 2 de Junho </th>

            <td headers="schedule monday">9:00 a.m - 10:30 a.m</td>

            <td headers="location monday">RH 001</td>

            <td headers="topics1 monday">Introdução a empresa: Visão e missão</td>

          </tr>

          <tr>

            <td headers="schedule monday">10:30 a.m. - 12:00 p.m.</td>

            <td headers="location monday">RH 001</td>

            <td headers="topics1 monday">Políticas de Recursos Humanos</td>

          </tr>

          <tr>

            <td headers="schedule monday" align="center" colspan="5">

              <strong><em>Almoço de 12:00 às 13:00.</em></strong>

            </td>

          </tr>

          <tr>

            <td headers="schedule monday">13:00 - 14:30</td>

            <td headers="location monday">RH 001</td>

            <td headers="topics1 monday">Benefícios da empresa</td>

          </tr>

          <tr>

            <td headers="schedule monday">15:00 - 16:30</td>

            <td headers="location monday">RH 005</td>

            <td headers="topics1 monday">Health and Safety Procedures</td>

          </tr>

        </tbody>

      </table>

Exemplo prático

Onboarding de Acessibilidade
Data Agenda Localização Tópicos
Segunda, 1 de Junho 9:00 a.m - 10:30 a.m RH 001 Introdução a empresa: Visão e missão
10:30 a.m. - 12:00 p.m. RH 001 Políticas de Recursos Humanos
Almoço de 12:00 às 13:00.
13:00 - 14:30 RH 001 Benefícios da empresa
15:00 - 16:30 RH 005 Health and Safety Procedures
Terça, 2 de Junho 9:00 a.m - 10:30 a.m RH 001 Introdução a empresa: Visão e missão
10:30 a.m. - 12:00 p.m. RH 001 Políticas de Recursos Humanos
Almoço de 12:00 às 13:00.
13:00 - 14:30 RH 001 Benefícios da empresa
15:00 - 16:30 RH 005 Health and Safety Procedures

← Retornar para página principal