Home

      Comment post English
x

Select your language

EnglishEspañol

Curso de HTML - Segunda parte

Quick Facts:

2 people like this


<< VIENE DE CURSO DE HTML - PRIMERA PARTE

TABLAS HTML

Otro elemento muy utilizado en el diseño de páginas Web son las tablas. En HTML las tablas se definen en filas horizontales y columnas verticales. Para crear una tabla se requieren por lo menos tres etiquetas, la etiqueta <table> que define la tabla, <tr> para definir filas horizontales y <td> para definir las celdas de cada fila.

Por ejemplo:

Fila 1, Celda 1
Fila 1, Celda 2
Fila 2, Celda 1
Fila 2, Celda 2
Fila 3, Celda 1
Fila 3, Celda 2
Fila 4, Celda 1 Fila 4, Celda 2
Fila 5, Celda 1 Fila 5, Celda 2

Para crear la tabla anterior primero debemos definir la tabla con la etiqueta <table>, luego la primera fila con la etiqueta <tr>, seguido de las celdas 1 y 2 de la primera fila con la etiqueta <td>, continuamos con la segunda fila usando otra etiqueta <tr>, luego las dos celdas de la segunda fila con etiquetas <td> y finalmente la tercera, cuarta y quinta fila y sus celdas con las etiquetas <tr> y <td> respectivamente. Todo esto debe hacerse en orden y respetando etiquetas de apertura y cierre de cada etiqueta, o sea que al terminar las filas debemos cerrarlas con </tr> y al terminar cada celda cerramos con </td>.

Veamos el código fuente necesario para crear la tabla del ejemplo anterior:

<html>
<head>

<title>Ejemplo de tabla</title>
</head>

<body>

<table border="1">
<tr>

     
<td>Fila 1, Celda 1</td><td>Fila 1, Celda 2</td>
</tr>

<tr>
     
<td>Fila 2, Celda 1</td><td>Fila 2, Celda 2</td>
</tr>
<tr>
     
<td>Fila 3, Celda 1</td><td>Fila 3, Celda 2</td>
</tr>
<tr>
     
<td>Fila 4, Celda 1</td><td>Fila 4, Celda 2</td>
</tr>
<tr>
     
<td>Fila 5, Celda 1</td><td>Fila 5, Celda 2</td>
</tr>

</table>

</body>
</html>

Como se ve en el código fuente anterior, primero debemos definir dónde comienza la tabla con la etiqueta <table>. Luego definimos en orden cada fila con la etiqueta <tr> y dentro de cada fila las celdas correspondientes con <td>. Recordemos que hay que cerrar cada celda con </td> y cada fila con </tr>. El contenido de cada celda debe estar incluido entre las etiquetas de apertura y cierre <td>. Todo debe estar colocado en el orden de aparición que deseamos lograr. Hay que tener mucho cuidado de colocar las etiquetas de celdas y filas correctamente; si alguna se llega a encontrar en una posición incorrecta pueden obtenerse resultados indeseados en el diseño de la página Web con la que estamos trabajando. Finalmente donde termina la tabla cerramos con la etiqueta de cierre </table>.

En el código fuente anterior, dentro de la etiqueta <table> también incluimos un atributo llamado border, el cual define el ancho del borde de la tabla. Por omisión si no incluimos ese atributo la tabla tendrá un borde invisible o de 0 pixeles. En el caso anterior la tabla tiene un borde de 1 pixel. El número del atributo border indica el ancho del borde en pixeles, o sea que cuanto más grande sea el número indicado dentro de border, más ancho será el borde de la tabla en pixeles
.

Otro atributo opcional de la etiqueta <table> es cellpadding el cual sirve para indicar en pixeles el margen interno que tendrán las celdas de la tabla; cuanto más grande sea el número más alejado estará el contenido de las celdas de los bordes de las mismas. Por ejemplo cellpadding="10" indica que las celdas tendrán un margen interno de 10 pixeles.

También hay otro atributo de <table> llamado cellspacing el cual sirve para definir el espaciado entre celdas en pixeles, o sea que los bordes de las celdas tendrán un espacio vacío interno. Este atributo no afecta el borde externo de la tabla.

