Quinta Clase: Tablas

Las tablas

Las tablas se describen entre dos etiquetas: <table> y </table>

Las tablas están formadas por celdas y las celdas están formadas por renglones.

		imagen y texto			COLUMNA
		Texto dentro de una celda
FILA					CELDA

Para crear una tabla hay que insertar las etiquetas <table> y </table>. Entre dichas etiquetas habrá que especificar las filas y columnas que formarán la tabla.

Renglón <tr>

Es necesario insertar las etiquetas <tr> y </tr> por cada una de las filas de la tabla. Estas etiquetas deberán insertarse entre las etiquetas <table> y </table>.

Por ejemplo, para crear una tabla con cinco filas escribiríamos:

<table>

  <tr>...</tr>

  <tr>...</tr>

  <tr>...</tr>

  <tr>...</tr>

  <tr>...</tr>

</table>

Columna o celda <td>

Para crear una tabla no basta con especificar el número de filas, es necesario también especificar el número de columnas.

Una celda es el resultado de la intersección entre una fila y una columna, por lo que podremos especificar el número de celdas por fila, que equivale a especificar el número de columnas por fila.

Es necesario insertar las etiquetas <td> y </td> por cada una de las celdas que compongan cada una de las filas de la tabla. Por lo tanto, habrá que insertar esas etiquetas entre las etiquetas <tr> y </tr>.

Entre las etiquetas <td> y </td> se podrá especificar el contenido de cada una de las celdas. Por ejemplo, para insertar la siguiente tabla:

Sabado	Domingo
Curso HTML	Curso JQuery
Curso CSS	Curso DOM

<table border="1">
  <tr>
    <td>Sabado</td>
    <td>Domingo</td>
  </tr>
  <tr>
    <td>Curso HTML</td>
    <td>Curso CSS</td>
  </tr>
  <tr>
    <td>Curso JQuery</td>
    <td>Curso DOM</td>
  </tr>
</table>

Formato de la tabla

Los atributos de una tabla son:

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

Probar la tabla anterior (la de los cursos) con el siguiente formato:

<table width="50%" border="2" align="center" cellspacing="0" bordercolor="#000000" bgcolor="#FFCC99">

  ...

</table>

Con esto indicamos que el ancho (width) de la tabla debe ocupar el 50% del ancho de la ventana (lo puedes comprobar cambiando el ancho de la ventana de tu navegador y verás que el ancho de la tabla varía para ocupar siempre la mitad de la ventana), que el borde (border) tiene un grosor de dos píxeles (es más ancho que las separaciones internas de la tabla que tienen grosor 1), que la tabla está alineada al centro (center) de la ventana, que no hay espacio entre las celdas (cellspacing="0"), que el borde la tabla es negro (#000000) y el fondo naranja (#FFCC99).

Formato de las celdas

Es posible cambiar el formato de las celdas con atributos

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

De ese modo se puede cambiar todo un renglón, especificándolos en la etiqueta <tr>, en lugar de en la etiqueta <td>.
Hay que tener en cuenta que los atributos tienen más prioridad cuando son establecidos para una celda que cuando son establecidos para una fila completa. Al mismo tiempo, tienen más prioridad los atributos establecidos para una fila que los establecidos para toda la tabla.
Por ejemplo, si escribiéramos el siguiente código:

<table width="50%" border="2" align="center" cellspacing="0" bordercolor="#000000" bgcolor="#FFCC99">
  <tr align="center" bgcolor="#0099CC">
    <td>Sabado</td>
    <td bgcolor="#66CC99">Domingo</td>
  </tr>
  <tr>
    <td>Curso HTML</td>
    <td>Curso CSS</td>
  </tr>
  <tr>
    <td>Curso JQuery</td>
    <td>Curso DOM</td>
  </tr>

</table>

¿Qué obtenemos?

Se ha establecido el color naranja como fondo de toda la tabla, pero con la línea de código <tr align="center" bgcolor="#0099CC"> se ha establecido el color azul como color de fondo de la primera fila, por lo que dicha fila se mostrará de color azul, y no de color naranja. Al mismo tiempo, se ha cambiado el color de la segunda celda de la primera fila por el color verde, a través de la línea <td bgcolor="#66CC99">Domingo</td> por lo que esta fila en vez de ser azul será verde, los atributos de celda tienen prioridad sobre los de la fila.

Existe otro atributo que puede establecerse sobre las celdas. Se trata del atributo nowrap, que hace que el contenido de la celda no se ajuste de manera automática al ancho de la columna sino que el ancho de la celda se adapta al ancho del contenido para que el contenido ocupe una sólo fila. Este atributo no toma ningún valor, simplemente se añade o no a las etiqueta <td>.