Vectores En Php
Enviado por AdrianMoreira • 5 de Diciembre de 2014 • 861 Palabras (4 Páginas) • 329 Visitas
CREACIÓN DE TABLAS EN HTML
Desde sus primeras versiones, HTML incluyó el soporte para crear tablas de datos en las páginas web. Además de ser sencillo, el modelo definido por HTML es muy flexible y bastante completo.
Las tablas en HTML utilizan los mismos conceptos de filas, columnas, cabeceras y títulos que los que se utilizan en cualquier otro entorno de publicación de documentos:
Se compone de dos partes: tablas básicas y tablas avanzadas.
Tablas básicas.
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 se muestra el código HTML de una tabla sencilla:
<html>
<head><title>Ejemplo de tabla sencilla</title></head>
<body>
<h2>lista de materias y horarios</h2>
<table>
<tr>
<td><strong>Materia</strong></td>
<td><strong>Credito</strong></td>
<td><strong>Horario</strong></td>
</tr>
<tr>
<td>Aplicaciones web</td>
<td>4</td>
<td>10:00 - 12:00</td>
</tr>
<tr>
<td>Sistemas distribuidos</td>
<td>4</td>
<td>:15:00 - 17:00</td>
</tr>
<tr>
<td>Sistemas Operativos</td>
<td>4</td>
<td>17:00 - 19:00</td>
</tr>
</table>
</body>
</html>
Que nos mostrara en el navegador la siguiente imagen:
Tablas avanzadas.
Las partes que componen las tablas complejas se definen mediante las etiquetas <thead>, <tbody> y <tfoot>. La cabecera de la tabla se define con la etiqueta <thead>, el pie de la tabla se define mediante <tfoot> y cada sección de datos se define con una etiqueta <tbody>.
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:
<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>
...