(X)HTML. Tablas. Las tablas son grupos de celdas que contienen información.

Transcripción

1 Las tablas son grupos de celdas que contienen información. Toda celda de una tabla puede albergar cualquier elemento disponible en una página web (siempre que pueda incluirse en el elemento body). Para definir una tabla: <TABLE> </TABLE> Para definir las filas de una tabla: <TR> </TR> Para definir las columnas de una fila: <TD> </TD>

2 Ejemplo: <table border= 1 > <td>campo1</td> <td>campo2</td> <td>campo3</td> <td>campo4</td> <td>campo5</td> <td>campo6</td> </table> Creará una tabla como la que sigue:

3 Ejemplo:

4 Si quisiéramos centrar la tabla haremos uso del atributo align: <table border= 1 align= center > <td>campo1</td> <td>campo2</td> <td>campo3</td> <td>campo4</td> <td>campo5</td> <td>campo6</td> </table> Los valores de align pueden ser: center, left y, right.

5 Tablas Si quisiéramos mostrar texto alrededor de la tabla, utilizaremos los valores right y left:: <table border= 1 align= rigth > <td>campo1</td> <td>campo2</td> <td>campo3</td> <td>campo4</td> <td>campo5</td> <td>campo6</td> p>este texto saldrá alrededor de la tabla que hemos creado</p> </table> Esta técnica no es la más recomendable ya que puede producir efectos no deseados por el diseñador. Mucho más correcto, sin utilizar CSS, es la definición de tablas que contengan ambos elementos: el texto y la tabla.

6 El atributo bgcolor permite cambiar el color de fondo de la tabla: <table border= 1 align= center bgcolor= green > <td>campo1</td> <td>campo2</td> <td>campo3</td> <td>campo4</td> <td>campo5</td> <td>campo6</td> </table>

7 El atributo bgcolor permite cambiar el color de fondo de la fila: <table border= 1 align= center > <tr bgcolor= green > <td>campo1</td> <td>campo2</td> <td>campo3</td> <td>campo4</td> <td>campo5</td> <td>campo6</td> </table>

8 El atributo bgcolor permite cambiar el color de fondo de la celda <table border= 1 align= center > <tr > <td bgcolor= green >campo1</td> <td>campo2</td> <td>campo3</td> <td>campo4</td> <td>campo5</td> <td>campo6</td> </table>

9 En el caso de las filas y celdas, la alineación puede ser vertical u horizontal: Para la alineación horizontal utilizaremos el atributo align con los valores: justify, center, left y rigth Para la alineación vertical, el atributo valign con los valores: top, bottom, middle

10 Para modificar el espacio entre celdas se utiliza el atributo cellspacing: cellspacing. En el siguiente ejemplo: Podemos eliminar las líneas azules como sigue: <table align="center" width="75%" bgcolor="blue" cellspacing="0">

11 En esta imagen se observa que el espacio entre los contenidos de la celda y el borde es demasiado pequeño. Bastará con modificar el atributo cellpadding <table align="center" width="75%" bgcolor="blue" cellspacing= 0 cellpadding="10">

12 El contenido de algunas celdas puede intersarnos que no aparezca dividido en dos líneas. Utilizaremos el atributo nowrap La celda con IES Enrique Tierno Galván contiene lo siguiente: <td nowrap><font face="arial Narrow" size="4" color="red">ies Enrique Tierno Galván</font></td>

13 (Resumen) Las tablas pueden contener cualquier elemento que podamos incluir en una página Web, INCLUSO OTRA TABLA.. Las tablas se componen de filas que se representan con elemento TR. Las filas se componen de celdas que se representan por el elemento TD. Las tablas pueden configurarse para tener un tamaño determinado u ocupar un porcentaje de la pantalla. Los bordes muestran los límintes de las tablas y sus celdas. El espaciado establece la distancia de separación entre las celdas (CELLSPACING) Se pueden establecer los márgenes de separación entre los bordes de la celda y su contenido (CELLPADDING)

14 (Resumen) Se pueden crear distintos tipos de alineación tanto dentro como fuera de las tablas para crear efectos especiales. Las celdas pueden extenderse a lo largo de más de una fila (rowspan) o de una columna (colspan). Si la tabla (tablas) son complicadas, repercutirá en el tiempo que tarda en mostrarse la pantalla en el navegador.