SESIÓN 5:TABLAS

TABLAS <table>

Una tabla HTML puede ser considerada, de manera simple, como un grupo de filas donde cada una de ellas contiene un grupo de celdas (y no alrevés). Las tablas, como toda estructura en los documentos HTML, son definidas usando elementos. Entonces, una tabla simple puede ser insertada en un documento HTML usando tres elementos: el elemento HTML table (estructura contenedora principal), el elemento HTML tr (contenedor de fila) y el elemento HTML td (celda). Veamos un ejemplo:

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

La vista sera:

Celda 1	Celda 2	Celda 3
Celda 4	Celda 5	Celda 6

FILA
Las tablas son descritas por líneas de izquierda a derecha. Cada una de estas líneas es definida por otra etiqueta y su cierre: <tr> y </tr>

COLUMNA O CELDA
Asimismo, dentro de cada línea, habrá diferentes celdas. Cada una de estas celdas será definida por otro par de etiquetas: <td> y </td>. Dentro de estas etiquetas será donde coloquemos nuestro contenido.

FORMATO DE LA TABLA

Atributo	Significado	Posibles valores
width	ancho de la tabla	un número, acompañado de % cuando se desee que sea en porcentaje
height	altura de la tabla	un número, acompañado de % cuando se desee que sea en porcentaje
cellpadding	espacio entre el contenido de las celdas y el borde	un número
cellspacing	espacio entre celdas	un número
border	grosor del borde	un número
align	alineación de la tabla dentro de la página	left (izquierda) right (derecha) center (centro)
bgcolor	color de fondo	número hexadecimal
background	imagen de fondo	número hexadecimal
bordercolor	color del borde	número hexadecimal

FORMATO DE LAS CELDAS

Atributo	Significado	Posibles valores
width	ancho de la tabla	un número, acompañado de % cuando se desee que sea en porcentaje
height	altura de la tabla	un número, acompañado de % cuando se desee que sea en porcentaje
align	alineación horizontal del contenido de la celda	left (izquierda) right (derecha) center (centro)
valign	alineación vertical del contenido de la celda	baseline (línea de base) bottom (inferior) middle (medio) top (superior)
bgcolor	color de fondo	número hexadecimal
background	imagen de fondo	número hexadecimal
bordercolor	color del borde	número hexadecimal

ENCABEZADO DE COLUMNA <th>
Las etiquetas <td> y </td> se utilizan para definir las celdas de cada una de las filas, pero podemos poner en su lugar las etiquetas <th> y </th>.
Para la etiqueta <th> es posible especificar los mismos atributos que para la etiqueta <td>, pero esta nueva etiqueta hace que el texto de la celda aparezca centrado y en negrita, por lo que se utiliza para definir los encabezados o títulos de las columnas.
Por ejemplo, si escribiéramos el siguiente código:
<table width="50%" border="1" align="center">
  <tr>
    <th>Sabado</td>
    <th>Domingo</td>
  </tr>
  <tr>
    <td>Curso HTML</td>
    <td>Curso Dreamweaver</td>
  </tr>
  <tr>
    <td>Curso Frontpage</td>
    <td>Curso Flash</td>
  </tr>
</table>
Obtendríamos la siguiente tabla:

Sábado	Domingo
Curso HTML	Curso Dreamweaver
Curso Frontpage	Curso Flash

TITULO DE TABLAS <caption>

• La tabla está enmarcada por las etiquetas <TABLE> y </TABLE>.
• El título de la tabla está enmarcado por <CAPTION> </CAPTION>
• Cada fila está enmarcada por<TR> </TR> (por Table Row).
• Las celdas de encabezamiento están enmarcadas por <TH> </TH> (por Table Header).
• Los datos en cada celda están enmarcados por <TD> </TD> (Table Data).

Este es un ejemplo de tabla HTML:
<TABLE BORDER="1">
  <CAPTION>Este es el título de la tabla</CAPTION>
  <TR>
<TH> Título A1 </TH>
<TH> Título A2 </TH>
<TH> Título A3 </TH>
<TH> Título A4 </TH>
  </TR>
  <TR>
<TH> Título B1 </TH>
<TD> Valor B2 </TD>
<TD> Valor B3 </TD>
<TD> Valor B4 </TD>
  </TR>
</TABLE>

COMBINAR CELDAS

Para las etiquetas <td> y <th> existen los atributos colspan y rowspan, que se utilizan para combinar celdas.
A través del atributo colspan se especifica el número de columnas por las que se extenderá la celda, y a través del atributo rowspan se especifica el número de filas por las que se extenderá la celda.
Para que quede más claro, vamos a ver un ejemplo de su uso. Por ejemplo, para insertar la siguiente tabla:

DIFERENCIAS ENTRE EL PERRO Y EL HOMBRE
DIFERENCIAS	PERRO		HOMBRE
	PEQUEÑO	GRANDE
Duración crecimiento	10 meses	18 a 24 meses	16 años
Tiempo de gestación	58 a 63 días		9 meses
Duración de vida del pelo/cabello	1 año		2 a 7 años

Habría que escribir el siguiente código:

<table width="575" border="2" cellspacing="2">
  <tr align="center" valign="middle">
    <th colspan="4">DIFERENCIAS ENTRE EL PERRO Y EL HOMBRE</th>
  </tr>
  <tr align="center" valign="middle">
    <th rowspan="2">DIFERENCIAS</th>
    <th colspan="2">PERRO</th>
    <th rowspan="2">HOMBRE</th>
  </tr>
  <tr align="center" valign="middle">
    <th>PEQUE&Ntilde;O</th>
    <th>GRANDE</th>
  </tr>
  <tr align="center" valign="middle">
    <td>Duraci&oacute;n crecimiento</td>
    <td>10 meses</td>
    <td>18 a 24 meses</td>
    <td>16 a&ntilde;os</td>
  </tr>
  <tr align="center" valign="middle">
    <td>Tiempo de gestaci&oacute;n</td>
    <td colspan="2">58 a 63 d&iacute;as</td>
    <td>9 meses</td>
  </tr>
  <tr align="center" valign="middle">
    <td>Duraci&oacute;n de vida del pelo/cabello</td>
    <td colspan="2">1 a&ntilde;o</td>
    <td>2 a 7 a&ntilde;os</td>
  </tr>
</table>