TABLAS

Definición de tabla
Una tabla es una sección del documento
web que permite organizar la información
en filas y columnas. Pueden utilizarse tablas
para mostrar información, para organizar
los contenidos de un página o para ditribuir
texto e imágenes de forma más presentable.
 Estructura de las tablas
Elementos Estructurales básicos de las tablas:

Encabezamiento de las tablas

Celdas de datos de las tablas

Títulos de las tablas

 Elementos para creación de tablas en
HTML
Una tabla en HTML se construye utilizando varios elementos en
conjunto. En primer lugar, se utiliza el elemento TABLE para indicar al
navegador que en esa sección del documento web va una tabla. A
continuación, debe crearse una fila utilizando un elemento TR. Dentro
de la fila deben crearse las celdas que posee usando elementos TH o
TD. Luego, mediante el uso de atributos de estos elementos se puede
definir el resto de la tabla.
 Ejemplo de tabla básica
<TABLE>
<TR>
<TD> celda(1,1) </TD>
<TD> celda(1,2) </TD>
<TD> celda(1,3) </TD>
</TR>
<TR>
<TD> celda(2,1) </TD>
<TD> celda(2,2) </TD>
<TD> celda(2,3) </TD>
</TR>
<TR>
<TD> celda(3,1) </TD>
<TD> celda(3,2) </TD>
<TD> celda(3,3) </TD>
</TR>
</TABLE>
Elemento TABLE (I)
Una tabla se define con la utilización de las etiquetas
<TABLE>…</TABLE>. Dentro de estas se colocan todos los demás
elementos de la tabla: TR (filas), TH (celda de encabezado), TD (celda
de contenido), etc.
El uso de estas etiquetas le comunica al navegador donde comienza y
donde termina la tabla, fila o celda.
El elemento TABLE puede utilizarse con uno o varios atributos, que
veremos a continuación:
 Elemento TABLE (III)
width permite especificar el ancho de la tabla. Su valor puede ser
proporcionado en pixeles o en porcentaje. Si no se especifica la
anchura esta queda determinada por el navegador.

border permite especificar la anchura del borde que rodea la tabla.

El valor de este atributo debe estar dado en pixeles.

NOTA: Tanto width, como border están desaprobados, en favor de

las hojas de estilo.
 Elemento TABLE (III)
Ejemplos de atributos width y border con CSS

Table{
width:100%;
Border: 1 px solid #000;
}

Th,td {
width:25%
border: 1px solid #000;
border-spacing: 0;7/* espaciado de bordes*/
}
 Elemento TABLE (III)
El estándar de CSS 2.1 establece que existen dos modelos de bordes para las
celdas de las tablas.
El primer modelo es el “separado” separate y hace que todas las celdas de la
tabla muestren sus cuatro bordes.

El segundo modelo es el “fusionado” collapse y combina los bordes de las

celdas adyacentes.

El modelo de bordes influye en la estética de los bordes de las celdas, pero es

independiente border, border-width, border-color y border-style. El modelo
de bordes se establece mediante la border-collapse.

Los navegadores utilizan por defecto el modelo de bordes separate, que hace
que todas las celdas estén separadas y muestren siempre sus cuatro border.
 Elemento TABLE (III)

Table {
border-collapse: separate;
border-spacing: 3px;
}
 Elemento TABLE (III)

Diferencias entre el modelo separate y collapse

 En el modelo de collapse se hace una fusión automática de todos los bordes

adyacentes, en el modelo separate todas las celdas muestran sus cuatro border
independientemente de la separación de las celdas.

 La otra diferencia entre los dos modelos de bordes es que en el modelo

separate las filas, grupos de filas, columnas y grupos de columnas no pueden
establecerse bordes
Elemento TABLE (III)
 Ajustar alineación vertical y horizontal
Para controlar dónde se sitúa el contenido dentro de una celda de
tabla, utilice las propiedades text-align y vertical-align.

Text-align: Controla la ubicación horizontal y se puede establecer

en left, right, center y justify.

Ejemplo:
Table {text-align:right;}
Th{ text-align:left;}

Las celdas de una tabla también tienen una altura. Los navegadores
suelen alinear el contenido en vertical en el centro de una celda de
tabla. Este comportamiento se puede controlar con la propiedad
 Ajustar alineación vertical y horizontal
Vertical-align, los valores que puede tomar esta propiedad son:
top, baseline, middle o bottom.

