3.5 Tabla
 |
| Imagen de tabla básica de creación propia |
Las tablas son un elemento muy utilizado en HTML y definir reglas CSS que mejorar su apariencia. ¿Recuerdas que elementos forman parte de el elemento tabla?
<table>: elemento superior que engloba al resto y permite definir una tabla. La tabla se compone de:
- <tr>: se emplea para definir cada fila de las tablas de datos. Habrá tantos <tr> como filas sean necesarias.
- <td>: se emplea para definir cada una de las celdas que forman las filas de una tabla, siempre dentro del elemento <tr>.
- <th>: se emplea para definir las celdas que son cabecera de una fila o de una columna de la tabla.
Veamos un ejemplo de la misma tabla con y sin estilos aplicados.
 |
| Imagen de tabla con estilo de creación propia |
 |
|
Imagen de una tabla sin estilo de creación propia |
Siendo la misma tabla, su apariencia mejora con respecto a la tabla sin estilo. A continuación estudiaremos que reglas CSS permiten dar estilo a este elemento HTML.
¿Qué elementos de la tabla tendrán aplicados un estilo?
Borde
 |
|
Imagen tabla con borde de creación propia |
Para especificar el borde de una tabla en CSS se utiliza la propiedad bordercon tres valores con un orden establecido, el grosor en píxeles (px), tipo de línea (por ejemplo discontinua) y el color. Por ejemplo si queremos asignar un borde de grosor 1px, sólido y color negro a una tabla tanto en el exterior como en su cuadrícula sería así:
table, th, td {
border: 1px solid black;
}
La propiedad border-collapse establece si los bordes de la tabla deben ser colapsados en un solo borde.
Alineación
La propiedad text-align establece la alineación horizontal (como izquierda "left", derecha "right" o centro "center" ) parte del contenido de < th > o < td >. La propiedad vertical-align establece la alineación vertical ( como superior "top", inferior "bottom" o central "center") del contenido en < th > o < td > .
Por ejemplo, alineación horizontal de la cabecera a la izquierda y vertical superior.
th{
text-align: left;
vertical-align: bottom;
}
Altura y anchura
La altura y la anchura de una tabla se definen por la propiedad width y height respectivamente. Por ejemplo, una tabla con anchura 100% y 30px para la cabecera se define con la siguiente regla CSS:
table {
width: 100%;
}
th {
height: 30px;
}
Relleno
Para controlar el espacio entre el borde y el contenido de una tabla, se utiliza la propiedad padding ( ejemplo padding:15 px;) en los elementos <td> y <th>.
Color
Se aplica color a los elementos e la tabla HTML ( <th>, <td>, <tr>) mediante la propiedades ya estudiadas , color al texto "color" y color de fondo "background-color". Por ejemplo, la cabecera de fondo rojo y letra blanca de una tabla tendría la siguiente regla CSS:
th {
background-color: red;
color: white;
}
Un estilo muy frecuente que ayuda a la lectura de las tablas es alternar las filas con un color de fondo (par e impar) . Se utiliza el selector nth-child(even) para filas pares y nth-child(odd) para filas impares. Veamos aplicada esta propiedad en el ejemplo final.
Analicemos el código fuente que permite dar la apariencia a nuestra tabla inicial con estilos, después de haber estudiado una a una la posibles propiedades a aplicar.
 |
|
Imagen de código fuente de tabla con borde de creación propia |