Tabelas usando HTML

Uma tabela apresenta as informações em formato de grade. Que nos permite entender dados complexos referenciando a informação em dois eixos. Em HTML5 as tabelas são escritas linha por linha.

O elemento <table> é usado para indicar o inicio da tabela. O conteúdo da tabela será escrito linha por linha. O elemento <tr> indica o inicio de cada linha, seguido de um ou mais elemento <td> um para cada celula na linha.

tr = table row = linha da tabela

td = table data = dado da tabela

<table>
     <tr>
          <dt>14</dt>
          <dt>14</dt>
          <dt>14</dt>
     </tr>
     <tr>
          <dt>14</dt>
          <dt>14</dt>
          <dt>14</dt>
     </tr>
     <tr>
          <dt>14</dt>
          <dt>14</dt>
          <dt>14</dt>
     </tr>
</table>

Cabeçalho da tabela

O elemento <th> é usado da mesma forma que o elemento <td> mas seu proposito é representar o cabeçalho para uma coluna ou uma linha. O th significa table heading cabeçalho da tabela.

Mesmo que uma celula não tenha conteúdo devemos usar um elemento <td> ou <th> para representar uma celula vazia. Caso contrário não será renderizado corretamente. O elemento <th> para cabeçalho ajuda as pessoas que usam leitores de tela, e aumenta as chances de que os motores de busca idexem a sua página, além disso te ajuda a controlar melhor a aparencia das tabelas quando começar a usar CSS. Ele pode ser usado para indicar um cabeçalho de uma linha ou uma coluna, basta mudar os valores row para linha e col para coluna. Os navegadores geralmente renderizam o conteúdo desse elemento em negrito e centralizado.

<table>
     <tr>
          <th></th>
          <th scope=”col”>Sabado</th>
          <th scope=”col”>Segunda</th>
     </tr>
     <tr>
          <th scope=”row”>Ingressos vendidos: </th>
          <td>120</td>
          <td>69</td>
     </tr>
     <tr>
          <th scope=”row”>Ingressos vendidos: </th>
          <td>$500</td>
          <td>$140</td>
     </tr>
</table>

Estendendo colunas

Esse termo é usado para se referir a colunas que precisam ocupar espaço de outras. O conteúdo da tabela acessa mais de uma coluna.

O atributo colspan pode ser usado em um elemento <th> ou <td> para indicar quantas colunas a celula pode usar.

Nesse exemplo temos uma tabela mostrando o tempo com cinco colunas; a primeira coluna contém o cabeçalho para a linha que representa o dia da semana, as outras quatro representam horas do dia a serem preenchidas.

Olhado para a célula que contém Geografia você verá que o valor do atributo colspan é 2, o que indica que a célula deve percorrer duas colunas. Na terceira linha Academia deve percorrer 3 colunas.

Pode reparar que a segunda e terceira linha tem menos elementos <td> do que tem colunas. Isso ocorre porque quando uma célula se extende para mais de uma coluna, o <td> ou <th> não são incluidos no código.

<table>
     <tr>
          <th></th>
          <th>9 am</th>
          <th>10 am</th>
          <th>11 am</th>
          <th>12 am</th>
     </tr>
     <tr>
          <th>Segunda</th>
          <td colspan=”2”>Geografia</td>
          <td>Matemática</td>
          <td>Artes</td>
     </tr>
     <tr>
          <th>Terça</th>
          <td colspan=”3”>Academia</td>
          <td>Casa</td>
     </tr>
</table>

Estendendo linhas

As vezes precisamos adicionar dados em uma tabela que se estendem por mais de uma linha. Nesse caso usamos o atributo rowspan no elemento <th> ou <td> para indicar quantas linhas devem ser usadas.

<table>
     <tr>
          <th></th>
          <th>ABC</th>
          <th>BBC</th>
          <th>CNN</th>
     </tr>
     <tr>
          <th>6 pm – 7 pm</th>
          <td rowspan=”2”>Movie</td>
          <td>Comédia</td>
          <td>Noticias</td>
     </tr>
     <tr>
          <th>7 pm – 8 pm</th>
          <td>Esporte</td>
          <td>Notícias</td>
     </tr>
</table>

Tabelas longas

Existem três elementos: <thead>, <tdody> e <tfoot> que ajudam a distinguir o conteúdo principal da tabela e a primeira e última linha. Esses elementos ajudam quem usa leitor de tela e também te permite estilizar essas seções de forma diferente usando CSS.

<table>
     <thead>
     <tr>
          <th>Data</th> 
          <th>Entrada</th>
          <th>Despesa</th>
     </tr>
     </thead>

     <tbody>
     <tr>
          <th>1º de Janeiro</th>
          <td>250</td>
          <td>36</td>
     </tr>
     <tr>
          <th>2º de Janeiro</th>
          <td>225</td>
          <td>823</td>
     </tr>
     <tr>
          <th>3º de Janeiro</th>                                               
          <td>225</td>
          <td>823</td>
     </tr>
     </body>

     <tfoot>
          <tr>
               <td></td>
               <td>TOTAL</td>
               <td>TOTAL</td>
          </tr>
     </tfoot>
</table>

Os navegadores raramente diferenciam a aparencia desses elementos. Mas usando CSS você pode estilizar-los.

Referências:

Duckett, J. (2011). “HTML and CSS: Design and Build Websites.” Hoboken, NJ: Wiley.

VISUAL QUICKSTART GUIDE HTML 5 and CSS3 Seventh Edition, Elizabeth Castro, Bruce Hyslop