No passado, muitos web designers gostavam de implementar suas renderizações na web em páginas da web com o layout da tabela, mas isso encontraria um problema mais problemático, que é que seria bastante difícil depurar e manter no estágio posterior. Agora, mais e mais desenvolvedores de front-end estão começando a usar o XHTML+CSS para substituir o layout da tabela original para concluir o layout geral da página da web, o que não apenas reduz o custo de desenvolvimento e manutenção do site, mas também torna o código mais semântico. No entanto, isso não significa que a tabela desapareceu de agora em diante. Ainda é usado por muitas pessoas como uma necessidade para a representação de dados nas páginas da Web, como listas de dados de informações pessoais, etc. De fato, o uso de tags DL, DT e DD da HTML economizará mais código e tornará o código mais consistente com a semântica do conteúdo. Obviamente, as tabelas também têm seu uso, ou seja, tabelas de dados com grandes quantidades de dados, mas pequenas listas e formulários de dados podem ser completamente evitados!
Se você ainda estiver usando tabelas tradicionais para criar listas de dados, continue vendo como o uso de tags DL, DT e DD do HTML para facilitar seu trabalho ...
O código da lista de dados de uma tabela tradicional é mostrado abaixo. Precisamos adicionar uma tag TR a cada linha e, em seguida, adicionar uma tag TD ao título e dados. Como as tags são TD, se você deseja adicionar um estilo, precisará adicionar um atributo de classe a cada TD.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <tabela> <Tbody> <tr> <td class = title> Nome: </td> <td class = text> squall li </td> </tr> <tr> <td class = title> idade: </td> <td class = text> 23 </td> </tr> <tr> <td class = title> Gênero: </td> <td class = text> masculino </td> </tr> <tr> <TD Class = Title> Dia de nascimento: </td> <td class = text> 26 de maio de 1986 </td> </tr> </tbody> </tabela>
|