Doom Wiki
Advertisement
Doom Wiki

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:

Resumen de tablas
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


Wikipedialogo
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.
Advertisement