# 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.

| <table cellspacing="10"> |
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
| <table cellspacing="10%"> |
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4

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.

| <table cellpadding="10"> |
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
| <table cellpadding="10%"> |
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4

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.

| <tbody align="char" char="a"> |
Esto es la leyenda
100,3 | abbbbbbbb
3,124 | bbbbbab
2456,4567 | bbbbbba
| <tbody align="char" char=","> |
Esto es la leyenda
100,3 | abbbbbbbb
3,124 | bbbbbab
2456,4567 | bbbbbba

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