Estilos CSS para personalizar tablas | Propiedades y diseños

En esta lección aprenderás a poner estilos a tablas HTML con CSS, conocerás las propiedades y sus valores para controlar la apariencia de las tablas hechas con HTML; crearemos varios ejemplos aplicativos, para que de esta manera puedas entender perfectamente.

Diseño de tablas en HTML y CSS

Recordemos que las tablas están compuestas por filas y columnas, en HTML aprendimos cómo hacer tablas y además cómo dotarle de cierta apariencia mediante atributos de HTML, sin embargo CSS nos permite mayor control sobre cada aspecto de las tablas, además podemos emplearla para apuntar a todas las tablas y definir un estilo para todos mediante un simple código CSS.

Para empezar a utilizar estilos de tablas HTML, necesariamente debimos estudiar la estructura de tablas HTML, sin embargo repasamos rápidamente; la etiqueta para tablas es <table> dentro de ella van las filas mediante la etiqueta <tr>, finalmente dentro de las filas van las columnas mediante <td>, sabiendo esto, ya podemos ir dando estilos.

A continuación conozcamos las respectivas propiedades y cómo estos pueden controlar a las tablas.

Propiedades CSS para personalizar tablas HTML

Existen varias propiedades CSS aplicables a tablas, por ejemplo los márgenes, bordes, rellenos, colores de letra, colores de fondo, etc. son aplicables a tablas y a estas alturas ya las hemos conocido. Ahora nos toca conocer aquellas que sirve para maquetar tablas en especial.

La propiedad border-collapse

Recordemos que al definir un borde para tabla en HTML, estos bordes se muestran separados, cada elemento de tablas posee su propio borde.

La propiedad border-collapse nos permite colapsar esos bordes separados en un solo borde o mantenerlos separados, veamos los posibles valores:

Valores para border-collapse

• inherit.- establece que se debe heredar el estilo del elemento padre que contiene a la tabla.
• separate.- indica que los bordes deben ser separados.
• collapse.- hace que los bordes sean colapsados en uno solo.

Ejemplo de border-collapse en tablas CSS

<table class="separado" border="1">

<tr>
<td>HTML</td>
<td>CSS</td>
<td> JAVASCRIPT</td>
</tr>

<tr>
<td>Estructura</td>
<td>Apariencia</td>
<td>Interactivo</td>
</tr>

</table>
<br><br>

<table class="colapsado" border="1">

<tr>
<td>HTML</td>
<td>CSS</td>
<td> JAVASCRIPT</td>

</tr>

<tr>
<td>Estructura</td>
<td>Apariencia</td>
<td>Interactivo</td>

</tr>

</table>

table.separado {border-collapse: separate;}


table.colapsado {border-collapse: collapse;}

Resultado:

¿Notas la diferencia? Pues si, el primero tiene bordes separados mientras la segunda un solo borde. Pues de ahora en adelante vamos a colapsar los bordes de tablas, ya que así se ve mejor, siempre y cuando no sea necesario emplear celdas separadas, ya veremos que en ciertos casos es necesario.

Propiedad border-spacing

La propiedad border-spacing nos permite establecer el espacio entre celdas adyacentes de una tabla y solo funciona cuando los bordes de celdas están separadas (border-collapse="separate;"), es similar a la propiedad de relleno que conocimos en lecciones anteriores, pero en este caso se trata de elementos de tabla.

La propiedad border-spacing puede tomar cualquier valor numérico, con su respectiva unidad de medida.

Podemos definir espacios uniformes en todos los lados al expresar un solo valor numérico o también podemos expresar dos valores numéricos, en ese caso el primero establece el espaciado horizontal y el segundo el espaciado vertical.

Ten presente que el espaciado horizontal es aquella que separa a las celdas de una fila y el espaciado vertical aquella que separa las celdas de una columna. Veamos algunos ejemplos.

Ejemplos de border-spacing CSS

