Atributos de
tablas
En esta lección se explican los atributos propios de las tablas:
Atributos de <table>
El atributo width
El atributo width establece el ancho de la
tabla, en porcentaje o en píxeles. En el siguiente ejemplo, al modificar el
tamaño de la ventana del navegador, se puede observar cómo se modifica el
tamaño de la primera tabla mientras que la segunda permanece fija.
  |
<table width="50%"> |
Esto es la leyenda
| Casilla 1 |
Casilla 2 |
| Casilla 3 |
Casilla 4 |
|
| |
<table width="200px"> |
Esto es la leyenda
| Casilla 1 |
Casilla 2 |
| Casilla 3 |
Casilla 4 |
|
Volver al índice
El atributo border
El atributo border establece el grosor del
borde de la tabla. El valor se interpreta en píxeles y no admite unidades. Si
el valor es 0 o el atributo no está presente, los navegadores no dibujan ni
el borde exterior de la tabla ni los bordes interiores de las celdas.
| |
<table border="10"> |
Esto es la leyenda
| Casilla 1 |
Casilla 2 |
| Casilla 3 |
Casilla 4 |
|
| |
<table border="0"> |
Esto es la leyenda
| Casilla 1 |
Casilla 2 |
| Casilla 3 |
Casilla 4 |
|
| |
<table> |
Esto es la leyenda
| Casilla 1 |
Casilla 2 |
| Casilla 3 |
Casilla 4 |
|
Si incorrectamente se escribe una unidad en el atributo border, los navegadores muestran el borde mínimo,
aunque el validador del W3C no lo considera inválido.
| |
<table border="4cm">
<!-- El borde no se va a ver de 4 cm --> |
Esto es la leyenda
| Casilla 1 |
Casilla 2 |
| Casilla 3 |
Casilla 4 |
|
Volver al índice
El atributo frame
El atributo frame establece qué lados del
borde exterior de la tabla son visibles. Los valores posibles son void (sin borde), above (borde superior), below (borde inferior), hside (bordes horizontales) , lhs (borde izquierdo), rhs (borde derecho), vsides (bordes verticales), box (los cuatro bordes) y border (los cuatro bordes).
| |
<table border="10"> |
Esto es la leyenda
| Casilla 1 |
Casilla 2 |
| Casilla 3 |
Casilla 4 |
|
| |
<table frame="void" border="10"> |
Esto es la leyenda
| Casilla 1 |
Casilla 2 |
| Casilla 3 |
Casilla 4 |
|
| |
<table frame="above" border="10"> |
Esto es la leyenda
| Casilla 1 |
Casilla 2 |
| Casilla 3 |
Casilla 4 |
|
| |
<table frame="below" border="10"> |
Esto es la leyenda
| Casilla 1 |
Casilla 2 |
| Casilla 3 |
Casilla 4 |
|
| |
<table frame="hsides" border="10"> |
Esto es la leyenda
| Casilla 1 |
Casilla 2 |
| Casilla 3 |
Casilla 4 |
|
| |
<table frame="lhs" border="10"> |
Esto es la leyenda
| Casilla 1 |
Casilla 2 |
| Casilla 3 |
Casilla 4 |
|
| |
<table frame="rhs" border="10"> |
Esto es la leyenda
| Casilla 1 |
Casilla 2 |
| Casilla 3 |
Casilla 4 |
|
| |
<table frame="vsides" border="10"> |
Esto es la leyenda
| Casilla 1 |
Casilla 2 |
| Casilla 3 |
Casilla 4 |
|
| |
<table frame="box" border="10"> |
Esto es la leyenda
| Casilla 1 |
Casilla 2 |
| Casilla 3 |
Casilla 4 |
|
| |
<table frame="border" border="10"> |
Esto es la leyenda
| Casilla 1 |
Casilla 2 |
| Casilla 3 |
Casilla 4 |
|
Volver al índice
El atributo rules
El atributo rules establece qué lados de
los bordes interiores de la tabla son visibles. Los valores posibles son
none (ningún borde), groups (los bordes de los <tbody> y de los <colgroup>), rows (los bordes de cada fila), cols (los bordes de cada columna) y all (todos los bordes).
| |
<table rules="none" border="1"> |
Esto es la leyenda
| Casilla 1 |
Casilla 2 |
| Casilla 3 |
Casilla 4 |
|
| |
<table rules="groups" border="10"> |
Esto es la leyenda
| tbody 1 - Casilla 1 |
Casilla 2 |
| tbody 2 - Casilla 1 |
Casilla 2 |
| Casilla 3 |
Casilla 4 |
| tbody 3 - Casilla 1 |
Casilla 2 |
|
| |
<table rules="rows" border="10"> |
Esto es la leyenda
| Casilla 1 |
Casilla 2 |
| Casilla 3 |
Casilla 4 |
|
| |
<table rules="cols" border="10"> |
Esto es la leyenda
| Casilla 1 |
Casilla 2 |
| Casilla 3 |
Casilla 4 |
|
| |
<table rules="all" border="10"> |
Esto es la leyenda
| Casilla 1 |
Casilla 2 |
| Casilla 3 |
Casilla 4 |
|
Volver al índice
El atributo cellspacing
El atributo cellspacing establece la
separación entre casillas y entre las casillas y el borde (como si fuera un
margen de los <td>). El valor se
interpreta en píxeles, por lo que no deben escribirse unidades. También se
pueden escribir porcentajes, aunque tanto Firefox como Internet Explorer lo
muestran como si fueran píxeles.
Volver al índice
El atributo cellpadding
El atributo cellpadding establece la
separación entre el borde las casillas y el contenido (como si fuera un
padding de los <td>). El valor se
interpreta en píxeles, por lo que no deben escribirse unidades. También se
pueden escribir porcentajes, aunque tanto Firefox como Internet Explorer lo
muestran como si fueran píxeles.
Internet Explorer aplica también el atributo cellpadding a la leyenda, mientras que Firefox
no.
Volver al índice
Atributos de <tbody>,
<thead> y <tfoot>
El atributo valign
El atributo valign establece la alineación
vertical en todas las casillas del <tbody>. Los valores posibles son top (arriba), middle (centrado), bottom (abajo) y baseline (línea base).
Tanto Firefox como Internet Explorer centran verticalmente el contenido si
el atributo valign no está definido.
| |
<tbody> |
Esto es la leyenda
| Casilla 1 con varias líneas de texto para que se pueda
observar la alineación vertical empleada |
Casilla2 |
|
| |
<tbody valign="top"> |
Esto es la leyenda
| Casilla 1 con varias líneas de texto para que se pueda
observar la alineación vertical empleada |
Casilla2 |
|
| |
<tbody valign="middle"> |
Esto es la leyenda
| Casilla 1 con varias líneas de texto para que se pueda
observar la alineación vertical empleada |
Casilla2 |
|
| |
<tbody valign="bottom"> |
Esto es la leyenda
| Casilla 1 con varias líneas de texto para que se pueda
observar la alineación vertical empleada |
Casilla2 |
|
| |
<tbody valign="baseline"> |
Esto es la leyenda
| Casilla 1 con varias líneas de texto para que se pueda
observar la alineación vertical empleada |
Casilla2 |
|
La diferencia entre top y baseline es que top alinea la parte superior de la primera
línea de texto y baseline alinea la
línea base de la primera línea de texto.
| |
<tbody valign="top"> |
Esto es la leyenda
| Casilla 1 con varias
líneas de texto para que se pueda observar la alineación
vertical empleada |
Casilla2 |
|
| |
<tbody valign="baseline"> |
Esto es la leyenda
| Casilla 1 con varias
líneas de texto para que se pueda observar la alineación
vertical empleada |
Casilla2 |
|
Los atributos align y char
El atributo align establece la alineación
horizontal en todas las casillas del <tbody>. Los valores posibles son left (izquierda), center (centrado), right (derecha), justify (justificado) y char (alineación en carácter).
| |
<tbody align="left"> |
Esto es la leyenda
| Casilla 1 con varias líneas de texto para que se pueda
observar la alineación horizontal empleada |
| Casilla 2 |
|
| |
<tbody align="center"> |
Esto es la leyenda
| Casilla 1 con varias líneas de texto para que se pueda
observar la alineación horizontal empleada |
| Casilla 2 |
|
| |
<tbody align="right"> |
Esto es la leyenda
| Casilla 1 con varias líneas de texto para que se pueda
observar la alineación horizontal empleada |
| Casilla 2 |
|
| |
<tbody align="justify"> |
Esto es la leyenda
| Casilla 1 con varias líneas de texto para que se pueda
observar la alineación horizontal empleada |
| Casilla 2 |
|
Los atributos char y align de <tbody> deberían permitir alinear los valores
de una columna a un carácter. El atributo align con el valor char establecen que la alineación es en un
carácter determinado y el valor del atributo char establece el carácter por el cual se alinean
las casillas.
En el primer ejemplo siguiente, las comas deberían estar en la misma
vertical. En el segundo ejemplo, las a deberían estar en la misma vertical.
Pero ni Firefox ni Internet Explorer lo hacen.
El bug 2.212 de Firefox
está dedicado a este problema.
Volver al índice
Atributos de <tr>
Los atributos align,
char y valign
Los atributos se comportan como con las demás etiquetas (por ejemplo,
<table> o <tbody>), ya comentadas en esta misma
página.
Volver al índice
Atributos de <td>
Los atributos colspan y
rowspan
Los atributos colspan y rowspan permiten unir una celda con las celdas
contiguas, tanto horizontal como verticalmente. Su uso está explicado en otra página.
Los atributos align,
char y valign
Los atributos se comportan como con las demás etiquetas (por ejemplo,
<table> o <tbody>), ya comentadas en esta misma
página.
Los atributos axis, headers y scope
Por escribir
Volver al índice
Atributos de <col
/>
El atributo span
El atributo span permite que una etiqueta
<col /> haga referencia a varias columnas
seguidas. El valor del atributo span indica el
número de columnas al hace referencia la etiqueta <col />.
| |
HTML: <col span ="2" />
CSS: col { background-color: lightblue; } |
Esto es la leyenda
| Casilla 1 |
Casilla 2 |
Casilla 3 |
| Casilla 4 |
Casilla 5 |
Casilla 6 |
|
Los atributos align, valign y width
Los atributos align, valign y width se
comportan como en las demás etiquetas (por ejemplo, <table> o <tbody>), ya comentadas en esta misma
página.
Volver al índice
Atributos de <colgroup>
El atributo span
Para indicar el número de columnas que forman parte de un grupo de
columnas, se pueden utilizar etiquetas <col
/> (con o sin atributo span) o el
atributo span de <colgroup>. Si se utiliza el atributo span, su valor indica el número de columnas que
forman parte del grupo de columnas.
| |
HTML: <colgroup span="2"></colgroup>
CSS: colgroup { background-color: lightgrey; }
col { background-color: lightblue; } |
Esto es la leyenda
| Casilla 1 |
Casilla 2 |
Casilla 3 |
| Casilla 4 |
Casilla 5 |
Casilla 6 |
|
| |
HTML: <colgroup><col /><col
/></colgroup>
CSS: colgroup { background-color: lightgrey; }
col { background-color: lightblue; } |
Esto es la leyenda
| Casilla 1 |
Casilla 2 |
Casilla 3 |
| Casilla 4 |
Casilla 5 |
Casilla 6 |
|
| |
HTML: <colgroup><col span="2"
/></colgroup>
CSS: colgroup { background-color: lightgrey; }
col { background-color: lightblue; } |
Esto es la leyenda
| Casilla 1 |
Casilla 2 |
Casilla 3 |
| Casilla 4 |
Casilla 5 |
Casilla 6 |
|
Si no coincide el valor del atributo span
con las etiquetas <col />, tanto Internet
Explorer como Firefox hacen caso de las etiquetas <col />.
| |
HTML: <colgroup span="2"><col
/></colgroup>
CSS: colgroup { background-color: lightgrey; }
col { background-color: lightblue; } |
Esto es la leyenda
| Casilla 1 |
Casilla 2 |
Casilla 3 |
| Casilla 4 |
Casilla 5 |
Casilla 6 |
|
Los atributos align,
valign y width
Los atributos align, valign y width se
comportan como en las demás etiquetas (por ejemplo, <table> o <tbody>), ya comentadas en esta misma página.
El atributo width indica la anchura de cada
columna del grupo.
Volver al índice
Autor: Bartolomé Sintes Marco
Última modificación: 30 de mayo de 2007
