CSS - Tablas

Este tutorial le enseñará cómo establecer diferentes propiedades de una tabla HTML usando CSS. Puede establecer las siguientes propiedades de una tabla:

los border-collapse especifica si el navegador debe controlar la apariencia de los bordes adyacentes que se tocan entre sí o si cada celda debe mantener su estilo.
los border-spacing especifica el ancho que debe aparecer entre las celdas de la tabla.
los caption-sidelos subtítulos se presentan en el elemento <caption>. De forma predeterminada, estos se representan encima de la tabla en el documento. Utilice la propiedad caption-side para controlar la ubicación del título de la tabla.
los empty-cells especifica si el borde debe mostrarse si una celda está vacía.
los table-layout permite a los navegadores acelerar el diseño de una tabla utilizando las primeras propiedades de ancho que encuentra para el resto de una columna en lugar de tener que cargar toda la tabla antes de representarla.

Ahora, veremos cómo usar estas propiedades con ejemplos.

La propiedad border-collapse

Esta propiedad puede tener dos valores colapsar y separar . El siguiente ejemplo usa ambos 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>

Producirá el siguiente resultado:

La propiedad de espaciado de bordes

La propiedad de espaciado de borde especifica la distancia que separa las celdas adyacentes. fronteras. Puede tomar uno o dos valores; deben ser unidades de longitud.

Si proporciona un valor, se aplicará tanto a los bordes verticales como horizontales. O puede especificar dos valores, en cuyo caso, el primero se refiere al espaciado horizontal y el segundo al espaciado vertical -

NOTE - Desafortunadamente, esta propiedad no funciona en Netscape 7 o 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>

Ahora modifiquemos el ejemplo anterior y veamos el efecto:

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

Producirá el siguiente resultado:

La propiedad del lado del título

La propiedad caption-side le permite especificar dónde debe colocarse el contenido de un elemento <caption> en relación con la tabla. La siguiente tabla enumera los posibles valores.

Esta propiedad puede tener uno de los cuatro valores superior, inferior, izquierdo o derecho . El siguiente ejemplo usa cada valor.

NOTE - Es posible que estas propiedades no funcionen con su 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>

Producirá el siguiente resultado:

La propiedad de celdas vacías

La propiedad de celdas vacías indica si una celda sin contenido debe tener un borde mostrado.

Esta propiedad puede tener uno de los tres valores: mostrar, ocultar o heredar .

Aquí está la propiedad de celdas vacías que se usa para ocultar los bordes de las celdas vacías en el 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>

Producirá el siguiente resultado:

La propiedad table-layout

Se supone que la propiedad table-layout le ayuda a controlar cómo un navegador debe representar o diseñar una tabla.

Esta propiedad puede tener uno de los tres valores: fijo, automático o heredado .

El siguiente ejemplo muestra la diferencia entre estas propiedades.

NOTE - Esta propiedad no es compatible con muchos navegadores, así que no confíe en esta propiedad.

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

Producirá el siguiente resultado: