Atributos de tablas

En esta página se tratan los siguientes temas:

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
Celda 1	Celda 2
Celda 3	Celda 4

<table width="200px">

Esto es la leyenda
Celda 1	Celda 2
Celda 3	Celda 4

Volver al principio de la página

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="1">

Esto es la leyenda
Celda 1	Celda 2
Celda 3	Celda 4

<table border="10">

Esto es la leyenda
Celda 1	Celda 2
Celda 3	Celda 4

<table border="0">

Esto es la leyenda
Celda 1	Celda 2
Celda 3	Celda 4

<table>

Esto es la leyenda
Celda 1	Celda 2
Celda 3	Celda 4

Si incorrectamente se escribe una unidad en el atributo border (px, em, cm, etc.), los navegadores muestran el borde mínimo, aunque el validador del W3C no lo considera inválido.

Nota: No tengo un ejemplo de este caso porque Amaya borra la unidad del atributo al editar la página.

Si en la hoja de estilo se establece un borde para un elemento de la tabla, este borde se muestra aunque el atributo border sea cero.

<table border="0">

Esto es la leyenda
Celda 1	Celda 2
Celda 3	Celda 4

table {
  border: red 5px solid;
}

Volver al principio de la página

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
Celda 1	Celda 2
Celda 3	Celda 4

<table frame="void" border="10">

Esto es la leyenda
Celda 1	Celda 2
Celda 3	Celda 4

<table frame="above" border="10">

Esto es la leyenda
Celda 1	Celda 2
Celda 3	Celda 4

<table frame="below" border="10">

Esto es la leyenda
Celda 1	Celda 2
Celda 3	Celda 4

<table frame="hsides" border="10">

Esto es la leyenda
Celda 1	Celda 2
Celda 3	Celda 4

<table frame="lhs" border="10">

Esto es la leyenda
Celda 1	Celda 2
Celda 3	Celda 4

<table frame="rhs" border="10">

Esto es la leyenda
Celda 1	Celda 2
Celda 3	Celda 4

<table frame="vsides" border="10">

Esto es la leyenda
Celda 1	Celda 2
Celda 3	Celda 4

<table frame="box" border="10">

Esto es la leyenda
Celda 1	Celda 2
Celda 3	Celda 4

<table frame="border" border="10">

Esto es la leyenda
Celda 1	Celda 2
Celda 3	Celda 4

Nota: Chrome muestra el borde definido por el atributo frame, pero no le da el grosor definido por el atributo border.

Nota: Cuando no se muestra un borde de la tabla, Internet Explorer 8 muestra el borde de las celdas contiguas al borde, pero Internet Explorer 7 no lo hacía, como se comenta en la página de diferencias entre IE8 e IE7.

Volver al principio de la página

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), all (todos los bordes), rows (los bordes de cada fila), cols (los bordes de cada columna) y groups (los bordes de los <tbody> y de los <colgroup>). Cuando se establece el atributo rules, los navegadores muestran la tabla en el modo de bordes colapsado.

El ejemplo siguiente contienen dos tablas, una con fondo blanco y otra con fondo rojo para que se vea más claramente las líneas en Internet Explorer.

<table rules="none" border="1">

Esto es la leyenda
Celda A1	Celda A2
Celda B1	Celda B2

Esto es la leyenda
Celda A1	Celda A2
Celda B1	Celda B2

<table rules="all" border="1">

Esto es la leyenda
Celda A1	Celda A2
Celda B1	Celda B2

Esto es la leyenda
Celda A1	Celda A2
Celda B1	Celda B2

<table rules="rows" border="1">

Esto es la leyenda
Celda A1	Celda A2
Celda B1	Celda B2

Esto es la leyenda
Celda A1	Celda A2
Celda B1	Celda B2

<table rules="cols" border="1">

Esto es la leyenda
Celda A1	Celda A2
Celda B1	Celda B2

Esto es la leyenda
Celda A1	Celda A2
Celda B1	Celda B2

<table rules="groups" border="1">

Esta tabla tiene tres tbody
tbody 1 - Celda A1	Celda A2
tbody 2 - Celda B1	Celda B2
Celda C1	Celda C2
tbody 3 - Celda D1	Celda D2

Esta tabla tiene tres tbody
tbody 1 - Celda A1	Celda A2
tbody 2 - Celda B1	Celda B2
Celda C1	Celda C2
tbody 3 - Celda D1	Celda D2

<table rules="groups" border="1">

Esta tabla tiene dos colgroup
Celda A1	Celda A2	Celda A3
Celda B1	Celda B2	Celda B3

