Como dar forma a uma Tabela sólidos em HTML5
Para este exercício mesa-construção, você está indo para desenhar alguns dados dos economistas que trabalham duro e estatísticos no Bureau of Labor Statistics EUA. No site, desloque-se a Tabela B-9: Índices de horas semanais agregadas e folha de pagamento, apresentados nesta figura. (A figura sem dúvida mostra pequenininho-pequenas tipo, mas deve, no entanto, dar-lhe alguma idéia do que você está procurando.)
Ao examinar Tabela B-9, aqui está o que você vê:
A legenda no topo é uma espécie de cor de ferrugem e começa com o estabelecimento da tabela de dados B-9: Índices de Aggregate. . . . Este tipo de informação é exatamente o que o rubrica elemento destina-se a captar e distribuir.
Abaixo a legenda é um conjunto de cabeçalhos de tabela - um cabeçalho da tabela, em outras palavras - com um fundo cinza claro e vários títulos de coluna. À esquerda é uma lista de indústrias. Em seguida, a tabela tem dois conjuntos de colunas (Índice rotulados de horas semanais agregadas e Índice de agregado semanais Payrolls), cada um com quatro colunas de datas e uma coluna de Mudança Percentual de fevereiro a março de 2013.
O corpo da tabela começa com o texto que lê privada total e continua até 19 linhas até chegar a outros serviços, com linhas na coluna 1 (indústria), alternando entre um branco e uma cor de fundo azul claro.
Depois disso, os dois conjuntos de colunas soletrar dados para horas semanais agregadas e as folhas de pagamento semanais, respectivamente, com cinco colunas individuais em cada conjunto: março de 2012, de janeiro a março de 2013, e uma variação percentual em relação ao mês anterior (Fevereiro de 2013) para o presente mês (Março de 2013).
O rodapé da tabela inclui três notas de rodapé numeradas de 1 a 3. O marcador especial, (p), indica preliminar (isto é, não final) de dados.
Aqui está como você construir essa tabela, os números, por assim dizer:
A legenda da tabela podem ser capturados dentro de um rubrica elemento. Você pode usar a quebra de linha (
) Elemento para quebrar a linha após ESTABELECIMENTO DE DADOS e antes a legenda detalhada real que começa Tabela B-9: Índices de Aggregate. . . . Use a linha elemento de ruptura novamente para quebrar a linha antes de afirmar o indicador de escala # 147- [2002 = 100] # 148.;Todos os títulos devem ser contido dentro de um elemento. Você usar o elemento da tabela de direcção () para cada célula de cabeçalho, por isso vai ser centrado e em negrito dentro de cada uma dessas células.
A célula Indústria deve ter um rowspan = "2" atributo para que ele preenche toda a altura da área de cabeçalho à esquerda, e o Índice de. . . células cada um deve tomar uma colspan = "5" atributo de modo que cada uma abrange os quatro data e alteração percentual colunas para a sua categoria. Todos os três desses itens será exibido na primeira linha da tabela posição, cada um em seu próprio título da tabela de células ().
Os restantes dez itens aparecem na segunda tabela cabeçalho da linha na sua ordem de aparecimento na tabela. Cada um desses dez itens também aparece em sua própria célula da tabela título (). Definir larguras para a Indústria e vários data e percentuais colunas na CSS para o cabeçalho define larguras para todo o resto da mesa.
No corpo da tabela, uma linha corresponde a cada linha de dados a partir da fonte em linha, começando com o nome na indústria continuando esquerda e, em seguida, com os valores numéricos para datas e percentagens em cada um dos dois grupos da direita. Esta tarefa envolve 11 dados da tabela () elementos para cada linha mostrada na tabela. Muito simples, muito mecânico, muito fácil.
As entradas da tabela de rodapé todos aparecem em uma seção de rodapé, que deverá ter um colspan = "11" atribuir a fluir através de toda a largura da mesa. A lenda notas de rodapé podem aparecer dentro de uma célula linha de tabela única () e dados da tabela (), o último conjunto de negrito.
(Não use ou o texto nota será centrado). Cada nota restante aparece dentro de uma única célula de dados de linha de mesa e mesa, como indicado na tabela.
Usando essas técnicas, você pode criar um sólido, mesa atraente para apresentar dados numéricos e textuais. Se você levar o seu tempo e pensar o seu caminho através do que você quer que seus usuários para ver, você pode construir uma estrutura preliminar em HTML. Então você pode começar células organizar e aprimorando-los até que você pegá-los apenas para a direita.