Tablas
en la web
pueden ser utilizadas
principalmente para listar datos como agendas, resultados y otros datos de una
forma organizada. En general, sirven para representar información tabulada, en
filas y columnas
Tablas
sencillas
Las tablas más sencillas de
HTML se definen con tres etiquetas: <table> para crear la
tabla, <tr> para crear cada fila y <td> para
crear cada columna.
A continuación veremos el código HTML de una tabla
sencilla:
<html>
<head><title>Ejemplo
de tabla sencilla</title></head>
<body>
<h1>Listado
de cursos</h1>
<table>
<tr>
<td><strong>Curso</strong></td>
<td><strong>Horas</strong></td>
<td><strong>Horario</strong></td>
</tr>
<tr>
<td>CSS</td>
<td>20</td>
<td>16:00
- 20:00</td>
</tr>
<tr>
<td>HTML</td>
<td>20</td>
<td>16:00
- 20:00</td>
</tr>
<tr>
<td>Dreamweaver</td>
<td>60</td>
<td>16:00
- 20:00</td>
</tr>
</table>
</body>
</html>
Si se visualiza el código anterior en cualquier
navegador, se obtiene una tabla como la que muestra la siguiente imagen:
Tablas
avanzadas
Algunas tablas complejas
están formadas por más elementos que filas y celdas de datos. Así, es común que
las tablas más avanzadas dispongan de una sección de cabecera, una sección de
pie y varias secciones de datos.
Cada tabla puede contener
solamente una cabecera y un pie, pero puede incluir un número ilimitado de
secciones. Si se define una cabecera y/o un pie, las etiquetas <thead> y/o <tfoot> deben
colocarse inmediatamente antes que cualquier etiqueta <tbody>.
La siguiente imagen muestra
una tabla avanzada con cabecera, pie y una sección de datos:
El código HTML necesario
para crear la tabla de la imagen anterior hace uso de las etiquetas <thead>,<tbody> y <tfoot>:
<html>
<head><title>Ejemplo
de tabla avanzada</title></head>
<body>
<h3>Análisis
de ventas</h3>
<table summary="Análisis
de ventas anuales">
<caption>Análisis de ventas anuales</caption>
<thead>
<tr>
<th rowspan="2" scope="col">AÑO</th>
<th colspan="4" scope="col">Expansión
de ventas</th>
</tr>
<tr>
<th scope="col">Producto
A</th>
<th scope="col">Producto
B</th>
<th scope="col">Producto
C</th>
<th scope="col">Producto
D</th>
</tr>
</thead>
<tfoot>
<tr>
<th rowspan="2" scope="col">AÑO</th>
<th scope="col">Producto
A</th>
<th scope="col">Producto
B</th>
<th scope="col">Producto
C</th>
<th scope="col">Producto
D</th>
</tr>
<tr>
<th colspan="4" scope="col">Expansión
de ventas</th>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row">N-3</th><td>-</td><td>-</td><td>-</td><td>-</td>
</tr>
<tr>
<th scope="row">N-2</th><td>3</td><td>5</td><td>8</td><td>4</td>
</tr>
<tr>
<th scope="row">N-1</th><td>4</td><td>4</td><td>7</td><td>3</td>
</tr>
<tr>
<th scope="row">N</th><td>5</td><td>7</td><td>6</td><td>2</td>
</tr>
</tbody>
</table>
</body>
</html>
Aunque al principio resulta
extraño, el elemento <tfoot> siempre se escribe antes que
cualquier elemento <tbody> en el código HTML. De hecho, si la
etiqueta <tfoot> aparece después de un elemento<tbody>,
la página no se considera válida.
La etiqueta <tbody> permite
realizar agrupaciones de filas, pero en ocasiones se necesitan agrupar
columnas. Aunque su uso no es muy común, HTML define dos etiquetas similares
para agrupar columnas: <col> y <colgroup>.
La etiqueta <col> se
utiliza para asignar los mismos atributos a varias columnas de forma
simultánea. De esta forma, la etiqueta <col> no agrupa
columnas, sino que sólo asigna atributos comunes a varias columnas.
Hipervínculos
Los hipervínculos son una
parte importante de todas las páginas Web ya que nos permiten conectar una
página con otro recurso en la Web. Un hiperenlace, hipervínculo, o vínculo, no
es más que un enlace, que al ser pulsado lleva de una página o archivo.
Aquellos elementos (texto, imágenes, etc.) sobre los que se desee insertar un enlace han de encontrarse entre las etiquetas <a> y </a>.
A través del atributo href se especifica la página a la que está asociado el enlace, la página que se visualizará cuando el usuario haga clic en el enlace. Por ejemplo, para insertar el enlace:
Visita la página ithinkweb.com.mx
Habría que escribir:
<a href="http://www.ithinkweb.commx">Visita
la página ithinkweb.com.mx</a>
Recuperado
de :
No hay comentarios.:
Publicar un comentario