TABLAS EN HTML Hoy en día la mayoría de las páginas web se

Prof. Andrea Delogu – Prof. Fabiana Lorenzo
Lab. Aplicaciones - 6° 12° - 6° 11
TABLAS EN HTML
Hoy en día la mayoría de las páginas web se basan en tablas, ya que resultan de gran utilidad al mejorar las
opciones de diseño.
Todos los objetos se alinean por a la izquierda de las páginas web, pero gracias a las tablas es posible
distribuir el texto en columnas, colocar imágenes al lado de un bloque de texto, y otra serie de cosas que
sin las tablas serían imposibles de realizar.
La tabla, además del uso habitual semejante al de este elemento en los procesadores de texto, se usa
como contenedor de las diferentes secciones de nuestra página.
Etiqueta <table>
Las tablas están formadas por celdas, que son los recuadros que se obtienen de la intersección entre una
fila y una columna.
Columna
Imagen y Texto
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.
Etiqueta <tr> (tr acrónimo de table row o fila de la tabla)
Es necesario insertar las etiquetas <tr> y </tr> por cada una de las filas de la tabla. Estas deberán insertarse
entre las etiquetas <table> y </table>.
Por ejemplo, para insertar una tabla con cuatro filas habría que escribir:
<table>
<tr> . . . </tr>
<tr> . . . </tr>
<tr> . . . </tr>
<tr> . . . </tr>
</table>
Etiqueta <td> (td acrónimo de table data o dato de la tabla)
Una celda es el resultado de la intersección entre una fila y una columna, por lo que podemos especificar el
número de celdas por fila, que equivale a especificar el número de columnas.
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 <tr> y </tr>.
1
Entre las etiquetas <td> y </td> se podrá especificar el contenido de cada una de las celdas. Por ejemplo,
para insertar la siguiente tabla:
Lunes
Laboratorio de Aplicaciones
Laboratorio de Hardware
Martes
Laboratorio de Programación
Laboratorio de Sistemas Operativos
Habría que escribir:
<table border = ”1”>
<tr>
<td>Lunes</td>
<td>Martes</td>
</tr>
<tr>
<td> Laboratorio de Aplicaciones </td>
<td> Laboratorio de Programación </td>
</tr>
<tr>
<td> Laboratorio de Hardware </td>
<td> Laboratorio de Sistemas Operativos </td>
</tr>
Título de la tabla
Es posible establecer un título para la tabla mediante las etiquetas <caption> y </caption>. Estas etiquetas
han de ir después de la etiqueta <table>, y puede especificarse el valor de los atributos align (con los
valores botton, center, left, right y top) y valign (con los valores botton y top).
Por ejemplo, si escribiéramos el siguiente código:
<table>
<caption>Título de la tabla</caption>
<tr>
<td>Lunes</td>
...
</tr>
</table>
Título de la tabla
Lunes
Laboratorio de Aplicaciones
Laboratorio de Hardware
Martes
Laboratorio de Programación
Laboratorio de Sistemas Operativos
Combinar celdas
Para las etiquetas <td> existen los atributos colspan y rowspan, que se utilizan para combinar celdas.
Prof. Andrea Delogu – Prof. Fabiana Lorenzo
Lab. Aplicaciones - 6° 12° - 6° 11
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. Para insertar la siguiente tabla:
DIFERENCIAS ETRE EL PERRO Y EL HOMBRE
DIFERENCIAS
PERRO
Duración crecimiento
Tiempo de gestación
Duración de vida del pelo/cabello
HOMBRE
PEQUEÑO
10 meses
58 a 63 días
1 año
GRANDE
18 a 24 meses
16 años
9 meses
2 a 7 años
Habría que escribir:
<table border = "2">
<tr>
<td colspan = "4">DIFERENCIAS ENTRE EL PERRO Y EL HOMBRE</td>
</tr>
<tr>
<td rowspan = "2">DIFERENCIAS</td>
<td rowspan = "2" colspan = "2">PERRO</td>
<td rowspan = "2">HOMBRE</td>
</tr>
<tr> </tr>
<tr>
<td> </td>
<td>PEQUEÑO</td>
<td>GRANDE</td>
<td> </td>
</tr>
<tr>
<td>Duración crecimiento</td>
<td>10 meses</td>
<td>18 a 24 meses</td>
<td>16 años</td>
</tr>
<tr>
<td>Tiempo de gestación</td>
<td colspan = "2">58 a 63 días</td>
<td>9 meses</td>
</tr>
<tr>
<td>Duaración de vida del pelo/cabello</td>
<td colspan = "2">1 año</td>
<td>2 a 7 año</td>
</tr>
</table>
3
Entre los tags <td> y </td> se incluye el contenido que queremos que aparezca en la celda. HTML no
permite crear celdas vacías en una tabla, así que, cuando se quiere que una celda aparezca sin contenidos,
se debe incluir dentro de ella un espacio en blanco, utilizando la secuencia  .
El uso de los atributos colspan y rowspan puede resultar algo complicado al principio. Es cuestión de
práctica.
Cuidando la presentación de la Tabla
Grosor de los bordes
<table border=”5”>
Celdas de cabecera. Etiqueta <th> (th es el acrónimo de table heading o encabezado de la tabla)
<tr>
<th>Columna 1</th> <th>Columna 2</th> <th>Columna 3</th>
</th>
(Nota: Las cabeceras por defecto están centradas)
Alineación dentro de las celdas:
o Alineación en sentido vertical
<TD VALIGN=TOP> Arriba </TD>
<TD VALIGN=BOTTOM> Abajo </TD>
o Alineación en sentido horizontal
<TD ALIGN=CENTER> Al centro </TD>
<TD ALIGN=RIGHT> A la derecha </TD>
<TH ALIGN=LEFT> Cabecera a la izquierda </TH>
Color de fondo en tablas y celdas
<table border bgcolor="#00FF00">
<td bgcolor="#FF0000">
Imágenes de fondo en tablas y celdas
<table border background="nubes.jpg">
<td background="nubes.jpg>
Separación entre las celdas
<table border cellspacing=20>
Separación entre el borde y el contenido de las celdas
<table border cellpadding=20>
Celdas que abarcan a otras varias
<TR><TD COLSPAN=2> Celda sobre 2 columnas </TD><TR>
<TD ROWSPAN=2> Celda junto a 2 filas </TD>