-->
Disponemos en HTML de un grupo de etiquetas que nos permite introducir texto en forma de tablas. Las etiquetas para ello son:
- TABLE: marca el inicio y final de la tabla.
- TR: marca el inicio y final de una fila.
- TH: marca el inicio y final de una celda de cabecera.
- TD: marca el inicio y final de una celda.
- CAPTION: permite insertar títulos en las tablas.
Una tabla simple queda conformada por el siguiente código:
<TABLE>
<TR><TH>Cabecera 1</TH>...<TH>Cabecera n</TH></TR>
<TR><TD>Celda 1.1</TD>...<TD>Celda n</TD></TR>
...
<TR><TD>Celda 1.1</TD>...<TD>Celda n</TD></TR>
<CAPTION>Título</CAPTION>
</TABLE>
Como podemos ver, la tabla queda envuelta dentro de una etiqueta TABLE. Para cada fila de la tabla debemos envolver esta fila entre las etiquetas <TR> y </TR>. En cada fila tenemos dos opciones para mostrar las celdas: podemos envolverlas entre etiquetas o entre etiquetas . La diferencia entre ellas es que la primera selecciona un tipo de letra negrilla y centra la columna.
9.1 Etiqueta TABLE
La etiqueta TABLE tiene algunos atributos que nos permiten especificar más concretamente el formato que queremos darle a la tabla.
- BORDER: nos indica el tamaño de los bordes de la celda.
- CELLSPACING: nos indica el tamaño en puntos del espacio entre celdas.
- CELLPADDING: nos indica el tamaño en puntos entre el contenido de una celda y los bordes.
- WIDTH: especifica el ancho de la tabla. Puede estar tanto en puntos como con relación al porcentaje de la anchura total disponible. Por ejemplo, 100% indica toda la ventana del navegador.
- ALIGN: alinea la tabla respecto a la página, a la izquierda (LEFT), a la derecha (RIGHT) o al centro (CENTER).
- BGCOLOR: especifica el color de fondo de la tabla.
9.2.- Etiqueta TR
La etiqueta TR nos permite introducir las diferentes filas que componen una tabla. TR presenta los siguientes atributos:
- ALIGN: alinea el contenido de las celdas de la fila horizontalmente a izquierda (LEFT), derecha (RIGHT) o centro (CENTER).
- VALIGN: alinea el contenido de las celdas de la fila verticalmente arriba (TOP), abajo (BOTTOM) o centro (MIDDLE).
- BGCOLOR: especifica el color de fondo de la fila.
9.3.- Etiquetas TD y TH
Las etiquetas TD y TH nos permite introducir las celdas que formarán la fila en la que se encuentran. La diferencia principal entre ellas estriba en que TH centra horizontalmente el contenido de la celda y lo muestra en negrillas. Estas dos etiquetas pueden presentar los siguientes atributos:
- ALIGN: alinea el contenido de las celdas de la fila horizontalmente a izquierda (LEFT), derecha (RIGHT) o centro (CENTER).
- VALIGN: alinea el contenido de las celdas de la fila verticalmente: arriba (TOP), abajo (BOTTOM) o centro (MIDDLE).
- BGCOLOR: especifica el color de fondo de la celda.
- WIDTH: especifica el ancho de la celda, en puntos o porcentualmente. En este último caso hay que tener en cuenta que se refiere al ancho de la tabla, no de la ventana.
- NOWRAP: impide que en el interior de las celdas se divida la línea por espacios.
- COLSPAN: específica cuántas celdas, incluyendo esta, se unirán hacia la derecha para formar una sola. Si COLSPAN es cero, todas las celdas se unirán a la derecha.
- ROWSPAN: especifica el número de celdas de la columna situadas debajo de la actual que se unen a ésta.
9.4.- Etiqueta CAPTION
Nos permite añadir una leyenda o título centrado sobre o debajo de una tabla. Disponemos de un solo atributo:
ALIGN: nos indica dónde se situará el CAPTION respecto a la tabla, siendo los posibles valores: TOP, que la sitúa sobre la tabla y BOTTOM, que la sitúa debajo de ella.
CODIGO DE TABLAS:
<HTML>
<HEAD>
<TITLE>Título del documento</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=1>
<TR>
<TD COLSPAN=2>1,1 y 1,2</TD>
<TD>1,3
</TR>
<TR>
<TD ROWSPAN=2>2,1 y 3,1</TD>
<TD>2,2
<TD>2,3
</TR>
<TR>
<TD>3,2</TD>
<TD>3,3</TD>
</TR>
<CAPTION ALIGN=bottom>Tabla Simple</CAPTION>
</TABLE>
<HR> <!-- Regla horizontal -->
<TABLE BORDER=0 CELLSPACING=0 BGCOLOR=#0000FF>
<TR><TD>
<TABLE BORDER=0 CELLSPACING=1 CELLPADDING=2WIDTH=400 BGCOLOR=#FFFFFF>
<TR>
<TH><IMG SRC="logo.gif"></TH>
<TH>Abril</TH>
<TH>Mayo</TH>
<TH>Junio</TH>
<TH>Julio</TH>
</TR>
<TR>
<TD BGCOLOR=#A0A0A0>Vehículos</TD>
<TD>22</TD>
<TD>23</TD>.
<TD BGCOLOR=#FFa0a0>3</TD>
<TD>29</TD>
</TR>
<TR>
<TD BGCOLOR=#A0A0A0>Visitantes</TD>
<TD>1234</TD>
<TD>1537</TD>
<TD BGCOLOR=#FFa0a0>7</TD>
<TD>1930</TD>
</TR>
<TR>
<TD BGCOLOR=#A0A0A0>Ingresos</TD>
<TD>11000</TD>
<TD>13000</TD>
<TD BGCOLOR=#FF4040>-500</TD>
<TD BGCOLOR=#a0a0FF>60930</TD>
</TR>
</TABLE>
</TD></TR>
</TABLE>
</BODY>
</HTML>
Podemos ver en la imagen dos tablas de HTML:
No hay comentarios:
Publicar un comentario