<p>Tabla con celdas sin espacio.</p>
<table class="sinespacio" border="1">
<tr>
<td>Marca</td>
<td>Color</td>
<td>Precio</td>
</tr>
<tr>
<td>Agua</td>
<td>Verde</td>
<td>140.00</td>
</tr>
</table>

<p>Tabla con celdas de espacio uniforme.</p>
<table class="conespacio" border="1">
<tr>
<td>Marca</td>
<td>Color</td>
<td>Precio</td>
</tr>
<tr>
<td>Agua</td>
<td>Verde</td>
<td>140.00</td>
</tr>
</table>

<p>Tablas con espacio horizontal y vertical diferente.</p>
<table class="diferent" border="1">
<tr>
<td>Marca</td>
<td>Color</td>
<td>Precio</td>
</tr>
<tr>
<td>Agua</td>
<td>Verde</td>
<td>140.00</td>
</tr>
</table>

table.sinespacio {
  border-collapse: separate;}













table.conespacio {
border-collapse: separate;
border-spacing: 30px;}











table.diferent {
border-collapse: separate;
border-spacing: 70px 15px;}

Resultado:

Propiedad caption-side

La propiedad caption-side está pensada para posicionar la leyenda de las tablas con CSS, como bien sabemos la leyenda de una tabla describe su contenido y gracias a caption-side podemos indicar que la leyenda se muestre en la parte superior o inferior.

Valores para caption-side

• top.- Coloca la leyenda en la parte superior.
• bottom.- Indica que la leyenda va en la parte inferior.

Ejemplo de posicionamiento de leyenda en tabla con CSS

<table border="1">
<caption> Colores en forma Hexadecimal. </caption>

<tr>
  <td>Color</td>
  <td>Verde</td>
  <td>Azul</td>
  <td>Rojo</td>
  <td>Blanco</td>
</tr>

  <tr>
  <td>Hexadecimal</td>
  <td>#009846</td>
  <td>#0000ff</td>
  <td>#ff0000</td>
  <td>#ffffff</td>
</tr>
</table>

table {
  border-collapse: collapse;
  border-spacing:40px;}


caption {caption-side:bottom;}

Resultado:

Propiedad empty-cells

La propiedad empty-cells nos permite establecer si se muestran o no los bordes de celdas que no poseen contenido dentro de ella, y los podemos notar cuando los bordes de celda se encuentran separados (border-collapse: separate;).

Los valores para empty-cells son:

• Show.- indica que los bordes de celdas sin contenido se muestren.
• Hide.- indica que los bordes de celdas vacías no se muestren.

Por ejemplo:

<table class="hide" border="1">
<tr>
  <td>Color</td>
  <td></td>
  <td>Azul</td>
</tr>
  <tr>
  <td></td>
  <td>#009846</td>
  <td></td>
</tr>
</table><br>

<table class="show" border="1">
<tr>
  <td>Color</td>
  <td></td>
  <td>Azul</td>
</tr>
  <tr>
  <td></td>
  <td>#009846</td>
  <td></td>
</tr>
</table>

table.hide {border-collapse:separate;
empty-cells: hide;

}

table.show {border-collapse:separate;
empty-cells: show;

}

La propiedad table-layout

La propiedad table-layout sirve para determinar el ancho de las columnas de una tabla, nos referimos a la dimensión horizontal de celdas; es posible determinar si el ancho será fijo o automático de acuerdo al contenido. Conozcamos sus valores.

Valores de table-layout

• Auto.- este es el valor por defecto, indica que el ancho se ajusta al contenido automáticamente, es decir será proporcional a la cantidad de contenido que poseen las celdas.
• Fixed.- indica que el ancho de columna es fijo y no se ajusta al contenido que contienen las celdas, por ello es posible que el contenido se salga de una celda, visualmente invadiendo a otras.

A continuación apreciemos un hermoso ejemplo.

Table-layout ejemplos de código CSS

<table class="auto" border="1">
<tr>
  <td>Color</td>
  <td>Verde</td>
</tr>
<tr>
  <td>Hexadecimal</td>
  <td>#009846</td>
