Este documento explica cómo crear y formatear tablas en HTML. Describe las etiquetas <table>, <tr>, <td>, <th>, <caption> y sus atributos para definir la estructura básica de una tabla, incluyendo filas, celdas, encabezados y títulos. También explica cómo combinar celdas usando los atributos colspan y rowspan.

1. COLEGIO NACIONAL NICOLAS ESGUERRA
EDIFICAMOS FUTURO
Andrés Felipe Gómez Lamprea
Página web v
Tabla <table>
Las tablas están formadas porceldas,que son los recuadros que se obtienen como
resultado de la intersección entre una fila y una columna.
Fila <tr>
Es necesario insertarlas etiquetas <tr> y </tr> porcada una de las filas de la tabla.
Estas etiquetas deberán insertarse entre las etiquetas <table> y </table>.
Por ejemplo,para crearuna tabla con cinco filas escribiríamos:
<table>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
</table>

2. Columna o celda <td>
Para crearuna tabla no basta con especificarel número de filas, es necesario también
especificarel número de columnas.
<table border="1">
<tr>
<td>Sábado</td>
<td>Domingo</td>
</tr>
<tr>
<td>Curso HTML</td>
<td>Curso Dreamweaver</td>
</tr>
<tr>
<td>Curso Frontpage</td>
<td>Curso Flash</td>
</tr>
</table>
Formato de la tabla
Es posible modificar los siguientes atributos de una tabla:
Por ejemplo,para modificar la tabla de la página anteriorpara que quedase como la
siguiente:
<table width="50%" border="2" align="center" cellspacing="0" bordercolor="#000000" b
gcolor="#FFCC99">
...
</table>

3. Formato de las celdas
Es posible modificar los siguientes atributos de una celda:
También es posible modificar estos atributos de toda una fila, especificándolos en la
etiqueta <tr>, en lugarde en la etiqueta <td>.
<table width="50%" border="2" align="center" cellspacing="0" bordercolor="#000000" b
gcolor="#FFCC99">
<tr align="center" bgcolor="#0099CC">
<td>sábado</td>
<td bgcolor="#66CC99">Domingo</td>
</tr>
<tr>
<td>Curso HTML</td>
<td>Curso Dreamweaver</td>
</tr>
<tr>
<td>Curso Frontpage</td>
<td>Curso Flash</td>
</tr>
</table>

4. Encabezado de columna <th>
Las etiquetas <td> y </td> se utilizan para definir las celdas de cada una de las filas,
pero podemos poneren su lugarlas etiquetas <th> y </th>.
<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>
Título de tabla <caption>
No solamente es posible establecertítulos para las columnas,también es posible
establecerun título para la tabla mediante las etiquetas <caption> y </caption>.
<table width="50%" border="1" align="center">
<caption align="right" valign="top">Titulo de la tabla<tr>
<tr>
<th>Sabado</td>
...
</tr>
</table>

5. Combinar celdas
Para las etiquetas <td> y <th> existen los atributos colspan y rowspan,que se utilizan
para combinarceldas.
<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>