Nos permite seleccionar la apariencia de los bordes de cada celda de la tabla.

Existen 2 modelos diferentes de bordes: separados y continuos.

Los navegadores utilizan por defecto el modelo de bordes separate, que hace que todas las celdas estén separadas y muestren siempre sus cuatro bordes.

Sintaxis: border-collapse: separate | collapse | initial | inherit;

Valores de propiedad:

• separate - Hace que todas las celdas estén separadas y muestren siempre sus cuatro bordes. (las propiedades de separación entre bordes y celdas vacías no se ignorarán). Esto es el predeterminado.
• collapse - Las fronteras se colapsan en un solo borde cuando sea posible (las propiedades de separación entre bordes y celdas vacías se ignorarán).
• initial - Establece esta propiedad a su valor predeterminado.
• inherit - Hereda esta propiedad de su elemento padre.

<table border="1">
    <caption>
        border-collapse: separate
    </caption>
    <tr>
        <td>Celda 1-1</td>
        <td>Celda 1-2</td>
        <td>Celda 1-3</td>
    </tr>
    <tr>
        <td>Celda 2-1</td>
        <td>Celda 2-2</td>
        <td>Celda 2-3</td>
    </tr>
    <tr>
        <td>Celda 3-1</td>
        <td>Celda 3-2</td>
        <td>Celda 3-3</td>
    </tr>
</table>

table {
    background-color: #5f9ea0;
    border-collapse: 
        separate
        collapse
        initial
    
    margin: auto;
    width: 200px;
}
caption { text-align:center }
td {
    background-color: #ffe4c4;
    text-align: center;
}

Especifica la separación entre celdas adyacentes. Si especificamos un solo valor, este actúa sobre toda la tabla. Si especificamos 2 valores el primero define la separación horizontal y el segundo la vertical.

Esta propiedad sólo tiene sentido cuando se utiliza el modelo de bordes separados (controlado mediante la propiedad border-collapse).

Nota: No funciona en IE 5, 6 y 7

Sintaxis: border-spacing: longitud | initial | inherit;

Valores de propiedad:

• longitud - Especifica la distancia entre los bordes de las celdas adyacentes en px, cm, etc. No se permiten valores negativos.
  • Si se especifica un valor de longitud, especifica el espaciado horizontal y vertical.
  • Si se especifican dos valores de longitud, el primero establece el espaciado horizontal y el segundo establece el espaciado vertical.
• initial - Establece esta propiedad a su valor predeterminado.
• inherit - Hereda esta propiedad de su elemento padre.

<table border="1">
    <caption>
        border-spacing: 2px
    </caption>
    <tr>
        <td>Celda 1-1</td>
        <td>Celda 1-2</td>
        <td>Celda 1-3</td>
    </tr>
    <tr>
        <td>Celda 2-1</td>
        <td>Celda 2-2</td>
        <td>Celda 2-3</td>
    </tr>
    <tr>
        <td>Celda 3-1</td>
        <td>Celda 3-2</td>
        <td>Celda 3-3</td>
    </tr>
</table>

table {
    background-color: #5f9ea0;
    border-collapse: 
        2px
        0
        5px
        10px
        30px
        0px 30px
        1px 15px
        15px 1px
        10px 30px
        30px 10px
        initial
    
    margin: auto;
    width: 200px;
}
caption { text-align:center }
td {
    background-color: #ffe4c4;
    text-align: center;
}

Nos permite ubicar el título de la tabla por encima o por debajo de la misma. La alineación horizontal del mismo se puede establecer con la propiedad text-align.

Las tablas XHTML indican su título mediante la etiqueta <caption> que siempre se incluye en el interior de la etiqueta <table> . Por defecto, el título siempre se muestra en la parte superior de la tabla.

Nota: Internet Explorer ubica el título siempre por encima de la tabla.

Sintaxis: caption-side: top | bottom | initial | inherit;

Valores de propiedad:

• top - Coloca el título encima de la tabla. Esto es el predeterminado.
• bottom - Pone el título debajo de la tabla.
• initial - Establece esta propiedad a su valor predeterminado.
• inherit - Hereda esta propiedad de su elemento padre.

<table border="1">
    <caption>
        caption-side: top
    </caption>
    <tr>
        <td>Celda 1-1</td>
        <td>Celda 1-2</td>
        <td>Celda 1-3</td>
    </tr>
    <tr>
        <td>Celda 2-1</td>
        <td>Celda 2-2</td>
        <td>Celda 2-3</td>
    </tr>
    <tr>
        <td>Celda 3-1</td>
        <td>Celda 3-2</td>
        <td>Celda 3-3</td>
    </tr>
