VOLVER
INDICE DE TUTORIALES

.

Tutorial de HTML:
1.- El Lenguaje Html 6.- URLs 11.- Imagenes
2.- Documento html 7.- Listas 12.- Mapas de imágenes
3.- Primeros pasos 8.- Estilos de carácter 13.- Formularios
4.- Tipografía 9.- Saltos y líneas 14.- Lista de ETIQUETAS
5.- Creación de enlaces (links) 10.- Tablas  

10. Tablas

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 etiquetas <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 etiquetas <tr>.....</tr>. Las etiquetas <th> y <td> con sus correspondientes etiquetas de cierre, indican para indicar las filas individuales dentro de cada fila. Las etiquetas <th>.....</th> indican que se trata de celdas que sirven como encabezado de tabla y suelen visualizarse en negrita. Las etiquetas <td>.....</td> indican que se trata de celdas comunes.

<HTML>
<HEAD>
<TITLE>Ejemplo 10</TITLE>
</HEAD>
<BODY>

<H1>Tablas b&aacute;sicas</H1>

<TABLE BORDER="1">
<TR>
   <TH>Cabecera 1</TH>
   <TH>Cabecera 2</TH>
   <TH>Cabecera 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>

Alineación de celdas

Una vez colocadas las celdas, hay que alinear los datos dentro de cada celda. Así, dentro de cada etiqueta de celda podemos encontrar:

1. El atributo align= define horizontalmente los datos al margen izquierdo (left), al derecho (right) o centrado (center).

2. El atributo valign= define verticalmente los datos en la parte superior (top), en la parte inferior (bottom) o centrado (middle).

Espaciado

Podemos modificar el aspecto de la tabla cambiando el ancho de los bordes, el espaciado entre celdas y el ancho de las mismas.

1. width= Acompaña a <table> y especifica el ancho de la tabla, tanto en número de pixeles como en porcentaje respecto al ancho de la pantalla. También puede acompañar a las etiquetas <th> o <td> para especificar el ancho de las columnas.

2. Border= Anteriormente, ya hemos hablado de este atributo. Ahora le diremos que puede darle un valor que indicará el ancho del borde en pixeles. Border="0" indicaría la ausencia de borde.

3. Cellspacing= Suele acompañar a la etiqueta <table>. Indica el número de pixeles que separan cada celda. El valor predeterminado suele ser 2.

4. Cellpadding= También acompaña a la etiqueta <table>. Indica el espacio en pixeles entre el borde de la celda y su contenido. El valor predeterminado suele ser 1.

<HTML>
<HEAD>
<TITLE>Ejemplo 11</TITLE>
</HEAD>
<BODY>

<H1>Tablas avanzadas</H1>

<TABLE WIDTH="50%" BORDER="1" CELLSPACING="3" CELLPADDING="2">
<TR>
   <TD COLSPAN="2" ALIGN="right">Dato 1</TD>
   <TD>Un texto cualquiera</TD>
   <TD ROWSPAN="2">Dato 3</TD>
</TR>
<TR>
   <TD>Dato 4</TD>
   <TD>Dato 4</TD>
   <TD ALIGN="center">Dato 5</TD>
</TR>
</TABLE>

</BODY>
</HTML>

MI CESTA más
0 productos
INFORMACIÓN
Privacidad
Condiciones
Formas de pago

 

http://www.abacocreacion.com
Soluciones Web - Bilbao - Vizcaya - Tel. 94 410 29 71 - Email: info@abacocreacion.com