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

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 Mozilla 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 Mozilla como Internet Explorer lo muestran como si fueran píxeles.

Internet Explorer aplica también el atributo cellpadding a la leyenda, mientras que Mozilla 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 Mozilla 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 Mozilla Firefox ni Internet Explorer lo hacen.

El bug 2.212 de Mozilla 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 /> o el atributo span de <colgroup>. etiquetas El valor del atributo span indica el número de columnas que forman parte del grupo de columnas. Si no coincide el valor del atributo span con las etiquetas <col />, tanto Internet Explorer como Mozilla Firefox hacen caso de las etiquetas <col />.

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