El atributo width es muy importante ya que define el ancho que tendrá la tabla. Por ejemplo si queremos que ésta ocupe cierto espacio del ancho de la página es conveniente indicarle un ancho que puede ser en pixeles o porcentaje del ancho de la página. Por ejemplo si dentro de la etiqueta <table> indicamos width="500" la tabla tendrá un ancho de 500 pixeles. Por otro lado si preferimos usar porcentajes e indicamos width="50%" la tabla tendrá un ancho del 50% de la página que la contiene. En casos que querramos que la tabla ocupe el mismo ancho en todo tipo de resoluciones de pantalla, es conveniente indicar el ancho de tabla en porcentaje en lugar de pixeles, ya que por ejemplo una tabla de 1000 pixeles de ancho en una pantalla de 1024 pixeles de ancho ocupará más espacio que en una pantalla de 1280 pixeles de ancho; sin embargo si indicamos para ésta un ancho de por ejemplo un 80%, la misma ocupará el mismo espacio en todo tipo de resoluciones, convirtiendo así a nuestro diseño en compatible para todo tipo de pantalla.

También podemos especificar el ancho de cada celda agregando el atributo width en las etiquetas <td>. Vale aclarar que si indicamos el ancho en pixeles en todas las celdas y también en la tabla, la sumatoria del ancho de las celdas debe tener el mismo valor que el ancho de la tabla para evitar resultados no deseados en el diseño final de la página. Igualmente se recomienda utilizar porcentaje en el ancho de las celdas; ya que el porcentaje será a razón del ancho total de la tabla y no de la página en que esté contenida la tabla. Así por ejemplo si una tabla está dentro de una página e indicamos un ancho de 50%, la tabla tendrá un ancho del 50% de la página, mientras que si indicamos para una celda de la tabla un ancho del 20%, la celda ocupará el 20% del ancho de la tabla; así si tenemos una tabla con 5 celdas por fila de 20% de ancho cada una, la suma total de las mismas dará un 100% del ancho de la tabla.

Veamos algunos ejemplos:

<html>
<head>

<title>Ejemplo de tabla</title>
</head>

<body>
<h4>Tabla 1</h4>
<table border="1" cellpadding="10" cellspacing="5" width="50%">
<tr>

     
<td width="50%">Fila 1, Celda 1</td><td width="50%">Fila 1, Celda 2</td>
</tr>

<tr>
     
<td width="50%">Fila 2, Celda 1</td><td width="50%">Fila 2, Celda 2</td>
</tr>
</table>

<br />

<h4>Tabla 2</h4>
<table border="5" cellpadding="5" cellspacing="0" width="50%">
<tr>

     
<td width="50%">Fila 1, Celda 1</td><td width="50%">Fila 1, Celda 2</td>
</tr>

<tr>
     
<td width="50%">Fila 2, Celda 1</td><td width="50%">Fila 2, Celda 2</td>
</tr>
</table>

<br />

<h4>Tabla 3</h4>
<table border="20" cellpadding="20" cellspacing="5" width="100%">
<tr>

     
<td width="50%">Fila 1, Celda 1</td><td width="50%">Fila 1, Celda 2</td>
</tr>

<tr>
     
<td width="50%">Fila 2, Celda 1</td><td width="50%">Fila 2, Celda 2</td>
</tr>
</table>

<br />

<h4>Tabla 4</h4>
<table border="0" cellpadding="5" cellspacing="0" width="50%">
<tr>

     
<td width="50%">Fila 1, Celda 1</td><td width="50%">Fila 1, Celda 2</td>
</tr>

<tr>
     
<td width="50%">Fila 2, Celda 1</td><td width="50%">Fila 2, Celda 2</td>
</tr>
</table>

<br />

<h4>Tabla 5</h4>
<table border="1" cellpadding="5" cellspacing="0" width="50%">
<tr>

     
<td width="50%">Fila 1, Celda 1</td><td width="50%">Fila 1, Celda 2</td>
</tr>

<tr>
     
<td width="50%">Fila 2, Celda 1</td><td width="50%">Fila 2, Celda 2</td>
</tr>
</table>

</body>
</html>

Este sería el resultado del código fuente anterior:

Tabla 1

 