Top: Empuja el contenido a la parte superior de la celda

Baseline: Funciona igual que top, excepto que el navegador alinea

la línea de base de la primera línea de texto de cada celda.

Middle: Alinea el contenido al centro de la celda

Bottom: Empuja el contenido a la parte inferior de la celda

 Ajustar alineación vertical y horizontal
A diferencia de text-align, la propiedad vertical-align, no se
hereda, se puede utilizar solo en estilos que se aplican
directamente a las etiquetas <th> y <td>.

Nota. El atributo Vertical-align, se aplica a otros elementos

html,siempre y cuando su comportamiento sea inline.
Propiedades en TR (II)
bgcolor permite establecer el color de fondo para una fila de tabla. Este
atributo está desaprobado a favor de las hojas de estilo.
title permite colocar un texto con información sobre el elemento. Esta
información aparecerá cuando se coloque el puntero del ratón sobre el
elemento, en forma de tool tip.
Ejemplo:
<table border = "1">
<tr bgcolor="red" title="Es una prueba">
<td>Alexander</td>
<td>Vitrosky</td>
</tr>
</table>
 Elementos TH y TD (I)
Estos elementos permiten crear las celdas de la tabla. La diferencia es
que TH crea una celda de encabezado y TD crea una celda de
contenido. Los navegadores suelen representar los elementos TH con
letra negrita y generalmente centrada.
Los atributos más importantes de estos elementos son colspan y
rowspan.
colspan permite que se pueda expandir una columna es número de
columnas indicado en el valor que se le asigna.
rowspan permite que se pueda expandir una fila el número de filas
especificado en el valor que se le asigna.
 Elemento CAPTION y SUMMARY
