Tablas
Páginas: 7 (1688 palabras)
Publicado: 20 de septiembre de 2012
Tablas:
* Las tablas surgieron con la versión HTML 3.0. Permiten representar y ordenar cualquier elemento en diferentes filas y celdas de modo que podamos resumir grandes cantidades de información.
* El contenido de una tabla debe colocarse entre las tags <table>.....</table>.
* Las tablas se definen fila a fila, celda a celda, comenzando desde la celda superiorizquierda.
* Cada fila de la tabla se indica mediante las tags <tr>.....</tr>.
* Las tags <th> y <td> con sus correspondientes cierre, sirven para indicar las celdas 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 (que no son encabezados).
Ejemplos:
<br> <br><table border=1>
<tr>
<td>Campo 1</td>
<td>Campo 2</td>
<td>Campo 3</td>
</tr>
<tr>
<td colspan=2>Campos 4 y 5</td>
<td>Campo 6</td>
</tr>
<tr>
<td>Campo 7</td><td>Campo 8</td>
<td>Campo 9</td>
</tr>
</table>
<br> <br>
<table border=3 width=60%>
<tr>
<td rowspan=3>Campo unificado</td>
<td>Campo 2</td>
<td>Campo 3</td>
</tr>
<tr>
<td>Campo 5</td>
<td>Campo 6</td>
</tr>
<tr>
<td>Campo 8</td><td>Campo 9</td>
</tr>
</table>
<HTML>
<HEAD>
<TITLE>Ejemplo 1</TITLE>
</HEAD>
<BODY>
<H1>Ejemplo 1</H1>
<TABLE>
<TR>
<TH>Encabezado 1</TH>
<TH>Encabezado 2</TH>
<TH>Encabezado 3</TH>
</TR>
<TR>
<TD>Fila 2, celda1</TD>
<TD>Fila 2, celda 2</TD>
<TD>Fila 2, celda 3</TD>
</TR>
<TR>
<TD>Fila 3, celda 1</TD>
<TD>Fila 3, celda 2</TD>
<TD>Fila 3, celda 3</TD>
</TR>
</TABLE>
<H1>Ejemplo 2</H1> Ejemplo 2
<H1>Ejemplo 3</H1> Ejemplo 3
</BODY>
</HTML>* Mostramos algunos atributos de table, válidos en HTML 4, para definir el borde de las tablas: especificar bordes de varios tipos, externos e internos.
* Se puede asignar un borde a las tablas. Para ello utilizábamos el atributo border, pero en HTML 4 existe otros atributos para definir cómo queremos que sean los bordes de las tablas.
Atributos de Tablas |
<table border=#>Coloca contorno en las celdas de la tabla: 1,2,3… |
<table bordercolor=#numhexadecimal o nombrecolor> se aplica también a TR o TH o TD (sólo se visualiza con Internet Explorer)
Coloca color del contorno en las celdas de la tabla |
<table bgcolor=#>, se aplica también a TR o TH o TD
Coloca color de fondo en las celdas de la tabla |
<table cellspacing=#>
Espacio entre lasceldas de una tabla |
<table cellpadding=#>
Espacio entre el contorno de una celda y su contenido |
<table width=# or %>
Ancho de la tabla, en pixeles o porcentaje del ancho de la página |
<table height=# or %>
Alto de la tabla, en pixeles o porcentaje del ancho de la página |
<tr align=?> or <td align=?>
Alineación para las celdas, izquierda derecha,centro (left, right, center) |
<tr valign=?> or <td valign=?>
Alineación vertical de las celdas, arriba, abajo, en medio (top,bottom,middle) |
<td colspan=#>
Expansión de una celda, en número de columnas |
<td rowspan=#>
Expansión de una celda, en número de filas |
… Mas sobre Tablas
-------------------------------------------------
Bordes externos de las...
* Las tablas surgieron con la versión HTML 3.0. Permiten representar y ordenar cualquier elemento en diferentes filas y celdas de modo que podamos resumir grandes cantidades de información.
* El contenido de una tabla debe colocarse entre las tags <table>.....</table>.
* Las tablas se definen fila a fila, celda a celda, comenzando desde la celda superiorizquierda.
* Cada fila de la tabla se indica mediante las tags <tr>.....</tr>.
* Las tags <th> y <td> con sus correspondientes cierre, sirven para indicar las celdas 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 (que no son encabezados).
Ejemplos:
<br> <br><table border=1>
<tr>
<td>Campo 1</td>
<td>Campo 2</td>
<td>Campo 3</td>
</tr>
<tr>
<td colspan=2>Campos 4 y 5</td>
<td>Campo 6</td>
</tr>
<tr>
<td>Campo 7</td><td>Campo 8</td>
<td>Campo 9</td>
</tr>
</table>
<br> <br>
<table border=3 width=60%>
<tr>
<td rowspan=3>Campo unificado</td>
<td>Campo 2</td>
<td>Campo 3</td>
</tr>
<tr>
<td>Campo 5</td>
<td>Campo 6</td>
</tr>
<tr>
<td>Campo 8</td><td>Campo 9</td>
</tr>
</table>
<HTML>
<HEAD>
<TITLE>Ejemplo 1</TITLE>
</HEAD>
<BODY>
<H1>Ejemplo 1</H1>
<TABLE>
<TR>
<TH>Encabezado 1</TH>
<TH>Encabezado 2</TH>
<TH>Encabezado 3</TH>
</TR>
<TR>
<TD>Fila 2, celda1</TD>
<TD>Fila 2, celda 2</TD>
<TD>Fila 2, celda 3</TD>
</TR>
<TR>
<TD>Fila 3, celda 1</TD>
<TD>Fila 3, celda 2</TD>
<TD>Fila 3, celda 3</TD>
</TR>
</TABLE>
<H1>Ejemplo 2</H1> Ejemplo 2
<H1>Ejemplo 3</H1> Ejemplo 3
</BODY>
</HTML>* Mostramos algunos atributos de table, válidos en HTML 4, para definir el borde de las tablas: especificar bordes de varios tipos, externos e internos.
* Se puede asignar un borde a las tablas. Para ello utilizábamos el atributo border, pero en HTML 4 existe otros atributos para definir cómo queremos que sean los bordes de las tablas.
Atributos de Tablas |
<table border=#>Coloca contorno en las celdas de la tabla: 1,2,3… |
<table bordercolor=#numhexadecimal o nombrecolor> se aplica también a TR o TH o TD (sólo se visualiza con Internet Explorer)
Coloca color del contorno en las celdas de la tabla |
<table bgcolor=#>, se aplica también a TR o TH o TD
Coloca color de fondo en las celdas de la tabla |
<table cellspacing=#>
Espacio entre lasceldas de una tabla |
<table cellpadding=#>
Espacio entre el contorno de una celda y su contenido |
<table width=# or %>
Ancho de la tabla, en pixeles o porcentaje del ancho de la página |
<table height=# or %>
Alto de la tabla, en pixeles o porcentaje del ancho de la página |
<tr align=?> or <td align=?>
Alineación para las celdas, izquierda derecha,centro (left, right, center) |
<tr valign=?> or <td valign=?>
Alineación vertical de las celdas, arriba, abajo, en medio (top,bottom,middle) |
<td colspan=#>
Expansión de una celda, en número de columnas |
<td rowspan=#>
Expansión de una celda, en número de filas |
… Mas sobre Tablas
-------------------------------------------------
Bordes externos de las...
Leer documento completo
Regístrate para leer el documento completo.