Olá Pessoal,
Para finalizar o assunto, vamos falar hoje sobre tabelas complexas. Até agora criamos tabelas simples, com apenas um cabeçalho, corpo e rodapé; porém, o XHTML nos fornece recursos para criar tabelas complexas, com várias cabeçalhos, rodapés e corpos. E nesse tipo de tabelas, temos mais uma série de tags e atributos para facilitar nosso trabalho, e incrementar a acessibilidade das mesmas. Arregacem as mangas e mãos à obra!
Reparem na tabela abaixo:
| Turma A | Turma B | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| Aluno | 1º Bimestre | 2º Bimestre | 3º Bimestre | 4º Bimestre | Aluno | 1º Bimestre | 2º Bimestre | 3º Bimestre | 4º Bimestre |
| Aprovados | |||||||||
| João | 5 | 6 | 7 | 8 | Maria | 6 | 6 | 8 | 7 |
| José | 6 | 7 | 8 | 9 | Joaquim | 4 | 7 | 6 | 5 |
| Maria | 6 | 6 | 8 | 7 | João | 5 | 6 | 7 | 8 |
| Joaquim | 4 | 7 | 6 | 5 | José | 6 | 7 | 8 | 9 |
| Reprovados | |||||||||
| Manoel | 5 | 6 | 7 | 8 | Joana | 6 | 6 | 8 | 7 |
| Maricota | 6 | 7 | 8 | 9 | Juvenal | 4 | 7 | 6 | 5 |
| Joana | 6 | 6 | 8 | 7 | Manoel | 5 | 6 | 7 | 8 |
| Juvenal | 4 | 7 | 6 | 5 | Maricota | 6 | 7 | 8 | 9 |
Parece complicado? Um pouquinho mas… todos vocês já viram o suficiente para criar uma tabela dessas. Para prosseguir com esse tutorial, vocês terão que montá-la em seus próprios computadores. Sem reclamações, podem começar! Só avancem para o próximo parágrafo depois de terminar essa tabela, simbora!
Quero que vocês olhem para o código abaixo:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 | <table border="2" cellpadding="4" cellspacing="4" summary="Tabela de notas dos alunos do 3º ano"> <caption>Tabela de Alunos</caption> <thead> <tr> <th colspan="5">Turma A</th> <th colspan="5">Turma B</th> </tr> <tr> <th>Aluno</th> <th>1º Bimestre</th> <th>2º Bimestre</th> <th>3º Bimestre</th> <th>4º Bimestre</th> <th>Aluno</th> <th>1º Bimestre</th> <th>2º Bimestre</th> <th>3º Bimestre</th> <th>4º Bimestre</th> </tr> </thead> <tbody> <tr> <th id="aprovados" colspan="10">Aprovados</th> </tr> <tr> <td>João</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>Maria</td> <td>6</td> <td>6</td> <td>8</td> <td>7</td> </tr> <tr> <td>José</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> <td>Joaquim</td> <td>4</td> <td>7</td> <td>6</td> <td>5</td> </tr> <tr> <td>Maria</td> <td>6</td> <td>6</td> <td>8</td> <td>7</td> <td>João</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr> <tr> <td>Joaquim</td> <td>4</td> <td>7</td> <td>6</td> <td>5</td> <td>José</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> </tr> <tr> <th id="reprovados" colspan="10">Reprovados</th> </tr> <tr> <td>Manoel</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>Joana</td> <td>6</td> <td>6</td> <td>8</td> <td>7</td> </tr> <tr> <td>Maricota</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> <td>Juvenal</td> <td>4</td> <td>7</td> <td>6</td> <td>5</td> </tr> <tr> <td>Joana</td> <td>6</td> <td>6</td> <td>8</td> <td>7</td> <td>Manoel</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr> <tr> <td>Juvenal</td> <td>4</td> <td>7</td> <td>6</td> <td>5</td> <td>Maricota</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> </tr> </tbody> </table> |
Como já dito anteriormente, um leitor de tela irá apresentar os dados de uma tabela, de forma linear, ou seja, coluna por coluna, linha por linha. O uso de legendas e tags TH ajuda a contornar o problema em tabelas simples, com um único cabeçalho, o que não é o caso do exemplo acima. Para incrementar a acessibilidade em tabelas complexas, faremos uso dos atributos ID e HEADER. O atributo ID estabelece um identificador para um elemento HTML, distinguindo-o de qualquer outro elemento da página, ou seja, um ID aplicado em uma tag, não pode ser utilizado em nenhuma outra tag dentro da mesma página. Eu costumo brincar com meus alunos que o ID é o CPF de um elemento: podem ter vários com o mesmo nome, mas com aquele CPF só tem um!
Uma vez criado um ID para cada coluna cabeçalho da tabela, podemos referenciá-los nas demais células de conteúdo, estabelecendo uma conexão entre o cabeçalho e células de uma coluna. Para isso basta declarar o atributo HEADER em cada uma das células, referenciando os ID’s dos cabeçalhos aos quais essas células estejam relacionadas. Parece complicado, mas veja como fica a marcação do exemplo acima, com os atributos ID e HEADER:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 | <table border="2" cellpadding="4" cellspacing="4" summary="Tabela de notas dos alunos do 3º ano"> <caption>Tabela de Alunos</caption> <thead> <tr> <th id="turma-A" colspan="5">Turma A</th> <th id="turma-B" colspan="5">Turma B</th> </tr> <tr> <th id="turma-A-nome">Aluno</th> <th id="turma-A-bim-1">1º Bimestre</th> <th id="turma-A-bim-2">2º Bimestre</th> <th id="turma-A-bim-3">3º Bimestre</th> <th id="turma-A-bim-4">4º Bimestre</th> <th id="turma-B-nome">Aluno</th> <th id="turma-B-bim-1">1º Bimestre</th> <th id="turma-B-bim-2">2º Bimestre</th> <th id="turma-B-bim-3">3º Bimestre</th> <th id="turma-B-bim-4">4º Bimestre</th> </tr> </thead> <tbody> <tr> <th headers="" id="aprovados" colspan="10">Aprovados</th> </tr> <tr> <td headers="turma-A turma-A-nome aprovados">João</td> <td headers="turma-A turma-A-bim-1 aprovados">5</td> <td headers="turma-A turma-A-bim-2 aprovados">6</td> <td headers="turma-A turma-A-bim-3 aprovados">7</td> <td headers="turma-A turma-A-bim-4 aprovados">8</td> <td headers="turma-B turma-B-nome">Maria</td> <td headers="turma-B turma-B-bim-1 aprovados">6</td> <td headers="turma-B turma-B-bim-2 aprovados">6</td> <td headers="turma-B turma-B-bim-3 aprovados">8</td> <td headers="turma-B turma-B-bim-4 aprovados">7</td> </tr> <tr> <td headers="turma-A turma-A-nome aprovados">José</td> <td headers="turma-A turma-A-bim-1">6</td> <td headers="turma-A turma-A-bim-2">7</td> <td headers="turma-A turma-A-bim-3">8</td> <td headers="turma-A turma-A-bim-4">9</td> <td headers="turma-B turma-B-nome">Joaquim</td> <td headers="turma-B turma-B-bim-1 aprovados">4</td> <td headers="turma-B turma-B-bim-2 aprovados">7</td> <td headers="turma-B turma-B-bim-3 aprovados">6</td> <td headers="turma-B turma-B-bim-4 aprovados">5</td> </tr> <tr> <td headers="turma-A turma-A-nome aprovados">Maria</td> <td headers="turma-A turma-A-bim-1">6</td> <td headers="turma-A turma-A-bim-2">6</td> <td headers="turma-A turma-A-bim-3">8</td> <td headers="turma-A turma-A-bim-4">7</td> <td headers="turma-B turma-B-nome">João</td> <td headers="turma-B turma-B-bim-1 aprovados">5</td> <td headers="turma-B turma-B-bim-2 aprovados">6</td> <td headers="turma-B turma-B-bim-3 aprovados">7</td> <td headers="turma-B turma-B-bim-4 aprovados">8</td> </tr> <tr> <td headers="turma-A turma-A-nome aprovados">Joaquim</td> <td headers="turma-A turma-A-bim-1">4</td> <td headers="turma-A turma-A-bim-2">7</td> <td headers="turma-A turma-A-bim-3">6</td> <td headers="turma-A turma-A-bim-4">5</td> <td headers="turma-B turma-B-nome">José</td> <td headers="turma-B turma-B-bim-1 aprovados">6</td> <td headers="turma-B turma-B-bim-2 aprovados">7</td> <td headers="turma-B turma-B-bim-3 aprovados">8</td> <td headers="turma-B turma-B-bim-4 aprovados">9</td> </tr> <tr> <th headers="" id="reprovados" colspan="10">Reprovados</th> </tr> <tr> <td headers="turma-A turma-A-nome reprovados">Manoel</td> <td headers="turma-A turma-A-bim-1 reprovados">4</td> <td headers="turma-A turma-A-bim-2 reprovados">3</td> <td headers="turma-A turma-A-bim-3 reprovados">6</td> <td headers="turma-A turma-A-bim-4 reprovados">3</td> <td headers="turma-B turma-B-nome reprovados">Joana</td> <td headers="turma-B turma-B-bim-1 reprovados">4</td> <td headers="turma-B turma-B-bim-2 reprovados">4</td> <td headers="turma-B turma-B-bim-3 reprovados">4</td> <td headers="turma-B turma-B-bim-4 reprovados">5</td> </tr> <tr> <td headers="turma-A turma-A-nome reprovados">Maricota</td> <td headers="turma-A turma-A-bim-1 reprovados">2</td> <td headers="turma-A turma-A-bim-2 reprovados">4</td> <td headers="turma-A turma-A-bim-3 reprovados">5</td> <td headers="turma-A turma-A-bim-4 reprovados">5</td> <td headers="turma-B turma-B-nome reprovados">Juvenal</td> <td headers="turma-B turma-B-bim-1 reprovados">3</td> <td headers="turma-B turma-B-bim-2 reprovados">3</td> <td headers="turma-B turma-B-bim-3 reprovados">4</td> <td headers="turma-B turma-B-bim-4 reprovados">5</td> </tr> <tr> <td headers="turma-A turma-A-nome reprovados">Joana</td> <td headers="turma-A turma-A-bim-1 reprovados">6</td> <td headers="turma-A turma-A-bim-2 reprovados">3</td> <td headers="turma-A turma-A-bim-3 reprovados">3</td> <td headers="turma-A turma-A-bim-4 reprovados">2</td> <td headers="turma-B turma-B-nome reprovados">Manoel</td> <td headers="turma-B turma-B-bim-1 reprovados">4</td> <td headers="turma-B turma-B-bim-2 reprovados">4</td> <td headers="turma-B turma-B-bim-3 reprovados">5</td> <td headers="turma-B turma-B-bim-4 reprovados">5</td> </tr> <tr> <td headers="turma-A turma-A-nome reprovados">Juvenal</td> <td headers="turma-A turma-A-bim-1 reprovados">3</td> <td headers="turma-A turma-A-bim-2 reprovados">3</td> <td headers="turma-A turma-A-bim-3 reprovados">5</td> <td headers="turma-A turma-A-bim-4 reprovados">5</td> <td headers="turma-B turma-B-nome reprovados">Maricota</td> <td headers="turma-B turma-B-bim-1 reprovados">4</td> <td headers="turma-B turma-B-bim-2 reprovados">3</td> <td headers="turma-B turma-B-bim-3 reprovados">2</td> <td headers="turma-B turma-B-bim-4 reprovados">5</td> </tr> </tbody> </table> |
Ok! Escrevemos pra caramba, né? Vamos a algumas ponderações:
- É necessário levar em consideração se o uso dos HEADERS não deixará a página pesada, dificultando o carregamento da mesma;
- Como podemos ver, os HEADERS são uma lista com todos os ID’s relacionados à célula;
- Devemos usar nomes simples para os ID’s, evitando nomes compridos e de difícil indexação;
- É preciso ter todo cuidado ao escrever os HEADERS, sob o risco de prejudicar a leitura correta dos dados da tabela;
- É preciso levar a escrita dos HEADERS em consideração, em sistemas dinâmicos, onde as tabelas são alimentadas via banco de dados.
Bem pessoal, por hoje é só. Falamos bastante sobre tabelas, e o assunto não acaba aqui. Continuem estudando e praticando. No próximo tutorial falaremos sobre FORMULÁRIOS, até lá!
Abraços,
Diego.