Las tablas son sin duda uno de los elementos más potentes del HTML. Con pocos elementos se pueden conseguir efectos espectaculares. En el interior de las celdas de una tabla, que pueden ser con borde visible o invisible, se puede poner cualquier cosa: texto de cualquier tamaño y color, imágenes, links,etc.
Por supuesto, además de permitir cualquier contenido, tienen sus propios atributos de alineación tanto horizontal como vertical, y atributos de dimensionado. Por defecto se autodimensionan, es decir, se adaptan en tamaño a su contenido, pero también es posible definirlo de forma fija. Las tablas han sido utilizadas largo tiempo para maquetar el contenido de las páginas, y aunque las nuevas tendencias aconsejen hacer esto con bloques (capas XHTML), no es un elemento que vaya a desaparecer, y es mucho más sencillo de utilizar.
Elementos
El elemento básico de definición de una tabla es <TABLE> </TABLE> y en su interior se disponen los sub elementos:
- <TR> para definir una fila (Row)
- <TH> para definir una cabecera (Header)
- <TD> para definir una celda de datos (Data).
Estos sub elementos también han de llevar sus correspondientes cierres: </TR> </TH> </TD>.
Una cabecera <TH> es lo mismo que una celda de datos <TD> pero de forma automática el texto de su contenido recibe los atributos de negrita y centrado. Sólo es posible definirlas al principio de las filas, de las columnas o de ambas a la vez.
He aquí una tabla resumen de los elementos utilizados y los atributos que admite cada uno:
TABLE | TR | TD | TH | CAPTION | |
---|---|---|---|---|---|
BORDER | x | - | - | - | - |
BORDERCOLOR | x | - | - | - | - |
ROWSPAN | - | - | x | x | - |
COLSPAN | - | - | x | x | - |
ALIGN | - | x | x | x | x |
VALIGN | - | - | x | - | - |
WIDTH | x | - | x | - | - |
HEIGTH | x | - | x | - | - |
CELLPADDING | x | - | - | - | - |
CELLSPACING | x | - | - | - | - |
NOWRAP | - | - | x | - | - |
EVENTS | x | x | x | x | - |
Ejemplos simples
Tabla básica con bordes
A | B | C |
D | E | F |
Línea extendida (rowspan)
elemento1 | elemento2 | elemento3 |
elemento4 | lemento5 |
Columna extendida (colspan)
elemento1 | elemento2 | |
elemento3 | elemento4 | lemento5 |
Tabla con cabeceras / títulos
titulo1 | titulo2 | titulo3 |
---|---|---|
A | B | C |
D | E | F |
Combinación de columna extendida y título
titulo1 | titulo2 | ||
---|---|---|---|
A | B | C | D |
E | F | G | H |
Combinación de cabeceras múltiples y columna extendida
titulo1 | titulo2 | ||
---|---|---|---|
titulo3 | titulo4 | titulo5 | titulo6 |
A | B | C | D |
E | F | G | H |
Cabeceras laterales
titulo1 | elemento1 | elemento2 | elemento3 |
---|---|---|---|
titulo2 | elemento4 | elemento5 | elemento6 |
titulo3 | elemento7 | elemento8 | elemento9 |
Combinación de cabeceras laterales y líneas extendidas
titulo1 | elemento1 | elemento2 | elemento3 | elemento4 |
---|---|---|---|---|
elemento5 | elemento6 | elemento7 | elemento8 | |
titulo2 | elemento9 | elemento10 | elemento3 | elemento11 |
Ejemplos con diseño
Alineación de columnas
Para alinear las columnas a la izquierda, derecha o centro, se utilizan las clases “colnizq”, “colnder” y “colncen”, donde n se reemplaza por el número de columna. Para anular esta preferencia en una celda particular, se puede usar style="text-align:..." en la misma celda.
Las clases no cambian la alineación de los encabezados, solo de las celdas comunes.
Las clases "colnder", "colnizq" o "colncen", no funcionan de modo regular si en la tabla se han unido varias celdas (mediante "colspan" o "rowspan").
Uso de colores de fondo
titulo en azul | |
---|---|
celda roja | celda verde |
Uso de colores de texto
Hay dos formas de especificar el color del texto y del fondo para cada celda individualmente:
abc | def | otraforma | jkl |
Uso combinado
Los colores pueden también ser especificados para una fila completa o para una tabla completa; los parámetros para una fila sobrescriben los valores para la tabla, y los de una celda sobrescriben los de la fila:
abc | def | ghi |
jkl | mno | pqr |
stu | vwx | yz |
Tamaño del texto e interlineado
TEXTO GRANDE con interlineado pequeño |
Texto normal con interlineado normal |
Texto pequeño CON INTERLINEADO GRANDE |
Fijar el ancho de una columna
A | A |
Avanzados
Pestañas básicas
Texto de muestra de la primera pestaña.
El contenido de la segunda pestaña va aquí.
El contenido de la tercera pestaña va aquí.
Columnas simples
Separa los elementos en columnas de ancho fijo
<div style="-moz-column-width: 15em; column-width: 15em;"> </div>
- 32in24-15tex
- AA-tex
- Archtex
- Aquatex
- Blank-TX
- Boomqtex
- cc4-tex
- Colortex
- Dark2tex
- Echtex
- Erattex1
- GothicTX
- Greenwar2-tex
- Jimmytex
- Junkcity
- KBC_tex
- LKtex
- Lostres
- Misctex
- Neutrontex
- OTEX
- PPtex
- Retres
- Rfhelltx
- RTP
- Twangotex
- Ultratex
- Wirefrme
- Zmodqtex
- Zoon-tex
Véase también
Enlaces externos
Esta página utiliza contenido publicado por Wikipedia en el artículo titulado Ayuda:Tablas. | |
Al igual que en Doom Wiki, el texto de Wikipedia está disponible en el GNU Free Documentation License. |