</tr>
</table><br>

<table class="fixed" border="1">
<tr>
  <td>Color</td>
  <td>Verde</td>
</tr>
<tr>
  <td>Hexadecimal</td>
  <td>#009846</td>
</tr>
</table><br>
<table class="mas" border="1">
<tr>
  <td>Color</td>
  <td>Verde</td>
</tr>
<tr>
  <td>Hexadecimal</td>
  <td>#009846</td>
</tr>
</table>

table.auto {
  table-layout: auto;
  width: 10px;
}




table.fixed {
  table-layout: fixed;
  width: 100px
}




table.mas {
 table-layout: fixed;
 width: 300px}

Resultado:

Observa los resultados, en el primer caso indicamos ancho automático, por lo cual no hace caso al ancho de 10px establecido, en el segundo caso se establece un ancho fijo de 100px, lo cual es estrictamente obedecido, de tal manera que la palabra Hexadecimal de la tabla supera 100px y visualmente invade la siguiente fila, lo mismo ocurre con el contenido de la celda inferior derecha, su contenido sobresale de la tabla.

En el tercer caso establecemos un ancho fijo de 300px, y también es obedecido de tal manera que la tabla resultante es bastante ancho.

Colores de fondo para tablas, filas, columnas y celdas con CSS

Para poner color de fondo a tablas con CSS, podemos utilizar identificadores y selectores adecuados y a ello le designamos las propiedades background-color para color de fondo, color para color de letra. En fin, cualquier otro que sea compatibles con el contenido de las tablas, incluso podremos utilizar otras propiedades que aprenderemos más adelante. Vamos paso a paso, pruébalos.

Veamos un ejemplo de código CSS para tablas HTML, esto para que no te quedes con la curiosidad o las dudas, se trata de una tabla hermosamente maquetada con colores y espacios, bordes y más, si ves alguna propiedad aún no desarrollada en el curso, no te preocupes, lo aprenderás más adelante, simplemente quiero que veas lo que se puede lograr.

Observa, el código CSS está incrustado en el mismo documento HTML, mediante la etiqueta <style>.

<!DOCTYPE HTML>
<html>
    <head><title> Curso CSS</title>
<style>
table#mitabla {border-collapse: collapse;}
td.bajo {background-color: #ff455e;}
td.medio {background-color: #d63e3e;}
td.alto {background-color: #940014;}

td.a {background-color: #243ff0;}
td.b {background-color: #1726cf;}
td.c {background-color: #100085;}

td.aaa {background-color: #f8ff94;}
td.bbb {background-color: #fff64f;}
td.ccc {background-color: #ffff00;}

thead.cabecera tr td {
    font-family: monospace;
    font-size: 30px;
    font-weight: bold;
    color: #ffffff;
    padding: 15px;}

tfoot.pie tr td {
    font-size: 18px;
    font-weight: bold;
    font-family: Georgia;
    padding: 2px;}

tbody.cuerpo tr td {
    color: #ebebeb;
    padding: 10px;}

td {border-style: solid;
    border-color: #cccccc;
 border-width: 1px;}
 
</style>

</head>   
 <body>   
<table id="mitabla">

<thead class="cabecera">
<tr class="rojo">
<td class="bajo"> elemento a </td>
<td class="medio"> elemento b </td>
<td class="alto"> elemento c </td>
</tr>
</thead>

<tbody class="cuerpo">
<tr>
<td class="a"> lemento A </td>
<td class="b"> lemento B </td>
<td class="c"> lemento C </td>
</tr>

<tr>
<td class="a"> emento AA </td>
<td class="b"> emento BB </td>
<td class="c"> emento CC </td>
</tr>

</tbody>
<tfoot class="pie">
<tr>
<td class="aaa"> emento AAA </td>
<td class="bbb"> emento BBB </td>
<td class="ccc"> emento CCC </td>
</tr>
</tfoot>

</table>
</body>
</html>

Resultado:

[popup_anything id=»4273″]