Fila 1, Celda 1 Fila 1, Celda 2
Fila 2, Celda 1 Fila 2, Celda 2

 

Tabla 2

Fila 1, Celda 1 Fila 1, Celda 2
Fila 2, Celda 1 Fila 2, Celda 2


Tabla 3

Fila 1, Celda 1 Fila 1, Celda 2
Fila 2, Celda 1 Fila 2, Celda 2


Tabla 4

Fila 1, Celda 1 Fila 1, Celda 2
Fila 2, Celda 1 Fila 2, Celda 2

Tabla 5

 

Fila 1, Celda 1 Fila 1, Celda 2
Fila 2, Celda 1 Fila 2, Celda 2


-------------------------------------------------------------------------------------------

CELDAS DE TITULO

Existe una etiqueta que se comporta de la misma manera que la etiqueta de celdas <td>, se trata de <th>. Funciona de manera muy parecida a <td> como una celda más, con la diferencia de que el texto incluido en <th> aparece en negrita y centrado, ya que se trata de una celda de título.

Veamos un ejemplo:

<html>
<head>

<title>Ejemplo de tabla</title>
</head>

<body>

<table border="1" cellpadding="0" cellspacing="0" width="50%">
<tr>

     
<th width="50%">Columna 1</th><th width="50%">Columna 2</th>
</tr>

<tr>
     
<td width="50%">Fila 1, Celda 1</td><td width="50%">Fila 1, Celda 2</td>
</tr>

</table>

</body>
</html>

Esto se vería así:

Columna 1 Columna 2
Fila 1, Celda 1 Fila 1, Celda 2


TÍTULO DE TABLA

También se puede incluir un título para la tabla con la etiqueta <caption>, el cual aparece por omisión en la parte de arriba y afuera de la tabla, y de manera centrada. La etiqueta <caption> debe ir inmediatamente después de la etiqueta <table> y antes de la primera etiqueta <tr>, esto debe ser respetado para obtener resultados correctos.

Veamos un ejemplo:

<html>
<head>

<title>Ejemplo de tabla</title>
</head>

<body>

<table border="1" cellpadding="0" cellspacing="0" width="50%">
<caption>
Título de la tabla</caption>
<tr>
     
<td width="50%">Fila 1, Celda 1</td><td width="50%">Fila 1, Celda 2</td>
</tr>

<tr>
     
<td width="50%">Fila 2, Celda 1</td><td width="50%">Fila 2, Celda 2</td>
</tr>

</table>

</body>
</html>

Esto se vería así:
 

Título de la tabla
Fila 1, Celda 1 Fila 1, Celda 2
Fila 2, Celda 1 Fila 2, Celda 2

CONFIGURANDO VARIAS CELDAS A LA VEZ

Hay una etiqueta que nos permite ahorrar trabajo cuando queremos agregar propiedades a varias celdas en tablas extensas. Por ejemplo supongamos que tenemos una tabla de ancho 100%, de 5 columnas por 4 filas, con un total de 20 celdas y si queremos que cada celda tenga un ancho de 20%, en lugar de agregar el atributo width en cada celda, podemos utilizar la etiqueta <colgroup> que nos permite agrupar celdas en columnas y agregar todos los atributos que querramos, los cuales serán aplicados a todas las celdas de la columna que el grupo correspondiente representa.

La etiqueta <colgroup> debe ir inmediatamente luego de la etiqueta <table> y antes de la primera etiqueta <tr>. El atributo span es el que define cuántas columnas agrupa cada etiqueta <colgroup> además del atributo span esta etiqueta debe incluir los atributos que se aplicarán en las celdas de la/s columna/s que el grupo representa. Se pueden tener mas de un grupo de columnas en una tabla y éstas deben estar ubicadas una después de la otra y además deben incluir etiqueta de cierre; entre la etiqueta de apertura y cierre no hace falta incluir nada, todo va en la de apertura.

Veamos un ejemplo:

<html>
<head>

<title>Ejemplo de tabla</title>
</head>

<body>

<table border="1" cellpadding="0" cellspacing="0" width="100%">
<colgroup span="5" width="20%">
</colgroup>
<tr>
     
