A exibição CSS: propriedade table-row permite que você faça exibição de conteúdo em um navegador, como se fosse uma linha da tabela. Você pode colocar conteúdo em uma div para exibir como se fosse uma célula de tabela usando o visor CSS: propriedade de célula tabela. No entanto, não há nenhuma marcação HTML tornando o conteúdo exibida uma tabela real de informação tabular. O conteúdo pode ser acessível, dando-lhe o poder para exibir esse conteúdo como se fosse uma mesa ou grade. Aqui está como ele é feito.
Coisas que você precisa
- Uma página HTML e CSS usando os exemplos mostrados
Planejar seu layout
Para demonstrar, aqui está um CSS simples centrado layout de duas colunas em uma div container. Observe que o HTML não é para uma mesa. É um div recipiente que contém duas divs aninhados: uma barra lateral e uma área de conteúdo. Aninhado na área de conteúdo que você vê um div segurando duas divs aninhadas. Estas divs são atribuídos à classe "linha" e "célula" respectivamente, de modo que eles podem ser decorados com CSS.
Atribuir a seguinte CSS à página. Observe que os sidebar1 e mainContent divs é dada a exibição da propriedade:-célula da tabela. Não há necessidade de colocar esses display: divs apresentação-célula da tabela em um display: tabela ou exibição: div table-row. Isso ocorre porque a tabela e a linha da tabela estão implícitas. Isso significa que o navegador irá agir como se uma mesa e uma linha da tabela foram realmente dado. Para a linha aninhada com duas células que aparecerá na área de conteúdos, use o CSS mostrado para a classe "linha" e a classe "célula" no CSS mostrado. Cores e bordas são dadas para maior clareza. Eles não são necessários para alcançar os resultados de layout.
Os resultados são exibidos em uma forma do tipo grelha com um recipiente contendo duas células grandes ou caixas que apresentam como colunas. Dentro da área de mainContent você vê a linha de duas células ou caixas que podem conter texto ou imagens conforme necessário. Este efeito grade foi conseguido com propriedades de exibição CSS.
No HTML, a barra lateral ficou em primeiro lugar na ordem de origem. Você pode reverter esse fim de colocar a barra lateral à direita, colocando o mainContent div primeiro na ordem de HTML.
dicas & avisos
- Você pode omitir os div atribuídos à classe "linha" e a regra para .Row na CSS e alcançar os mesmos resultados. Isto é porque o navegador assume que a tabela de-fileira está implícito quando a célula é utilizada a tabela.
- exibição CSS: table-linha e display: table-cell propriedades não são suportadas por versões do Internet Explorer abaixo Versão 8.
Como inserir uma fórmula tabela no Word 2007
Como fazer colunas em html
Como mover texto abaixo uma tabela em html
Como girar o texto em uma tabela html