Esta tabla tiene dos colgroup
Celda A1	Celda A2	Celda A3
Celda B1	Celda B2	Celda B3

<table rules="groups" border="1">

Esta tabla tiene tres tbody y dos colgroup
tbody 1 - Celda A1	Celda A2	Celda A3
tbody 2 - Celda B1	Celda B2	Celda B3
Celda C1	Celda C2	Celda C3
tbody 3 - Celda D1	Celda D2	Celda D3

Esta tabla tiene tres tbody y dos colgroup
tbody 1 - Celda A1	Celda A2	Celda A3
tbody 2 - Celda B1	Celda B2	Celda B3
Celda C1	Celda C2	Celda C3
tbody 3 - Celda D1	Celda D2	Celda D3

Nota: Si está establecido el atributo rules, en Internet Explorer 8 las tablas se ven en modo colapsado, pero en Internet Explorer 7 se veían en modo separado, como se comenta en la página de diferencias entre IE8 e IE7.

Nota: En Internet Explorer 8, el atributo rules no se aplica si el modo de bordes es el modo separado (border-collapse: separate), pero en Internet Explorer 7 sí que se aplicaba, como se comenta en la página de diferencias entre IE8 e IE7.

Volver al principio de la página

El atributo cellspacing

El atributo cellspacing establece la separación entre celdas y entre las celdas y el borde (como si fuera un margin de los <td>). El valor se interpreta en píxeles, por lo que no deben escribirse unidades. También se pueden escribir porcentajes, aunque los navegadores lo muestran como si fueran píxeles.

<table cellspacing="10">

Esto es la leyenda
Celda 1	Celda 2
Celda 3	Celda 4

<table cellspacing="10%">

Esto es la leyenda
Celda 1	Celda 2
Celda 3	Celda 4

Nota: Internet Explorer 8 ya no aplica el atributo cellspacing a la leyenda cuando se aplica a la tabla, mientras que Internet Explorer 7 sí que lo hacía, como se comenta en la página de diferencias entre IE8 e IE7.

Volver al principio de la página

El atributo cellpadding

El atributo cellpadding establece la separación entre el borde las celdas 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 los navegadores lo muestran como si fueran píxeles.

<table cellpadding="10">

Esto es la leyenda
Celda 1	Celda 2
Celda 3	Celda 4

<table cellpadding="10%">

Esto es la leyenda
Celda 1	Celda 2
Celda 3	Celda 4

Nota: Internet Explorer 8 ya no aplica el atributo cellpadding a la leyenda cuando se aplica a la tabla, mientras que Internet Explorer 7 sí que lo hacía, como se comenta en la página de diferencias entre IE8 e IE7.

Volver al principio de la página

Atributos de <tbody>, <thead> y <tfoot>

El atributo valign

El atributo valign establece la alineación vertical en todas las celdas del <tbody>. Los valores posibles son top (arriba), middle (centrado), bottom (abajo) y baseline (línea base).

Si el atributo valign no está definido, los navegadores centran verticalmente el contenido.

<tbody>

Esto es la leyenda
Celda 1 con varias líneas de texto para que se pueda observar la alineación vertical empleada	Celda2

<tbody valign="top">

Esto es la leyenda
Celda 1 con varias líneas de texto para que se pueda observar la alineación vertical empleada	Celda2

<tbody valign="middle">

Esto es la leyenda
Celda 1 con varias líneas de texto para que se pueda observar la alineación vertical empleada	Celda2

<tbody valign="bottom">

Esto es la leyenda
Celda 1 con varias líneas de texto para que se pueda observar la alineación vertical empleada	Celda2

<tbody valign="baseline">

Esto es la leyenda
Celda 1 con varias líneas de texto para que se pueda observar la alineación vertical empleada	Celda2

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
Celda 1 con varias líneas de texto para que se pueda observar la alineación vertical empleada	Celda2

<tbody valign="baseline">

Esto es la leyenda
Celda 1 con varias líneas de texto para que se pueda observar la alineación vertical empleada	Celda2

Los atributos align y char

El atributo align establece la alineación horizontal en todas las celdas 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
Celda 1 con varias líneas de texto para que se pueda observar la alineación horizontal empleada
Celda 2

<tbody align="center">

Esto es la leyenda
Celda 1 con varias líneas de texto para que se pueda observar la alineación horizontal empleada
Celda 2

<tbody align="right">

Esto es la leyenda
Celda 1 con varias líneas de texto para que se pueda observar la alineación horizontal empleada
Celda 2

<tbody align="justify">

