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

<table border="1">

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

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

td {
  border: black 2px dashed;
}

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

Cuando no se muestra un borde de la tabla, Internet Explorer no muestra el borde de las celdas contiguas al borde, pero Firefox sí.

<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

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), 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>).

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

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

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

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

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

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

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

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

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

Esta tabla tiene tres tbody
tbody 1 - Celda 1	Celda 2
tbody 2 - Celda 1	Celda 2
Celda 3	Celda 4
tbody 3 - Celda 1	Celda 2

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

Esta tabla tiene dos colgroup
Celda 1	Celda 2	Celda 1
Celda 3	Celda 4	Celda 2

En Firefox, cuando el modo de bordes no está establecido las tablas se ven en modo de bordes separado, pero si está el atributo rules las tablas se ven en modo colapsado. Pero en Internet Explorer, aunque esté el atributo rules las tablas se ven en modo separado.

Nota: En este caso no sé cuál de los dos no hace las cosas correctamente, porque aunque Firefox suele seguir mejor las normas, Firefox tiene bugs relacionados con los modos de bordes de las tablas.

En Firefox, el atributo rules no se aplica si el modo de bordes es el modo separado (border-collapse: separate), pero en Internet Explorer sí.

HTML: <table rules="cols" border="1">
CSS:  table { border-collapse: separate; }

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

Volver al índice

El atributo cellspacing

El atributo cellspacing establece la separación entre celdas y entre las celdas 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.

Internet Explorer aplica también el atributo cellspacing a la leyenda, mientras que Firefox no.

<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

Volver al índice

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

<table cellpadding="10%">

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

Volver al índice

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

Tanto Firefox como Internet Explorer centran verticalmente el contenido si el atributo valign no está definido.

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

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

<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 />, tanto Internet Explorer como Firefox 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 índice

Autor: Bartolomé Sintes Marco
Última modificación: 17 de diciembre de 2008