CSS - Tabelas
Este tutorial irá ensiná-lo a definir propriedades diferentes de uma tabela HTML usando CSS. Você pode definir as seguintes propriedades de uma tabela -
o border-collapse especifica se o navegador deve controlar a aparência das bordas adjacentes que se tocam ou se cada célula deve manter seu estilo.
o border-spacing especifica a largura que deve aparecer entre as células da tabela.
o caption-sideas legendas são apresentadas no elemento <caption>. Por padrão, eles são renderizados acima da tabela no documento. Você usa a propriedade caption-side para controlar o posicionamento da legenda da tabela.
o empty-cells especifica se a borda deve ser mostrada se uma célula estiver vazia.
o table-layout permite que os navegadores acelerem o layout de uma tabela usando as primeiras propriedades de largura encontradas para o resto de uma coluna, em vez de ter que carregar a tabela inteira antes de renderizá-la.
Agora, veremos como usar essas propriedades com exemplos.
A propriedade border-collapse
Esta propriedade pode ter dois valores recolhidos e separados . O exemplo a seguir usa ambos os valores -
<html>
<head>
<style type = "text/css">
table.one {border-collapse:collapse;}
table.two {border-collapse:separate;}
td.a {
border-style:dotted;
border-width:3px;
border-color:#000000;
padding: 10px;
}
td.b {
border-style:solid;
border-width:3px;
border-color:#333333;
padding:10px;
}
</style>
</head>
<body>
<table class = "one">
<caption>Collapse Border Example</caption>
<tr><td class = "a"> Cell A Collapse Example</td></tr>
<tr><td class = "b"> Cell B Collapse Example</td></tr>
</table>
<br />
<table class = "two">
<caption>Separate Border Example</caption>
<tr><td class = "a"> Cell A Separate Example</td></tr>
<tr><td class = "b"> Cell B Separate Example</td></tr>
</table>
</body>
</html>Isso produzirá o seguinte resultado -
A propriedade border-spacing
A propriedade border-spacing especifica a distância que separa as células adjacentes. fronteiras. Ele pode ter um ou dois valores; devem ser unidades de comprimento.
Se você fornecer um valor, ele se aplicará às bordas verticais e horizontais. Ou você pode especificar dois valores, neste caso, o primeiro se refere ao espaçamento horizontal e o segundo ao espaçamento vertical -
NOTE - Infelizmente, esta propriedade não funciona no Netscape 7 ou IE 6.
<style type="text/css">
/* If you provide one value */
table.example {border-spacing:10px;}
/* This is how you can provide two values */
table.example {border-spacing:10px; 15px;}
</style>Agora vamos modificar o exemplo anterior e ver o efeito -
<html>
<head>
<style type = "text/css">
table.one {
border-collapse:separate;
width:400px;
border-spacing:10px;
}
table.two {
border-collapse:separate;
width:400px;
border-spacing:10px 50px;
}
</style>
</head>
<body>
<table class = "one" border = "1">
<caption>Separate Border Example with border-spacing</caption>
<tr><td> Cell A Collapse Example</td></tr>
<tr><td> Cell B Collapse Example</td></tr>
</table>
<br />
<table class = "two" border = "1">
<caption>Separate Border Example with border-spacing</caption>
<tr><td> Cell A Separate Example</td></tr>
<tr><td> Cell B Separate Example</td></tr>
</table>
</body>
</html>Isso produzirá o seguinte resultado -
A propriedade do lado da legenda
A propriedade caption-side permite que você especifique onde o conteúdo de um elemento <caption> deve ser colocado em relação à tabela. A tabela a seguir lista os valores possíveis.
Esta propriedade pode ter um dos quatro valores superior, inferior, esquerdo ou direito . O exemplo a seguir usa cada valor.
NOTE - Essas propriedades podem não funcionar com o seu navegador IE.
<html>
<head>
<style type = "text/css">
caption.top {caption-side:top}
caption.bottom {caption-side:bottom}
caption.left {caption-side:left}
caption.right {caption-side:right}
</style>
</head>
<body>
<table style = "width:400px; border:1px solid black;">
<caption class = "top">
This caption will appear at the top
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
<br />
<table style = "width:400px; border:1px solid black;">
<caption class = "bottom">
This caption will appear at the bottom
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
<br />
<table style = "width:400px; border:1px solid black;">
<caption class = "left">
This caption will appear at the left
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
<br />
<table style = "width:400px; border:1px solid black;">
<caption class = "right">
This caption will appear at the right
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
</body>
</html>Isso produzirá o seguinte resultado -
A propriedade de células vazias
A propriedade empty-cells indica se uma célula sem qualquer conteúdo deve ter uma borda exibida.
Esta propriedade pode ter um dos três valores - mostrar, ocultar ou herdar .
Aqui está a propriedade empty-cells usada para ocultar bordas de células vazias no elemento <table>.
<html>
<head>
<style type = "text/css">
table.empty {
width:350px;
border-collapse:separate;
empty-cells:hide;
}
td.empty {
padding:5px;
border-style:solid;
border-width:1px;
border-color:#999999;
}
</style>
</head>
<body>
<table class = "empty">
<tr>
<th></th>
<th>Title one</th>
<th>Title two</th>
</tr>
<tr>
<th>Row Title</th>
<td class = "empty">value</td>
<td class = "empty">value</td>
</tr>
<tr>
<th>Row Title</th>
<td class = "empty">value</td>
<td class = "empty"></td>
</tr>
</table>
</body>
</html>Isso produzirá o seguinte resultado -
A propriedade table-layout
A propriedade table-layout deve ajudá-lo a controlar como um navegador deve renderizar ou dispor uma tabela.
Esta propriedade pode ter um dos três valores: fixo, automático ou herdar .
O exemplo a seguir mostra a diferença entre essas propriedades.
NOTE - Esta propriedade não é compatível com muitos navegadores, portanto, não confie nela.
<html>
<head>
<style type = "text/css">
table.auto {
table-layout: auto
}
table.fixed {
table-layout: fixed
}
</style>
</head>
<body>
<table class = "auto" border = "1" width = "100%">
<tr>
<td width = "20%">1000000000000000000000000000</td>
<td width = "40%">10000000</td>
<td width = "40%">100</td>
</tr>
</table>
<br />
<table class = "fixed" border = "1" width = "100%">
<tr>
<td width = "20%">1000000000000000000000000000</td>
<td width = "40%">10000000</td>
<td width = "40%">100</td>
</tr>
</table>
</body>
</html>Isso produzirá o seguinte resultado -