CAPÍTULO XII. TABLAS.

Las tablas se utilizan cuando queremos mostrar datos ordenados de forma lógica en filas y columnas. Una tabla HTML se define con el elemento <table>. Cada fila de la tabla se indicará con el elemento <tr> (table row). Un encabezado en la tabla se definirá con el elemento <th> (table heading) y los datos de las celdas con <td> (table data).

Para incluir el borde a la tabla:

<table border="1">

Veremos que el borde aparece doble, si lo queremos sencillo debemos incluir el atributo cellspacing y darle valor cero:

<table border="1" cellspacing="0"> o también utilizando style="border-spacing:0px;"

Si queremos cambiar el color de los bordes:

<table border="1" bordercolor="yellow"> o bien <table style="width:100%; border:1px solid yellow;">

Otros atributos importantes son:

  • align, especifica la alineación horizontal del contenido de toda la tabla, de una fila o de una sola celda (valores left, center o right).

  • valign, especifica la alineación vertical del contenido de una celda (valores top, middle o bottom).

  • bgcolor, especifica el color de fondo de una tabla, de una fila o de una sola celda (también puede utilizarse el valor background-color en el atributo style).

  • cellpadding, especifica la anchura interior de la celda (espacio entre borde interior de la celda y el contenido de la celda).

  • colspan, de column span o extensión de columna en castellano, para indicar cuántas columnas ocupará la celda.

  • rowspan, para indicar en este caso cuántas filas ocupará la celda.

Para añadir una leyenda a la tabla (aparece por defecto sobre la tabla, centrada) se utiliza el elemento <caption>:

ACTIVIDAD PROPUESTA: DESCARGA Y LEE EL DOCUMENTO "TABLAS EN HTML", E INTENTA REALIZAR LAS ACTIVIDADES FINALES QUE SE PROPONEN.

Nota: para la actividad 5, necesitas descargar las siguientes imágenes --> PS2, VGA, RJ45.