<td>Fila 1, Celda 1</td><td>Fila 1, Celda 2</td><td>Fila 1, Celda 3</td><td>Fila 1, Celda 4</td><td>Fila 1, Celda 5</td>
</tr>
<tr>
     
<td>Fila 2, Celda 1</td><td>Fila 2, Celda 2</td><td>Fila 2, Celda 3</td><td>Fila 2, Celda 4</td><td>Fila 2, Celda 5</td>
</tr>
<tr>
     
<td>Fila 3, Celda 1</td><td>Fila 3, Celda 2</td><td>Fila 3, Celda 3</td><td>Fila 3, Celda 4</td><td>Fila 3, Celda 5</td>
</tr>
<tr>
     
<td>Fila 4, Celda 1</td><td>Fila 4, Celda 2</td><td>Fila 4, Celda 3</td><td>Fila 4, Celda 4</td><td>Fila 4, Celda 5</td>
</tr>
<tr>
     
<td>Fila 5, Celda 1</td><td>Fila 5, Celda 2</td><td>Fila 5, Celda 3</td><td>Fila 5, Celda 4</td><td>Fila 5, Celda 5</td>
</tr>

</table>

<br />
<br />

<table border="1" cellpadding="0" cellspacing="0" width="100%">
<colgroup span="1" width="50%"></colgroup>
<colgroup span="4" width="12.5%">
</colgroup>
<tr>
     
<td>Fila 1, Celda 1</td><td>Fila 1, Celda 2</td><td>Fila 1, Celda 3</td><td>Fila 1, Celda 4</td><td>Fila 1, Celda 5</td>
</tr>
<tr>
     
<td>Fila 2, Celda 1</td><td>Fila 2, Celda 2</td><td>Fila 2, Celda 3</td><td>Fila 2, Celda 4</td><td>Fila 2, Celda 5</td>
</tr>
<tr>
     
<td>Fila 3, Celda 1</td><td>Fila 3, Celda 2</td><td>Fila 3, Celda 3</td><td>Fila 3, Celda 4</td><td>Fila 3, Celda 5</td>
</tr>
<tr>
     
<td>Fila 4, Celda 1</td><td>Fila 4, Celda 2</td><td>Fila 4, Celda 3</td><td>Fila 4, Celda 4</td><td>Fila 4, Celda 5</td>
</tr>
<tr>
     
<td>Fila 5, Celda 1</td><td>Fila 5, Celda 2</td><td>Fila 5, Celda 3</td><td>Fila 5, Celda 4</td><td>Fila 5, Celda 5</td>
</tr>

</table>

</body>
</html>


Esto se vería así:

Fila 1, Celda 1 Fila 1, Celda 2 Fila 1, Celda 3 Fila 1, Celda 4
Fila 1, Celda 5
Fila 2, Celda 1 Fila 2, Celda 2 Fila 2, Celda 3 Fila 2, Celda 4
Fila 2, Celda 5
Fila 3, Celda 1 Fila 3, Celda 2 Fila 3, Celda 3 Fila 3, Celda 4 Fila 3, Celda 5
Fila 4, Celda 1 Fila 4, Celda 2 Fila 4, Celda 3 Fila 4, Celda 4 Fila 4, Celda 5

 

Fila 1, Celda 1 Fila 1, Celda 2 Fila 1, Celda 3 Fila 1, Celda 4
Fila 1, Celda 5
Fila 2, Celda 1 Fila 2, Celda 2 Fila 2, Celda 3 Fila 2, Celda 4
Fila 2, Celda 5
Fila 3, Celda 1 Fila 3, Celda 2 Fila 3, Celda 3 Fila 3, Celda 4 Fila 3, Celda 5
Fila 4, Celda 1 Fila 4, Celda 2 Fila 4, Celda 3 Fila 4, Celda 4 Fila 4, Celda 5

En la primera tabla tenemos un grupo de 5 columnas en el que se aplicó el atributo width de ancho con un valor de 20%, haciendo que no fuera necesario incluir este atributo en cada celda de la tabla. En la segunda tabla tenemos dos grupos de columnas, el primero incluye una columna, indicado en el atributo span con el valor 1, mientras que el segundo grupo incluye cuatro columnas, indicado en el atributo span con el valor 4. En el primer grupo de una columna se aplico el atributo width con valor 50% y en el segundo de cuatro columnas un width con valor 12.5% de ancho para cada celda.