El elemento Caption permite colocar un título descriptivo corto para la
tabla. Esta etiqueta es cerrada, lo que quiere decir que lleva una pareja
de cierre.
Ejemplo:
<table border="1">
<caption>Listado de alumnos</caption>
<tr>
<th>Carnet</th>
<th>Nombres</th>
</tr>
<tr>
<td>CA124567</td>
<td>Martica Castro</td>
</tr>
</table>
Elemento CAPTION y SUMMARY
El elemento Summary incorporar un descripción de forma
resumida del contenido de la tabla.
<table summary="lorem ipsum dolor">
<caption>Lorem ipsum</caption>
<tr>
<th>Lorem ipsum</th>
<th>Bobis sum</th>
<th>Populae sonorem</th>
<th>Ipsum et</th>
</tr>
Elemento CAPTION y SUMMARY
<tr>
<td>Lorem ipsum</td>
<td>Bobis sum</td>
<td>Populae sonorem</td>
<td>Ipsum et</td>
</tr>
<tr>
<td>Lorem ipsum</td>
<td>Bobis sum</td>
<td>Populae sonorem</td>
<td>Ipsum et</td>
</tr>
Elemento CAPTION y SUMMARY
<tr>
<td>Lorem ipsum</td>
<td>Bobis sum</td>
<td>Populae sonorem</td>
<td>Ipsum et</td>
</tr>
</table>
Elemento CAPTION y SUMMARY
Aplicando CSS a la tabla anterior
table { border-collapse: collapse;}
caption, th, td { padding: .2em .8em; border: 1px
solid #fff;}

caption { background: #dbb768; font-weight: bold;

font-size: 1.1em; margin-left: -1px;}

html:first-child caption {margin-left: 0; } /* Solamente

en Opera*/

th { font-weight: bold; background: #f3ce7d;} td {

background: #ffea97;}
Definir un encabezado, un cuerpo y un pie para la
tabla

 Existen ciertas etiquetas que permiten estructurar

las partes de una tabla independientemente del
orden en que se escriban en el código HTML. El
navegador será quien se encargue de mostrar los
datos de forma lógica y ordenada.
Para ello se emplearán las etiquetas <thead>,
<tbody> y <tfoot>.
Definir un encabezado, un cuerpo y un pie
para la tabla

 Existen ciertas etiquetas que permiten

estructurar las partes de una tabla
independientemente del orden en que se
escriban en el código HTML. El navegador será
quien se encargue de mostrar los datos de
forma lógica y ordenada.
Para ello se emplearán las etiquetas <thead>,
<tbody> y <tfoot>.
Definir un encabezado, un cuerpo y un pie
para la tabla
 <thead> proporciona la información de encabezado de una
tabla que se mostrará en la primera linea de la table.
 La etiqueta <tbody> recogerá los datos del cuerpo de la
tabla y <tfoot> encerrará los datos de pie de la tabla
(que generalmente son los resultados expuestos en el cuerpo
de la tabla).
 Deberán especificarse única y solamente una vez para cada
tabla. Todas las etiquetas <tr> deberán estar englobadas
dentro de uno de estos tres tags.
Definir un encabezado, un cuerpo y un pie
para la tabla
Ejemplo
<table>
<thead>
<tr>
<th>Página</th>
<th>Visitas/día</th>
<th>Visitas/semana</th>
<th>Visitas/mes</th>
</tr>
</thead>
Definir un encabezado, un cuerpo y un pie
para la tabla
Ejemplo
<tfoot>
<tr>
<th>Total</th>
<td>97</td>
<td>713</td>
<td>2820</td>
</tr>
</tfoot>
Definir un encabezado, un cuerpo y un pie para la tabla
<tbody>
<tr>
<td>index.php</td>
<td>20</td>
<td>154</td>
<td>652</td>
</tr>
<tr>
<td>HTML.php</td>
<td>42</td>
<td>301</td>
<td>1186</td>
</tr>
Definir un encabezado, un cuerpo y un pie para la tabla

<tr>
<td>CSS.php</td>
<td>35</td>
<td>258</td>
<td>982</td>
</tr>
</tbody>
</table>
 Combinación de celdas
En ocasiones es necesario realizar tablas con columnas combinadas,
con filas combinadas, o ambas. En estos casos es necesario utilizar
el atributo colspan o rowspan, según sea el caso.
Ejemplo de colspan:
<table border = "1">
<tr>
<td colspan="2">Nombre Completo</td>
<td>Edad</td>
</tr>
<tr>
<td>Alexander</td>
<td>Ivansky</td>
<td>35</td>
</tr>
</table>
 Combinación de celdas
Ejemplo de rowspan:
<table border = "1">
<tr>
<td rowspan="2">Nombre Completo</td>
<td>Alexander</td>
<tr>
<td>Ivansky</td>
</tr>
</tr>
<tr>
<td>Edad</td>
<td>35</td>
</tr>
</table>
Agrupamiento de celdas (I)
Con HTML es posible crear grupos de filas con los elementos
THEAD, TFOOT y TBODY y grupos de columnas utilizando los
elementos COLGROUP y COL.
Las filas de una tabla pueden agruparse en cabecera de tabla, pie de
tabla y una o más secciones de cuerpo de tabla. La cabecera y el pie
de la tabla deberían contener información sobre las columnas de la
tabla. En tanto que el cuerpo de la tabla debería contener filas de
datos.
 Ejemplo <tr>
<td>Semana 2</td>
<table border = "1"
width="100%"> <td>$85,000</td>
<thead> </tr>
<tr> <td colspan="2" <tr>
align="center">Ventas
semanales del mes de Febrero de <td>Semana 3</td>
2012</td></tr> <td>$95,000</td>
</thead>
</tr>
<tfoot>
<tr>
<TR> <td colspan="2"
align="center">Fin de las <td>Semana 4</td>
ventas</td></tr>
<td>$112,000</td>
</tfoot>
<tbody>
</tr>
<tr> </tbody>
<td>Semana 1</td> </table>
<td>$125,000</td></tr>
Agrupamiento de celdas (III)
Al agrupar columnas es posible crear divisiones estructurales en la
tabla. Una tabla puede contener un único grupo implícito de
columnas (cuando no hay elemento COLGROUP), o cualquier
número de grupos explícitos de columnas.
El elemento COL permite que se puedan compartir atributos
entre varias columnas, sin que esto implique agrupamiento
estructural.
 Ejemplo
 Ejemplo COLGROUP
<table border="1">
<colgroup span="2" style="background-color:orange">
</colgroup>
<tr>
<td>Producto 1</td>
<td>Producto 2</td>
<td>Producto 3</td>
</tr>
</table>
 Ejemplo
 Ejemplo COL
<table border="1">
<colgroup span="2" style="background-color:orange">
<col width="50"></col>
<col width="100"></col>
</colgroup>
<tr>
<td>Producto 1</td>
<td>Producto 2</td>
<td>Producto 3</td>
</tr>
</table>