Bem-vindo ao site John Pires!

CSS – Fundamentos Básicos

Home/Curso/CSS – Fundamentos Básicos

CSS – Fundamentos Básicos

CSS – Tabelas




Este tutorial irá ensiná-lo a definir diferentes propriedades de uma tabela HTML usando CSS. Você pode definir as seguintes propriedades de uma tabela:

  • O recolhimento da borda 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 espaçamento da borda especifica a largura que deve aparecer entre as células da tabela.
  • As legendas do lado da legenda são apresentadas no elemento <caption>. Por padrão, eles são renderizados acima da tabela no documento. Use a propriedade caption-side para controlar o posicionamento da legenda da tabela.
  • As células vazias especificam se a borda deve ser mostrada se uma célula estiver vazia.
  • O layout da tabela 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>



A propriedade de espaçamento de borda

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, nesse caso, o primeiro se refere ao espaçamento horizontal e o segundo ao espaçamento vertical –

NOTA – 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>

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.

NOTA – 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>

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>

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.

NOTA – 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>



Leave a Comment

Copyright John Pires - Todos os direitos reservados

SIGN IN

Forgot Password

Message modal