ALINEAMIENTO DEL CONTENIDO DE CELDAS

Por omisión el contenido de las celdas aparece justificado a la izquierda, pero puede suceder que querramos centrar dicho contenido, para eso existe el atributo align, con el cual podemos justificar el contenido de las celdas a la izquierda, centro o derecha. También existe el atributo valign que nos permite alinear verticalmente el contenido de las celdas. Dichos atributos pueden ser utilizados tanto en la etiqueta <table> como en las etiquetas <td> de una tabla. Si los utilizamos en la etiqueta <table> tendrán validez en toda la tabla, mientras que si los utilizamos en una etiqueta <td> solamente tendrán validez en la celda donde se encuentran. También hay que tener en cuenta que si tenemos atributos de alineamiento tanto en <table> como en una celda, prevalecerán los valores del atributo de la celda. Por ejemplo, si queremos que en toda la tabla el contenido esté centrado salvo en una celda; debemos poner un atributo de alineamiento con valor centrado, align="center", en la etiqueta <table>, para que todas las celdas tengan contenido centrado mientras que en la celda que queremos que el contenido esté justificado a la izquierda ponemos align="left".

Veamos un ejemplo:

<html>
<head>

<title>Ejemplo de tabla</title>
</head>

<body>

<table border="1" cellpadding="0" cellspacing="0" width="50%" align="center" valign="middle">
<tr>
     
<td width="50%">Contenido de la celda 1 de la fila 1 el cual se encuentra centrado y alineado verticalmente en el medio</td><td width="50%" align="left" valign="top">Fila 1, Celda 2</td>
</tr>

<tr>
     
<td width="50%">Contenido de la celda 1 de la fila 2 el cual se encuentra centrado y alineado verticalmente en el medio</td><td width="50%" align="right" valign="bottom">Fila 2, Celda 2</td>
</tr>

</table>

</body>
</html>

Esto se vería así:

 

Contenido de la celda 1 de la fila 1 el cual se encuentra centrado y alineado verticalmente en el medio. Fila 1, Celda 2
Contenido de la celda 1 de la fila 2 el cual se encuentra centrado y alineado verticalmente en el medio.
Fila 2, Celda 2

En la etiqueta <table> indicamos en el atributo align que el contenido de las celdas de la tabla deben estar centradas con el valor center (centro), mientras que con el atributo valign indicamos que debe estar verticalmente alineado al medio con el valor middle (medio). En el <td> de la segunda celda de la primera fila especificamos que el contenido debe estar alineado a la izquierda con el valor left (izquierda) y verticalmente arriba con el valor top (tope). En el <td> de la celda 2 de la fila 2 indicamos que el contenido debe estar alineado a la derecha con el valor right (derecha) mientras que en el atributo valign indicamos que queremos el contenido verticalmente alineado abajo con el valor bottom (fondo).

Como se puede ver en el ejemplo anterior los valores de los atributos align y valign de las celdas de la derecha se superponen a los valores predeterminados de la tabla, indicados en los atributos align y valign de la etiqueta <table>.


CELDAS QUE OCUPAN MÁS DE UNA FILA DE ALTO O COLUMNA DE ANCHO

Hasta ahora hemos creado tablas en formato de grilla regular con celdas que ocupan una fila de alto y una columna de ancho; sin embargo se puede hacer que una celda llegue a tener un ancho mayor al de una columna o un alto mayor al de una fila. Para lograr eso se utiliza en el <td> de la celda que queremos redimensionar, el atributo colspan para hacer que una celda tenga una ancho mayor a una columna o el atributo rowspan para que tenga una alto mayor a una fila.

Veamos un ejemplo:

<html>
<head>

<title>Ejemplo de tabla</title>
</head>

<body>
<h4>Tabla 1</h4>
<table border="1" cellpadding="5" cellspacing="0" width="100%">

<tr>
     
<td colspan="4" align="center"><b>Celda de 4 columnas de ancho</b></td>
</tr>

<tr>
     
<td width="25%">Fila 2, Columna 1</td><td width="25%">Fila 2, Columna 2</td><td width="25%">Fila 2, Columna 3</td><td width="25%">Fila 2, Columna 4</td>
</tr>

