| Esta es |  | |
| la vista | ||
| desde | mi | casa |
Las tablas son elementos que representan valores en dos dimensiones. Muchos atributos de tabla estan obsoletos y se recomienda usar en su lugar CSS.
La etiqueta de cierre es obligatoria. Soporta atributos globales.
Muchos parámetros fueron sustituidos por CSS
Este es la etiqueta principal que limita la tabla y lo debes usar dentro del BODY, cualquier etiqueta de tabla fuera de este delimitador no sera interpretado como tal.
Es un elemento de bloque por lo que introduce un salto de linea automáticamente, tanto al principio como al final de la tabla.
| Atributo | Descripción |
|---|---|
| WIDTH | Define el ancho de la tabla en pixels o en % del ancho de la ventana. |
| HEIGHT | Define el alto de la tabla en pixels o en % del alto de la ventana. |
| ALIGN | Define la tabla como flotante, osea se alinea el texto al rededor de la tabla. Al igual que en las imágenes flotantes, se puede usar la etiqueta <BR CLEAR=...>, para organizar el texto fuera de la tabla mas cómodamente. Puede tomar los valores none (omisión)|LEFT|RIGHT. |
| VALIGN | Define el alineamiento vertical del texto dentro de las celdas en si. Puedes usar: CENTER (omicion)|TOP|BOTTOM|BASELINE. |
| BORDER | Define el borde de la tabla. Con el se puede dar mas énfasis a una tabla poniéndole un valor de 4 y una subtabla dentro con un valor de 1, por ejemplo. |
| BORDERCOLOR | Define el color del borde, siempre que este también presente el atributo BORDER. |
| BORDERCOLORLIGHT o BORDERCOLORDARK | Define un borde de color claro u oscuro muy especial, que proporciona una apariencia 3D. También aquí debera estar presente la etiqueta BORDER. |
| CELLSPACING | Define el espacio entre dos celdas de una tabla. Por omisión esta en 2. Poner este valor en 0 nos proporciona una tabla mas compacta. |
| CELLPADDING | Define el espacio entre el borde y su contenido. Por omisión este valor esta en 1. Poniéndolo en 0, se tendrá que el contenido llaga a tocar el borde, algo no muy agradable. |
| BGCOLOR | Define un color de fondo diferente al del documento para resaltar la tabla. Se usa la misma sintaxis que en el parámetro del mismo nombre en BODY. |
| FRAME | Define cual lado de la tabla sera mostrado. above|below|hsides|vsides|lhs|rhs|border|box|void. |
| RULES | Define donde aparecen las reglas de la tabla. none|groups|rows|columns|all. |
| SUMMARY | Define un texto alternativo para describir la tabla. Ahora se debe usar CAPTION. |
| BACKGROUND | Define una imagen de fondo dentro de la tabla. Se usa la misma sintaxis que en el parámetro del mismo nombre en BODY. La imagen sera puesta en forma de mosaico el numero de veces necesario para cubrir todo el fondo de la tabla y solo funciona en Explorer. |
Ya no se debería usar ningún atributos de table. borde, border-collapse, padding, margin, etc todas fueron incluidas en CSS.
Este etiqueta debe estar dentro del limite de la etiqueta TABLE y se usa para especificar una fila de la tabla. El numero de filas de la tabla es exactamente el numero de etiqueta TR usados.
| Atributo | Descripción |
|---|---|
| ALIGN | Con este parámetro opcional, puedes alinear horizontalmente el texto contenido en todas las celdas de la fila. Puede tomar los valores: LEFT (omision)|CENTER|RIGHT. |
| VALIGN | Con este parámetro es posible manejar el alineamiento del texto dentro de todas las celdas de la fila. Puedes usar: TOP, CENTER (omision), BOTTOM o BASELINE. |
Como ya se menciono también puedes usar los atributos BGCOLOR, BORDERCOLOR, BORDERCOLORLIGHT y BORDERCOLORDARK.
Aquí no funcionan los atributos WIDTH, HEIGHT, BACKGROUND, ROWSPAN ni COLSPAN.
Otros atributos son: ALIGN, VALIGN, BGCOLOR, BACKGOUND, BORDERCOLOR, BORDERCOLORLIGHT y BORDERCOLORDARK. Ahora deberían ser manejado con CSS.
Es muy parecido al etiqueta TD solo que este es usado para títulos y encabezados, ya que pone el texto en negrita y lo alinea horizontalmente al centro de la celda.
| Atributo | Descripción |
|---|---|
| ROWSPAN | Define cuantas filas debe expandirse esta celda sobre las otras. Por omisión este valor es uno. |
| COLSPAN | Define cuantas columnas se puede expandir una celda sobre las demás. Por omisión es uno. |
| SCOPE | Define si la celda es cabecera de una tabla. Los valores posibles son: ROW|COL. |
| WIDTH | Define el ancho de la celda (en realidad de la columna correspondiente ya que también afectara a las demás celdas de la misma columna) en pixels o en % del ancho de la tabla. |
| HEIGHT | Define el alto de la celda (en realidad de la fila correspondiente ya que también afecta a las demás celdas de la misma fila) en pixels o en % del alto de la ventana. |
| NOWRAP | Define que el contenido en la celda no sera roto, pero hay que tener cuidado porque puede causar que las celdas crescan demaciado. |
Este etiqueta debe estar entre los limites de la etiqueta TR y define una celda normal. Cada fila debe tener el mismo numero de columnas, determinadas por este etiqueta o celdas en blanco serán añadidas al final para completar las columnas. Ten mucho cuidado al expandir filas o columnas de reducir el numero de celdas correspondientes en las otras filas o se te descuadra todo.
Cada celda puede contener cualquier etiqueta HTML y por omisión la alineación de horizontal sera left y la vertical center. Las lineas dentro de la celda pueden ser cortas con <BR> pero el parámetro NOWRAP previene esto.
| Atributo | Descripción |
|---|---|
| ROWSPAN | Define cuantas filas debe expandirse esta celda sobre las otras. Por omisión este valor es uno. |
| COLSPAN | Define cuantas columnas se puede expandir una celda sobre las demás. Por omisión es uno. |
| WIDTH | Define el ancho de la celda (en realidad de la columna correspondiente ya que también afectara a las demás celdas de la misma columna) en pixels o en % del ancho de la tabla. |
| HEIGHT | Define el alto de la celda (en realidad de la fila correspondiente ya que también afecta a las demás celdas de la misma fila) en pixels o en % del alto de la ventana. |
| NOWRAP | Define que el contenido en la celda no sera roto, pero hay que tener cuidado porque puede causar que las celdas crescan demaciado. |
Otros atributos son: ALIGN, VALIGN, BGCOLOR, BACKGOUND, BORDERCOLOR, BORDERCOLORLIGHT y BORDERCOLORDARK. Ahora deberían ser manejado con CSS.
Con este etiqueta se asigna un titulo a la tabla. Debe aparecer dentro de los limites de la etiqueta TABLE pero fuera de la etiqueta TR.
Este etiqueta acepta los atributos ALIGN (por omisión en TOP), VALIGN y BGCOLOR.
Delimita la sección de cabecera de la tabla.
Delimita la sección de cuerpo de la tabla.
Delimita la sección de pie de la tabla.
Celdas en blanco no tendrán borde. Si quieres que aparezca el borde tendrás que poner algo como un espacio en la celda. Ej o <BR>.
Puedes incluso incluir un enlace, una imagen, un sonido o un video como contenido de una celda.
No es necesario (aunque tampoco es un error) cerrar los etiquetas <TR>, <TH> y <TD>. No asi <TABLE> y <CAPTION> que son obligatorios.
Muchos parámetros fueron sustituidos por CSS
<TABLE BORDER=1 BORDERCOLOR=purple CELLSPACING=0> <CAPTION ALIGN=left>Ejemplo 1</CAPTION> <TR><TD ROWSPAN=2 COLSPAN=2><TH COLSPAN=2 BGCOLOR=gray>Promedio <TR><TH>Alto<TH>Ancho <TR><TH ROWSPAN=2 BGCOLOR=gray>Sexo<TH BGCOLOR=silver>Machos<TD>1.9<TD>0.003 <TR><TH BGCOLOR=silver>Hembras<TD>1.7<TD>0.002 </TABLE>
| Promedio | |||
|---|---|---|---|
| Alto | Ancho | ||
| Sexo | Machos | 1.9 | 0.003 |
| Hembras | 1.7 | 0.002 | |
<TABLE BORDER=1 BGCOLOR=#FEE7BD> <CAPTION>Ejemplo 2</CAPTION> <TR> <TD>1</TD><TD>2<TD>3 <TABLE BORDER BORDERCOLOR=Black> <TR><TD>A<TD>B <TR><TD>C<TD>D </TABLE> <TR><TD>4<TD><5<TD6> </TABLE>
| 1 | 2 | 3
| ||||
| 4 | 5 | 6 |
<CENTER> <TABLE BORDER=4 WIDTH=70% HEIGHT=15%> <CAPTION ALIGN=RIGHT VALIGN=BOTTOM>Ejemplo 3</CAPTION> <TR><TH>Este sera el Item 1<TH>Item 2 <TR><TD>3<TD>4 <TR ALIGN=CENTER><TD>5<TD>6 <TR ALIGN=RIGHT><TD>7<TD>8 </TABLE> </CENTER>
| Este sera el Item 1 | Item 2 |
|---|---|
| 3 | 4 |
| 5 | 6 |
| 7 | 8 |
<Table BORDER BGCOLOR=Silver BORDERCOLOR=Black WIDTH=50%> <CAPTION BGCOLOR=WHITE>Ejemplo 4</CAPTION> <TR> <TD>Esta es la primera celda<TD>Esta es la segunda celda <TR BORDERCOLOR=TEAL BGCOLOR=OLIVE><TD>Eta es la tercera celda<TD>Esta es la cuarta celda <TR BORDERCOLOR=NAVY BGCOLOR=AQUA> <TD BORDERCOLOR=Yellow>Esta es la quinta celda</TD><TD BGCOLOR=White>Esta es la sexta celda </Table>
| Esta es la primera celda | Esta es la segunda celda |
| Eta es la tercera celda | Esta es la cuarta celda |
| Esta es la quinta celda | Esta es la sexta celda |
<TABLE ALIGN=left BORDER WIDTH=50%> <CAPTION>Ejemplo 5</CAPTION> <TR><TD><FONT COLOR=PURPLE>Esta tabla tiene dos filas</FONT> <TR><TD>Esta alineada a la izquierda </TABLE>
| Esta tabla tiene dos filas |
| Esta alineada a la izquierda |
Estas lineas de texto están a la derecha de la tabla que es flotante y la pueden rodear completamente sin problemas.
<TABLE ALIGN=right BORDER=1 WIDTH=50%> <CAPTION>Ejemplo 6</CAPTION> <TR><TD HEIGHT=30%><FONT COLOR=red>Esta tabla tiene dos filas</FONT> <TR><TD>Esta alineada a la derecha de la pagina </TABLE>
| Esta tabla tiene dos filas |
| Esta alineada a la derecha de la pagina |
Estas lineas de texto están a la izquierda de la tabla que es flotante y la pueden rodear completamente sin problemas.
<TABLE WIDTH=40% HEIGHT=50% BGCOLOR=#FFCCFF BORDER=1 BORDERCOLOR=#440066 CELLSPACING=0> <TR ALIGN=center><TD>Esta es<TD ROWSPAN=2 COLSPAN=2><IMG SRC=isla.gif ALT=isla> <TR ALIGN=center><TD>la vista <TR ALIGN=center><TD>desde<TD>mi<TD>casa </TABLE>
| Esta es | | |
| la vista | ||
| desde | mi | casa |