Esto es la leyenda
Celda 1 con varias líneas de texto para que se pueda observar la alineación horizontal empleada
Celda 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 celdas.

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 los navegadores no 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, como se comenta en la página de bugs de Firefox.

Volver al principio de la página

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 principio de la página

Atributos de <td> y <th>

Los atributos colspan y rowspan

Los atributos colspan y rowspan permiten unir una celda con las celdas contiguas, tanto horizontal como verticalmente. El valor de colspan indica la cantidad de celdas unidas en horizontal y el valor de rowspan indica la cantidad de celdas unidas en vertical.

<table border="1">
  <caption>Esto es una tabla</caption>
  <tbody>
    <tr>
      <td colspan="2">celdas a1 y b1 unidas</td>
    </tr>
    <tr>
      <td>celda a2</td>
      <td>celda b2</td>
    </tr>
  </tbody>
</table>

Esto es una tabla
celdas a1 y b1 unidas
celda a2	celda b2

<table border="1">
  <caption>Esto es una tabla</caption>
  <tbody>
    <tr>
      <td rowspan="2">celdas a1 y a2 unidas</td>
      <td>celda b1</td>
    </tr>
    <tr>
      <td>celda b2</td>
    </tr>
  </tbody>
</table>

Esto es una tabla
celdas a1 y a2 unidas	celda b1
	celda b2

<table border="1">
  <caption>Esto es una tabla</caption>
  <tbody>
    <tr>
      <td rowspan="2" colspan="2">celdas a1, a2, b1 y b2 unidas</td>
      <td>celda c1</td>
   </tr>
   <tr>
     <td>celda c2</td>
   </tr>
   <tr>
     <td>celda a3</td>
     <td>celda b3</td>
     <td>celda c3</td>
   </tr>
  </tbody>
</table>

Esto es una tabla
celdas a1, a2, b1 y b2 unidas		celda c1
celdas a1, a2, b1 y b2 unidas		celda c2
celda a3	celda b3	celda c3

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 principio de la página

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

<table border="1">
  <caption>Esto es la leyenda</caption>
  <col span="2" />
  <tbody>
    <tr>
      <td>Celda 1</td>
      <td>Celda 2</td>
      <td>Celda 3</td>
    </tr>
    <tr>
      <td>Celda 4</td>
      <td>Celda 5</td>
      <td>Celda 6</td>
    </tr>
  </tbody>
</table>

Esto es la leyenda
Celda 1	Celda 2	Celda 3
Celda 4	Celda 5	Celda 6

col { 
  background-color: lightblue; 
}

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 principio de la página

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.

<table border="1" rules="groups">
  <caption>Esto es la leyenda</caption>
  <colgroup span="2"> </colgroup>
  <tbody>
  ...

Esto es la leyenda
Celda 1	Celda 2	Celda 3
Celda 4	Celda 5	Celda 6

colgroup { 
  background-color: lightgrey; 
}
col { 
  background-color: lightblue; 
}

<table border="1" rules="groups">
  <caption>Esto es la leyenda</caption>
  <colgroup><col /><col /></colgroup>
  <tbody>
  ...

Esto es la leyenda
Celda 1	Celda 2	Celda 3
Celda 4	Celda 5	Celda 6

colgroup { 
  background-color: lightgrey; 
}
col { 
  background-color: lightblue; 
}

<table border="1" rules="groups">
  <caption>Esto es la leyenda</caption>
  <colgroup><col span="2" /></colgroup>
  <tbody>
  ...

Esto es la leyenda
Celda 1	Celda 2	Celda 3
Celda 4	Celda 5	Celda 6

colgroup { 
  background-color: lightgrey; 
}
col { 
  background-color: lightblue; 
}

Si no coincide el valor del atributo span con las etiquetas <col />, los navegadores hacen caso de las etiquetas <col />.

<table border="1" rules="groups">
  <caption>Esto es la leyenda</caption>
  <colgroup span="2"><col /></colgroup>
  <tbody>
  ...

Esto es la leyenda
Celda 1	Celda 2	Celda 3
Celda 4	Celda 5	Celda 6

colgroup { 
  background-color: lightgrey; 
}
col { 
  background-color: lightblue; 
}

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 principio de la página

Esta página forma parte del curso "Páginas web HTML / XHTML y hojas de estilo CSS" disponible en http://www.mclibre.org
Autor: Bartolomé Sintes Marco
Última modificación: 22 de diciembre de 2011

Esta obra está bajo una licencia de Creative Commons Reconocimiento-CompartirIgual 3.0 España.