</table>

<h4>Tabla 2</h4>
<table border="1" cellpadding="5" cellspacing="0" width="50%">

<tr>
     
<td rowspan="4" width="50%" align="center" valign="middle"><b>Celda de 4 filas de alto</b></td><tdwidth="50%"><b>Fila 1, Columna 2</td>
</tr>
<tr>
     
<td width="50%">Fila 2, Columna 2</td>
</tr>
<tr>
     
<td width="50%">Fila 3, Columna 2</td>
</tr>
<tr>
     
<td width="50%">Fila 4, Columna 2</td>
</tr>

</table>

</body>
</html>

Esto se vería así:

Tabla 1

Celda de 4 columnas de ancho
Fila 2, Columna 1 Fila 2, Columna 2 Fila 2, Columna 3 Fila 2, Columna 4

 

Tabla 2

Celda de 4 filas de alto Fila 1, Columna 2
Fila 2, Columna 2
Fila 3, Columna 2
Fila 4, Columna 2

Cuando diseñamos una tabla debemos ser muy cuidadosos y respetar el orden y la cantidad de celdas y filas, o sea que la cantidad de celdas en una fila deben coincidir con la cantidad de celdas en las demás filas de la tabla; pero cuando diseñamos una tabla con celdas de más de una fila de alto o más de una columna de ancho debemos ser aún más cuidadosos. Como se ve en el código fuente anterior en la primera fila de la primera tabla, donde la celda ocupa cuatro columnas de ancho, solamente agregamos una celda a diferencia de la segunda fila donde sí agregamos las cuatro celdas. En la segunda tabla, donde tenemos una celda de cuatro filas de alto; esta celda pertenece a la primera fila, por lo tanto dentro del primer <tr> incluimos dos celdas, la primera con el rowspan de 4 filas y la de la segunda columna de tamaño normal; ya en las otras tres filas <tr> solamente debemos incluir una celda por fila pertenecientes a la segunda columna, ya que la primera columna está totalmente ocupada por la celda que tiene una altura de cuatro filas.

CABECERA, CUERPO Y PIE DE TABLAS

Otra posibilidad que nos da HTML es la de dividir una tabla en tres secciones, la de cabecera, cuerpo y pie de la tabla. Quizá no se utiliza mucho, pero a veces puede llegar a ser útil. Las etiquetas que definen estas secciones son <thead> para la cabecera de la tabla que va en la parte de arriba, <tbody> para el cuerpo de la misma y <tfoot> para el pie.

Tanto <thead>, <tfoot>, como <tbody> tienen que contener una o más etiquetas <tr>, las tres deben ir siempre dentro de la tabla, o sea que deben ir colocadas después del <table> de apertura, así como siempre deben estar colocadas después de las etiquetas <caption> o <colgroup> en caso de que la tabla contuviera alguna de estas etiquetas.

Otra cosa a tener en cuenta es que las secciones deben estar en este orden, primero se coloca la sección de cabecera <thead> con todo su contenido de filas <tr> y celdas <td> o <th>; luego la sección de pie de tabla <tfoot> con todas las filas <tr> y celdas <td> y finalmente la sección de cuerpo <tbody> con sus filas <tr> y celdas <td>.

Veamos un ejemplo:

<html>
<head>

<title>Ejemplo de tabla</title>
</head>

<body>

<table border="1" cellspacing="0" cellpadding="5">
<caption>
Tabla con cabecera, cuerpo y pie</caption>
<thead>
<tr>

     
<td>Fila 1, Celda 1</td><td>Fila 1, Celda 2</td>
</tr>
</thead>

<tfoot>
<tr>

     
<td>Fila 5, Celda 1</td><td>Fila 5, Celda 2</td>
</tr>
</tfoot>
<tbody>

<tr>
     
<td>Fila 2, Celda 1</td><td>Fila 2, Celda 2</td>
</tr>
<tr>
     
<td>Fila 3, Celda 1</td><td>Fila 3, Celda 2</td>
</tr>
<tr>
     
<td>Fila 4, Celda 1</td><td>Fila 4, Celda 2</td>
</tr>
</tbody>
</table>

</body>
</html>

 