</table>

table {
    background-color: #5f9ea0;
    caption-side: 
            top
            bottom
            initial
        
    margin: auto;
    width: 200px;
}
caption { text-align: center }
td {
    background-color: #ffe4c4;
    text-align: center;
}

Nos permite controlar la visualización de los bordes y fondos de una celda vacía. Muestra u oculta las celdas vacías de una tabla.

Nota: No funciona en IE 5, 6 y 7

Sintaxis: empty-cells: show | hide | initial | inherit;

Valores de propiedad:

• show - Fondo y bordes se muestran en las celdas vacías. Esto es el predeterminado.
• hide - Hace que se oculten las celdas vacías.
• initial - Establece esta propiedad a su valor predeterminado.
• inherit - Hereda esta propiedad de su elemento padre.

Las celdas ocultas con empty-cells no muestran ningún borde, ni color de fondo ni contenido, pero siguen ocupando sitio. De esta forma, la estructura de la tabla y la posición del resto de las celdas no se ven afectadas por ocultar las celdas vacías.

Para que se oculten las celdas vacías mediante la propiedad empty-cells: hide, la tabla debe utilizar obligatoriamente el modelo de bordes separate.

Según el estándar CSS 2.1, una celda vacía es aquella que no tiene ningún contenido o que su contenido está formado sólo por espacios en blanco. En el siguiente ejemplo, la tercera celda de la primera fila y la segunda celda de la segunada fila, sólo tiene espacios en blanco, la primera y tercera celda de la tercera fila tiene los mismos espacios en blanco pero escritos mediante la entidad HTML &nbsp;.

Si todas las celdas de una misma fila están vacías y se indica la propiedad empty-cells: hide, la altura de la fila es cero y por tanto, en su lugar sólo se muestra uno de los dos border-spacing verticales de esa fila.

<table border="1">
    <caption>
        empty-cells: show
    </caption>
    <tr>
        <td>Celda 1-1</td>
        <td>Celda 1-2</td>
        <td> </td>
    </tr>
    <tr>
        <td>Celda 2-1</td>
        <td> </td>
        <td>Celda 2-3</td>
    </tr>
    <tr>
        <td> </td>
        <td>Celda 3-2</td>
        <td> </td>
    </tr>
</table>

table {
    background-color:#5f9ea0;
    border-spacing: 10px;
    border-collapse: separate;
    empty-cells: 
            show
            hide
            initial
        
    margin: auto;
    width: 200px;
}
caption { text-align:center }
td {
    background-color: #ffe4c4;
    text-align: center;
}

Establece el algoritmo de diseño que se utilizará para una tabla. Se usa para diseñar las filas, columnas o celdas de una tabla. Entre las posibilidades de diseño podemos definir si las mismas van a tener el tamaño fijo que estipulemos (fixed) o se adecuarán al contenido sin importar la medida que hayamos establecido (auto).

Sintaxis: table-layout: auto | fixed | initial | inherit;

Valores de propiedad:

• auto - Algoritmo automático de la disposición de la tabla (esto es el valor por defecto):
  • El ancho de la columna se establece por el contenido más ancho irrompible en las celdas
  • Puede ser lento, ya que necesita leer todo el contenido de la tabla, antes de determinar el diseño final
• fixed - Algoritmo de disposición de la tabla fija:
  • La disposición horizontal sólo depende del ancho de la tabla y de la anchura de las columnas, no del contenido de las celdas.
  • Permite a un navegador configurar la tabla más rápidamente que el diseño automático de la tabla.
  • El navegador puede comenzar a mostrar la tabla una vez que se haya recibido la primera fila.
• initial - Establece esta propiedad a su valor predeterminado.
• inherit - Hereda esta propiedad de su elemento padre.

<table>
    <caption>
        table-layout: auto
    </caption>
    <tr>
        <td>111.222.333.444.555.666</td>
        <td>TEXTO</td>
    </tr>
</table>

table, td {
    border: 1px solid black;
}
table {
    background-color: #5f9ea0;
    border-collapse: separate; 
    margin: auto;
    table-layout: 
            auto
            fixed
            initial
        
    width: 300px;
}
caption { text-align: center }