Curso de Diseño y maquetación web

Maquetación de tablas

Estructura

Estilizando tablas

Espaciado entre celdas

Atributos de tabla

Estos atributos están en desuso desde la estandarización que trajo consigo HTML5. No obstante se siguen utilizando para determinados casos, como puede ser la maquetación de newsletters.

• align: Alinea horizontalmente la tabla con respecto a su entorno. Aplicado a una celda, alinea su contenido.
• background: Permite colocar un fondo a la tabla, a partir de un enlace a una imagen.
• bgcolor: Permite dar un color de fondo a la tabla.
• border: Define el número de pixels del borde principal.
• bordercolor: Define el color del borde.
• cellpadding: Define el espacio entre los bordes de la celda y el contenido de la misma (píxeles). Aplicado a un 'td' y comparandolo con un 'div' equivale al padding de la celda.
• cellspacing: Define el espacio entre los bordes, cuando están separados (pixels). Aplicado a un 'td' y comparandolo con un 'div' equivale al margin de la celda.
• height: Define la altura de la tabla, fila o celda en pixels o porcentaje.
• width: Define la anchura de la tabla, fila o celda en pixels o porcentaje.

Atributos de <table>

Border

Atributos de <table> de <th> y <td>

align

Atributos de <table> de <th> y <td>

colspan & rowspan: Unificación de celdas.

Los atributos colspan y rowspan permiten unir una celda con las celdas contiguas, tanto horizontal como verticalmente. El valor de colspan indica la cantidad de celdas unidas en horizontal y el valor de rowspan indica la cantidad de celdas unidas en vertical.

Etiquetas de <table> de <th> y <td>

Colgroup & col: Selectores de columnas

La etiqueta <colgroup> especifica un grupo de una o más columnas en una tabla para formatear. La etiqueta <colgroup> es útil para aplicar estilos a columnas enteras, en lugar de repetir los estilos para cada celda, para cada fila.

Nota: La etiqueta <colgroup> debe ser hija de un elemento <table>, después de cualquier elemento <caption> y antes de cualquier elemento <thead>, <tbody>, <tfoot> y <tr>.

Fijar elementos de la tabla

Fijar la cabecera y/o la 1ª columna

En muchas ocasiones nos piden fijar la cabecera u otros elementos de una tabla cuando hay mucho contenido y se genera un scroll.