Tabla con cabecera, cuerpo y pie
Fila 1, Celda 1 Fila 1, Celda 2
Fila 2, Celda 1 Fila 2, Celda 2
Fila 3, Celda 1 Fila 3, Celda 2
Fila 4, Celda 1 Fila 4, Celda 2
Fila 5, Celda 1 Fila 5, Celda 2

Como vemos en el ejemplo anterior primero se colocó la sección <thead>, luego la <tfoot> y finalmente la <tbody>, sin embargo en la tabla aparecen primero la sección de cabecera, luego la del cuerpo de la tabla y finalmente la del pie.

Mediante la división de una tabla en secciones de cabecera, cuerpo y pie se pueden agregar atributos distintos a los contenidos de cada una de estas. Por ejemplo si se quiere que las filas y celdas de cabecera tengan un cierto color de fondo y de fuente con texto centrado, las celdas de cuerpo tengan otros colores y texto justificado a la izquierda y las de pie tengan color de fondo y de fuentes distinto al de las otras secciones, la división de la tabla en secciones puede llegar a ser muy útil, ya que los atributos de estilo se aplicarían en <thead>, <tfoot> y <tbody> y todas las etiquetas de adentro heredarían estos atributos. Vale mencionar que los atributos de estilo se definen mediante un sublenguaje llamado CSS que se utiliza en conjunto con HTML, y que veremos más adelante en capítulos siguientes del curso.

MARCOS DE TABLA

Existe un atributo de <table> que permite tener bordes de tabla completos o parciales, o sea que solamente agregan bordes en uno o más lados de la tabla. Por ejemplo puede que se quiera tener borde solamente en el lado de arriba.

El atributo se llama frame que significa marco en inglés y los valores disponibles del mismo son: border (borde), box (caja), void (vacío), above (arriba), below (abajo), hsides (que proviene de lados horizontales), vsides (que proviene de lados verticales), lhs (para tener borde solamente en el lado izquierdo) y rhs (para borde solamente en el lado derecho).

Veamos un ejemplo:

<html>
<head>

<title>Ejemplo de tabla</title>
</head>

<body>

<table frame="border">
<caption>
Marco de borde completo</caption>
<tr>

     
<td>Fila 1, Celda 1</td><td>Fila 1, Celda 2</td>
</tr>

<tr>
     
<td>Fila 2, Celda 1</td><td>Fila 2, Celda 2</td>
</tr>
<tr>
     
<td>Fila 3, Celda 1</td><td>Fila 3, Celda 2</td>
</tr>
<tr>
     
<td>Fila 4, Celda 1</td><td>Fila 4, Celda 2</td>
</tr>
<tr>
     
<td>Fila 5, Celda 1</td><td>Fila 5, Celda 2</td>
</tr>

</table>

<table frame="box">
<caption>Marco de caja (box) - Mismo resultado que border -</caption>
<tr>

     
<td>Fila 1, Celda 1</td><td>Fila 1, Celda 2</td>
</tr>

<tr>
     
<td>Fila 2, Celda 1</td><td>Fila 2, Celda 2</td>
</tr>
<tr>
     
<td>Fila 3, Celda 1</td><td>Fila 3, Celda 2</td>
</tr>
<tr>
     
<td>Fila 4, Celda 1</td><td>Fila 4, Celda 2</td>
</tr>
<tr>
     
<td>Fila 5, Celda 1</td><td>Fila 5, Celda 2</td>
</tr>

</table>

<table frame="void">
<caption>Marco vacío</caption>
<tr>

     
<td>Fila 1, Celda 1</td><td>Fila 1, Celda 2</td>
</tr>

<tr>
     
<td>Fila 2, Celda 1</td><td>Fila 2, Celda 2</td>
</tr>
<tr>
     
<td>Fila 3, Celda 1</td><td>Fila 3, Celda 2</td>
</tr>
<tr>
     
<td>Fila 4, Celda 1</td><td>Fila 4, Celda 2</td>
</tr>
<tr>
     
<td>Fila 5, Celda 1</td><td>Fila 5, Celda 2</td>
</tr>

</table>

<table frame="above">
<caption>Marco de borde solamente arriba</caption>
<tr>

     
<td>Fila 1, Celda 1</td><td>Fila 1, Celda 2</td>
</tr>

