Idioma de marcação HTML - tags de tabela

Clique aqui para retornar à coluna do tutorial Wulin.com HTML.

Acima: Linguagem de marcação - título

Fonte original

Você sabe? Não sei quando começou, o uso de mesas se transformou em um ato pecaminoso? De fato, o maior mito de escrever páginas da web com base nos padrões da web é parar de usar mesas, nunca! Parece uma praga, deve ser evitado e deve ser selado e jogado em um gabinete empoeirado, e é considerado uma antiguidade passada desde os primeiros dias da era do desenvolvimento da Internet.

De onde vem esse desgosto? Talvez fosse muito simples no começo, pelo menos com um bom motivo. Muitas pessoas estariam confiantes em promover os benefícios de abandonar o layout tradicional do ninho de mesa e as imagens de GIF vazias e, em vez disso, usar um layout de CSS estruturado flexível. Podemos começar a remover todas as tabelas de maneira desapegada e até insistir teimosamente em expulsar todas as tabelas - não importa a ocasião.

Mais tarde no livro, veremos o método do layout do CSS e todos os benefícios de fazê -lo. Mas agora vamos dar uma olhada em como usar as tabelas na situação certa - ou seja, ao marcar listas de dados. Veremos algumas maneiras simples de facilitar as listas de dados e mais bonitas.

Ao marcar dados da lista, não há absolutamente nenhuma razão para não usar tags de tabela. Mas espere, o que são dados da lista? Aqui estão alguns exemplos: cronograma de horário do gráfico da planilha do calendário

Para esses exemplos e muitos outros casos, efeitos CSS muito complexos e rigorosos devem ser usados ​​para fazer com que os dados pareçam uma tabela. Talvez você possa imaginar que o uso de flutuadores CSS inteligentes para localizar todos os projetos resultará em resultados incompatíveis e contraditórios, para não mencionar que, após a remoção de CSS, a leitura com precisão de cada dados provavelmente se tornará uma tarefa impossível. Na verdade, não precisamos ter medo de tabelas - devemos usá -las com seus objetivos originais de design.

Uma das razões pelas quais as tabelas são criticadas é que, se você não for usado com cuidado, haverá defeitos de usabilidade. Por exemplo: os programas de leitura de tela são difíceis de ler o conteúdo corretamente, enquanto os dispositivos de tela pequenos geralmente são perturbados pelas tabelas usadas para layout, mas temos algumas maneiras simples de aumentar a usabilidade das tabelas de dados da lista. Ao mesmo tempo, estabelecemos uma estrutura flexível para facilitar a configuração de estilos com CSS no futuro.

Vejamos o exemplo simples da Figura 3-1, que é o recorde da liga da American Baseball League:

Figura 3-1: Exemplo de representação de dados típicos

Talvez este seja um dados estatísticos muito deprimentes para os fãs do Red Sox, mas a Figura 3-1 é um exemplo perfeito dos dados da lista. Possui três cabeçalhos de tabela (ano, oponente, recorde da temporada (WL)), seguidos por dados de quatro anos. Na tabela está o título da tabela, que explica o conteúdo da tabela.

A maneira de marcar esta tabela de dados é muito intuitiva, e podemos fazer isso com código como este:

<p align = Center> Boston Red Sox World Series Championships </p>

<tabela>

<tr>

<td align = center> <b> ano </b> </td>

<td align = center> <b> oponente </b> </td>

<td align = Center> <b> Recorde de temporada (WL) </b> </td>

</tr>

<tr>

<Td> 1918 </td>

<Td> Chicago Cubs </td>

<Td> 75-51 </td>

</tr>

<tr>

<Td> 1916 </td>

<td> Brooklyn Robins </td>

<Td> 91-63 </td>

</tr>

<tr>

<Td> 1915 </td>

<Td> Philadelphia phillies </td>

<Td> 101-50 </td>

</tr>

<tr>

<Td> 1912 </td>

<Td> New York Giants </td>

<Td> 105-47 </td>

</tr>

</tabela>

Os resultados mostrados dessa maneira devem ser muito semelhantes à Figura 3-1, mas podemos adicionar algumas melhorias a essa base.

Primeiro, podemos usar uma etiqueta mais semântica para armazenar campeonatos da Boston Red Sox World Series. A tag <Ception> precisa ser seguida imediatamente após a tag <tabela>, que geralmente é usada para armazenar o título da tabela ou a descrição das informações da tabela.

Parece que torna mais fácil para os usuários ver o tópico da tabela e também pode ajudar as pessoas que conhecem o conteúdo da Web de outras maneiras.

Vamos remover o parágrafo iniciante e adicionar a <agem> correta:

<tabela>

<geption> Boston Red Sox World Series Championships </ingortion>

<tr>

<td align = center> <b> ano </b> </td>

<td align = center> <b> oponente </b> </td>

<td align = Center> <b> Recorde de temporada (WL) </b> </td>

</tr>

<tr>

<Td> 1918 </td>

<Td> Chicago Cubs </td>

<Td> 75-51 </td>

</tr>

<tr>

<Td> 1916 </td>

<td> Brooklyn Robins </td>

<Td> 91-63 </td>

</tr>

<tr>

<Td> 1915 </td>

<Td> Philadelphia phillies </td>

<Td> 101-50 </td>

</tr>

<tr>

<Td> 1912 </td>

<Td> New York Giants </td>

<Td> 105-47 </td>

</tr>

</tabela>

É importante ressaltar que o título deve transmitir rapidamente o assunto das seguintes informações. De acordo com as configurações padrão, a maioria dos navegadores visuais centra -se no texto na tag <Egend> na parte superior da tabela. Obviamente, podemos usar o CSS para alterar o estilo das configurações padrão posteriormente - esse problema será discutido na extensão das dicas deste capítulo. De fato, o título agora está localizado em uma tag exclusiva, o que torna nosso trabalho de modificação subsequente mais fácil e simples.

Página anterior1 2 3 4 5 6 7 8 Próxima página Leia o texto completo