Cómo hacer tablas HTML
A menudo resulta útil presentar información de una manera más estructurada que en las listas. Las tablas permiten mostrar esta información en filas y columnas. Las tablas se definen como series de filas.
¿Cómo se usan las tablas?
Una tabla debe respetar las siguientes reglas:
- La tabla está enmarcada por las etiquetas <TABLE> y </TABLE>.
- El título de la tabla está enmarcado por <CAPTION> </CAPTION>
- Cada fila está enmarcada por<TR> </TR> (por Table Row).
- Las celdas de encabezamiento están enmarcadas por <TH> </TH> (por Table Header).
- Los datos en cada celda están enmarcados por <TD> </TD> (Table Data).
Este es un ejemplo de tabla HTML:
<TABLE BORDER="1"> <CAPTION>Este es el título de la tabla</CAPTION> <TR> <TH> Título A1 </TH> <TH> Título A2 </TH> <TH> Título A3 </TH> <TH> Título A4 </TH> </TR> <TR> <TH> Título B1 </TH> <TD> Valor B2 </TD> <TD> Valor B3 </TD> <TD> Valor B4 </TD> </TR> </TABLE>
Los resultados de este código:
| Título A1 | Título A2 | Título A3 | Título A4 |
|---|---|---|---|
| Título B1 | Valor B2 | Valor B3 | Valor B4 |
¿Cuáles son los atributos?
| Atributo | Etiquetas a las que se aplica | Valor | Efecto visual |
|---|---|---|---|
| ALIGN | THEAD TBODY TH TR TD | CENTER
LEFT RIGHT JUSTIFY |
Centrado
Izquierda Derecha Justificado |
| CAPTION | TOP
BOTTOM |
Arriba
Abajo |
|
| VALIGN (alineación vertical) | THEAD TBODY TH TR TD | TOP
MIDDLE BOTTOM |
Arriba
Medio Abajo |
| BORDER=n | TABLE | Tamaño del borde | |
| CELLPADDING=n | TABLE | Deja n píxeles de espacio entre los contenidos de la celda y el borde | |
| CELLSPACING=n | TABLE | Grosor del espacio entre celdas | |
| FLOAT | TABLE | RIGHT
LEFT |
Posición del texto que sigue a </TABLE> |
| COLS=n | TABLE | Número de columnas | |
| FRAME
(controla los elementos individuales del marco de la tabla) |
TABLE | NONE
Arriba BOTTOM TOPBOT SIDES ALL |
Ninguno
Arriba Abajo arriba de todo A los costados Todo |
| RULES
(controla los elementos de la cuadrícula de la celda) |
TABLE | NONE
BASIC ROWS COLS ALL |
Ninguno
Básica Línea Columna Todo |
| COLSPAN | THEAD TBODY TH TR TD | Hace que las celdas desborden sobre las columnas adyacentes | |
| ROWSPAN | THEAD TBODY TH TR TD | Hace que las celdas desborden sobre las filas adyacentes |