<tr>
     
<td>Fila 2, Celda 1</td><td>Fila 2, Celda 2</td>
</tr>
<tr>
     
<td>Fila 3, Celda 1</td><td>Fila 3, Celda 2</td>
</tr>
<tr>
     
<td>Fila 4, Celda 1</td><td>Fila 4, Celda 2</td>
</tr>
<tr>
     
<td>Fila 5, Celda 1</td><td>Fila 5, Celda 2</td>
</tr>

</table>

<table frame="below">
<caption>Marco de borde solamente abajo</caption>
<tr>

     
<td>Fila 1, Celda 1</td><td>Fila 1, Celda 2</td>
</tr>

<tr>
     
<td>Fila 2, Celda 1</td><td>Fila 2, Celda 2</td>
</tr>
<tr>
     
<td>Fila 3, Celda 1</td><td>Fila 3, Celda 2</td>
</tr>
<tr>
     
<td>Fila 4, Celda 1</td><td>Fila 4, Celda 2</td>
</tr>
<tr>
     
<td>Fila 5, Celda 1</td><td>Fila 5, Celda 2</td>
</tr>

</table>

<table frame="hsides">
<caption>Marco de borde solamente en los lados horizontales</caption>
<tr>

     
<td>Fila 1, Celda 1</td><td>Fila 1, Celda 2</td>
</tr>

<tr>
     
<td>Fila 2, Celda 1</td><td>Fila 2, Celda 2</td>
</tr>
<tr>
     
<td>Fila 3, Celda 1</td><td>Fila 3, Celda 2</td>
</tr>
<tr>
     
<td>Fila 4, Celda 1</td><td>Fila 4, Celda 2</td>
</tr>
<tr>
     
<td>Fila 5, Celda 1</td><td>Fila 5, Celda 2</td>
</tr>

</table>

<table frame="vsides">
<caption>Marco de borde solamente en los lados verticales</caption>
<tr>

     
<td>Fila 1, Celda 1</td><td>Fila 1, Celda 2</td>
</tr>

<tr>
     
<td>Fila 2, Celda 1</td><td>Fila 2, Celda 2</td>
</tr>
<tr>
     
<td>Fila 3, Celda 1</td><td>Fila 3, Celda 2</td>
</tr>
<tr>
     
<td>Fila 4, Celda 1</td><td>Fila 4, Celda 2</td>
</tr>
<tr>
     
<td>Fila 5, Celda 1</td><td>Fila 5, Celda 2</td>
</tr>

</table>

<table frame="lhs">
<caption>Marco de borde solamente en el lado izquierdo</caption>
<tr>

     
<td>Fila 1, Celda 1</td><td>Fila 1, Celda 2</td>
</tr>

<tr>
     
<td>Fila 2, Celda 1</td><td>Fila 2, Celda 2</td>
</tr>
<tr>
     
<td>Fila 3, Celda 1</td><td>Fila 3, Celda 2</td>
</tr>
<tr>
     
<td>Fila 4, Celda 1</td><td>Fila 4, Celda 2</td>
</tr>
<tr>
     
<td>Fila 5, Celda 1</td><td>Fila 5, Celda 2</td>
</tr>

</table>

<table frame="rhs">
<caption>Marco de borde solamente en el lado derecho</caption>
<tr>

     
<td>Fila 1, Celda 1</td><td>Fila 1, Celda 2</td>
</tr>

<tr>
     
<td>Fila 2, Celda 1</td><td>Fila 2, Celda 2</td>
</tr>
<tr>
     
<td>Fila 3, Celda 1</td><td>Fila 3, Celda 2</td>
</tr>
<tr>
     
<td>Fila 4, Celda 1</td><td>Fila 4, Celda 2</td>
</tr>
<tr>
     
<td>Fila 5, Celda 1</td><td>Fila 5, Celda 2</td>
</tr>

</table>

</body>
</html>

 
CONTINÚA EN EL CURSO DE HTML - TERCERA PARTE >>


2 people like this

Share
Related Articles

Suggested posts
Follow Youbioit






Comments

Post new comment

The content of this field is kept private and will not be shown publicly.