Como forma de uma mesa sólida 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 não-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 na parte superior é um tipo de cor de ferrugem e começa com o estabelecimento da tabela de dados B-9: Índices de agregado. . . . Este tipo de informação é exatamente o que o rubrica elemento é destinado a capturar e entregar.

• 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 está uma lista de indústrias. Em seguida, a tabela tem dois conjuntos de colunas (Índice rotulado de horas semanais agregadas e Índice de agregado semanais Payrolls), cada um com quatro colunas de datas e uma coluna Alteração percentual entre Fevereiro e Março de 2013.

  Video: Multipage Effect Log In Form design using HTML 5 & CSS 3

• O corpo da tabela começa com o texto que lê privada total e continua para baixo 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é tabela inclui três notas numeradas de 1 a 3. O marcador especial, (p), indica preliminar (isto é, não final) de dados.

  Video: HTML5 Tutorial For Beginners - 6 of 6 - CSS Page Layout

Aqui está como você construir essa tabela com os números, por assim dizer:

1. A legenda da tabela pode ser capturado dentro de um rubrica elemento. É possível utilizar o elemento de quebra de linha () para quebrar a linha depois de ESTABELECIMENTO DE DADOS e antes do subtítulo detalhada real que começa Tabela B-9: Índices de agregado. . . . Use a linha elemento de ruptura novamente para quebrar a linha antes de afirmar que o indicador de escala “[2002 = 100].”

2. Todos os títulos devem ser contido dentro de um elemento. Você usa o cabeçalho da tabela () Elemento para cada célula de posição, de modo que irá ser centrado e em negrito dentro de cada um de tais células.

   A célula Indústria deve ter um rowspan =”2" atributo para que ele preenche toda a altura da área do cabeçalho à esquerda, eo Índice de. . . células cada um deve dar uma colspan =”5" atribuir de modo que cada uma abrange as quatro data e alteração percentual colunas para sua categoria. Todos os três desses itens será exibido na primeira linha da tabela título, cada um em seu próprio cabeçalho da tabela () célula.

   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 seu próprio título da tabela () célula. 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.

3. No corpo da tabela, uma linha corresponde a cada linha de dados da fonte on-line, começando com o nome do setor em continuar esquerdo e depois com os valores numéricos para datas e percentuais em cada um dos dois grupos de direita. Esta tarefa envolve os dados da tabela 11 () elementos para cada linha que se mostra na tabela. Muito simples, muito mecânico, muito fácil.

4. As entradas de 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 legenda rodapé podem aparecer dentro de uma célula única linha da tabela () e os dados da tabela (), o último conjunto de negrito.

   (Não use , ou o texto nota será centrada.) Cada nota restante aparece dentro de uma única célula de dados de linha de mesa e mesa, tal como indicado na tabela.

Ao utilizar 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ê deseja 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-os até que você pegá-los apenas para a direita.