Índice
No passado, as tabelas HTML eram utilizadas para controlar o layout dos sites, a fim de manter as proporções do conteúdo, criar seções, dividir as informações, etc. Atualmente isso é uma má prática, aliás com as novas especificações do item tabela No HTML5, todo esforço foi feito para que isso fosse usado para seu verdadeiro propósito, que é exibir dados em matrizes bidimensionais.Elemento de mesa
O elemento tabela é o grande contêiner e pode estar dentro de qualquer elemento que seja fluxo, como o div. Elemento interno tabela teremos os elementos: legenda, colgroup, thead, tbody, tfoot, tr, th Y td, que são necessários para dar a constituição à nossa mesa, além disso, o novo padrão tornou os seguintes atributos obsoletos dentro tabela e deve ser usado exclusivamente por CSS: resumo, alinhar, largura, bgcolor, cellpadding, cellspacing, frame, rules. A convenção CSS para este elemento será esta:
tabela {exibição: tabela; colapso da fronteira: separado; espaçamento de borda: 2px; cor da borda: cinza; } Elemento Tr
Como bem sabemos, as tabelas são compostas por dois elementos básicos, linhas e colunas, onde as linhas representam cada registro de informação e as colunas a estrutura e tipo de informação, vamos ver o elemento usado para criar as linhas, este elemento é o tr. Pode ser filho dos seguintes elementos: table, thead, tfoot, tbodyComo podemos ver, pode ser um filho direto de uma tabela ou um filho dos elementos que são filhos da tabela e que definem sua estrutura. Deve conter 1 ou mais itens td ou º conforme apropriado, alguns de seus atributos obsoletos também foram colocados no novo padrão HTML5, são eles: alinhar, char, charoff, valign, bgcolor. Que devem ser trabalhados exclusivamente por CSS, disse CSS tem a seguinte estrutura como uma convenção:
tr {exibição: linha da tabela; alinhamento vertical: herdar; border-color: herdar;} Elemento Td
Este elemento define as colunas dentro de nossas linhas na tabela, o que nos permite separar a informação dentro de um registro e assim poder classificá-la de acordo com nossas necessidades, é um filho do elemento tr, os atributos válidos que pode ter são: colspan, rowspan, cabeçalhos e os atributos obsoletos que agora precisam ser tratados no CSS são: abbr, axis, align, width, char, charoff, valign, bgcolor, height, nowrap, scope. A convenção CSS para este elemento é a seguinte:
td {display: table-cell; alinhamento vertical: herdar; }Nossa primeira mesa
Vamos colocar em prática o que vimos até agora, já sabemos que para nossa tabela precisamos de linhas e colunas dentro de nosso contêiner ou elemento pai, vamos ver como o levamos para o código HTML:
Exemplo
| Maçãs | Verde | Médio |
| Laranjas | laranja | Grande |
Este código nos dá a estrutura de uma tabela com 2 linhas com 3 colunas, pois vemos que é um texto simples, o que nos leva a ver este resultado:
