Posted in Documentación - HTML
| Índice de Artículos |
|---|
| Tablas HTML |
| Página 2 |
| Todas las páginas |
<TABLE> <TR> <TD>
Las tablas surgieron con la versión HTML 3.0. Las tablas nos permiten representar y ordenar cualquier elemento de nuestra presentación en diferentes filas y columnas de modo que podamos resumir grandes cantidades de información de una manera que puede representarse rápida y fácilmente.
El contenido de una tabla lo debemos desarrollar entre las tags <table>.....</table>.
Las tablas se definen fila a fila, celda a celda, comenzando desde la celda superior izquierda. Las columnas se calcularán automáticamente según las celdas que hay en cada fila.
Cada fila de la tabla se indica mediante las tags <tr>.....</tr>. Las tags <th> y <td> con sus correspondientes tags de cierre, indican para indicar las filas individuales dentro de cada fila. Las tags <th>.....</th> indican que se trata de celdas que sirven como encabezado de tabla y suelen visualizarse en negrita. Las tags <td>.....</td> indican que se trata de celdas comunes.
<HEAD>
<TITLE>Ejemplo 10</TITLE>
</HEAD>
<BODY>
<H1>Tablas básicas</H1>
<TABLE BORDER="1">
<TR>
<TH>Cabereca 1</TH>
<TH>Cabereca 2</TH>
<TH>Cabereca 3</TH>
</TR>
<TR>
<TD>Dato 1</TD>
<TD>Dato 2</TD>
<TD>Dato 3</TD>
</TR>
<TR>
<TD>Dato 4</TD>
<TD>Dato 5</TD>
<TD>Dato 6</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Accesorios
Título
Cuando queramos titular una tabla, podemos escribirlo como texto normal o usando las tags <caption>.....</caption>. Las tags de título van dentro de las tags de la tabla y son opcionales, el título no es obligatorio. La tag de apertura puede llevar consigo el atributo align que indicará si el título va encima o debajo de la tabla. align="top" indicaría encima de la tabla y align="bottom" indicaría en la parte de abajo.
Alineación de celdas
Una vez colocadas las celdas, hay que alinear los datos dentro de cada celda. Así, dentro de cada tag de celda podemos encontrar:
- El atributo align= define horizontalmente los datos al margen izquierdo (left), al derecho (right) o centrado (center).
- El atributo valign= define verticalmente los datos en la parte superior (top), en la parte inferior (bottom) o centrado (middle).
Celdas extendidas
Para crear una celda que abarque varias filas o columnas, debemos colocar en las tags <th> o <td> los atributos:
- rowspan= más un valor para indicar el número de filas que se quiere abarcar.
- colspan= más un valor para indicar el número de columnas que se quiere abarcar.
Si opta por poner celdas extendidas en su presentación web, la cosa se complica bastante. Nuestra recomendación: Coja lápiz y papel y dibuje la tabla con todas las filas y columnas que se quieren formar porque así tendrá mucho más claro los valores que debe asignar a los atributos rowspan y colspan y las tags a las que hay que asignarlos.
| < Anterior | Siguiente > |
|---|
