Flowchart
BasedeDatos_OrganizadorGraficos_LMSA_5F
Diagrama de flujo: Tablas en HTML
Flowchart content
Tablas
¿QUE ES UNA TABLA?
Las tablas son uno de los elementos fundamentales de HTML para mejorar la puesta visual de las páginas web. Antes de que aparecieran las capacidades de CSS para realizar maquetaciones avanzadas en las páginas web, las tablas eran la única forma de crear documentos HTML con disposiciones complejas.
¿COMO CREAR UNA TABLA?
En HTML cada tabla está asociado a un elemento table, dentro de este elemento se indican las filas mediante el elemento tr y dentro de cada fila se indican las celdas mediante elementos td.
En HTML 5 las etiquetas table y tr no tienen atributos, aunque hay atributos, como por ejemplo el atributo border, que reconocen los navegadores por estar presentes en versiones anteriores de HTML. Es, como siempre, el lenguaje CSS el que determina la apariencia y formato de la tabla.
ELEMENTOS DE MARCADO SEMATICO EN TABLAS
CELDAS DE CABECERA
Es muy habitual que las tablas muestren datos y que estos posean celdas que sirvan para describirles. Esas celdas se consideran de cabecera y se marcan con th.
TITULOS
las tablas se les puede poner un título con ayuda de la etiqueta caption.
<table style=”border:1px solid black”> <caption>Ventas</caption> <tr> <th>Hardware</th> <td>12.190 €</td> </tr>
<tr> <th>Software</th> <td>9.870 €</td> </tr> </table>
En el código se ha utilizado al atributo prohibido border para que quede más claro la forma de considerar el título por parte de los navegadores.
Ejemplo:
<table> <tr> <th> </th> <th>Lunes</th> <th>Martes</th> <th>Miércoles</th> <th>Jueves</th> <th>Viernes</th> </tr> <tr> <th>10:30</th> <td>Matemáticas</td> <td>Geografía</td> <td>Física</td> <td>Dibujo</td> <td>Matemáticas</td> </tr> <tr> <th>11:30</th> <td>Inglés</td> <td>Lenguaje</td> <td>Geografía</td> <td>Química</td> <td>Física</td> </tr> </table>
Ejemplo de tabla:
<table> <tr> <td></td> <td>Lunes</td> <td>Martes</td> <td>Miércoles</td> <td>Jueves</td> <td>Viernes</td> </tr> <tr> <td>10:30</td> <td>Matemáticas</td> <td>Geografía</td> <td>Física</td> <td>Dibujo</td> <td>Matemáticas</td> </tr>
<tr> <td>11:30</td> <td>Inglés</td> <td>Lenguaje</td> <td>Geografía</td> <td>Química</td> <td>Física</td> </tr> </table>
<table style=”border:1px solid black”> <caption>Ventas</caption> <tr> <th>Hardware</th> <td>12.190 €</td> </tr>
<tr> <th>Software</th> <td>9.870 €</td> </tr> </table>
AGRUPACION DE FILAS
Hay tres elementos HTML que sirven para diferenciar las tres partes principales de una tabla, son:
thead. Sirve para indicar las filas que forman la cabecera de la tabla
tfoot. Indica el pie de la tabla
tbody. Indica el cuerpo de la tabla
De esa forma se podrá más adelante dar formato diferencial a cada parte.
Resultado (se ha utilizado border como atributo para visualizar el borde, y un atributo prohibido llamado rules con el valor groups, que nos permite distinguir mejor la agrupación realizada).
Ejemplo de uso:
<table border=”1” rules=”groups”> <caption>Ventas por secciones</caption> <thead> <tr> <td> </td> <td>Hardware</td> <td>Software</td> </tr> </thead>
<tfoot> <tr> <th>Total</th> <th>25000</th> <th>22000</th> </tr> </tfoot>
<tbody> <tr> <th>Enero</th> <td>12000</td> <td>15000</td> </tr> <tr> <th>Febrero</th> <td>13000</td> <td>9000</td> </tr> </tbody> </table>
AGRUPACION DE COLUMNAS
(colgroup, col)
ELEMTO colgroup
Permite realizar agrupaciones de columnas de una tabla con la finalidad de dar un formato homogéneo a cada grupo de columnas indicado. El único atributo permitido en HTML 5 es span que sirve para indicar el número de columnas que agrupamos.
Otra posibilidad, más recomendable, es usar dentro de colgroup elementos col los cuales dan un mayor sentido y son más versátiles.
Esta etiqueta debe de ser la primera de una tabla excepto si se usa título en la tabla (etiqueta caption) en cuyo caso será la segunda.
ELEMENTO col
elemento col
Se usa dentro de la anterior para dar propiedades a cada grupo de columnas realizado. Permite el uso del atributo col para indicar cuántas columnas se incluyen en el grupo.
Ejemplo (usa CSS, para ver mejor la forma de agrupar las columnas y para diferenciar, coloreando en negro, la primera fila):
EJEMPLO:
<table>
<colgroup>
<col style=”background-color: gray”>
<col span=”2” style=”background-color:yellow;”>
</colgroup> <thead>
<tr style=”background-color: black; color:white”>
<th>País</th>
<th>Capital</th>
<th>Otras ciudades</th>
</tr>
</thead>
<tbody>
<tr>
<th>España</th>
<td>Madrid</td>
<td>Barcelona, Zaragoza, Sevilla, Valencia, Bilbao</td>
</tr>
<tr>
<th>Francia</th>
<td>París</td>
<td>Lyon, Marsella, Nantes, Toulouse</td>
</tr>
<tr>
<th>Portugal</th>
<td>Lisboa</td>
<td>Oporto, Coimbra</td>
</tr>
</tbody>
</table>
COMBINAR CELDAS
Es posible unir celdas y de esta forma conseguir tablas de formas caprichosas que permiten una maquetación más poderosa.
Las etiquetas de columna (td y th) son las que poseen los atributos que permiten esta operación. En concreto son los atributos:
atributo
significado
colspan
Combina la celda actual con el número de celdas a la derecha que se indique. Por ejemplo colspan=”3” une esta celda con las dos que tiene a su derecha, formando una combinación de tres celdas en horizontal.
rowspan
Combina la celda actual con el número de celdas hacia abajo que se indique. Por ejemplo rowspan=”3” une esta celda con las dos que tiene hacia abajo, formando una combinación de tres celdas en vertical.
Hay que tener en cuenta que se pueden usar ambos atributos a la vez, lo que permite obtener celdas combinadas de otras columnas y filas a la vez.
Ejemplo de uso:
<!doctype html>
<html lang=”es”>
<head>
<meta charset=”UTF-8”>
<title>Tabla combinada</title>
<style>
table{
width:50%;
}
td{
border:2px solid black;
}
</style>
</head>
<body>
<table> <tr> <td> </td> <td> </td> <td colspan=”2”> </td> </tr> <tr> <td> </td> <td colspan=”2”> </td> <td rowspan=”2”> </td> </tr> <tr> <td rowspan=”3”> </td> <td> </td> <td> </td> </tr> <tr> <td colspan=”3”> </td> </tr> <tr> <td colspan=”3”> </td> </tr> </table>
</body>
TABLAS DENTRO DE TABLAS
Para generar tablas aún más complejas, se pueden meter elementos table, dentro de otras tablas. Lo que se hace es meter una etiqueta table (con todos sus elementos de fila y columna)dentro de un elemento td o th.
Esta combinación permite realizar formatos de tabla a capricho y de esa forma conseguir disposiciones de páginas extremadamente complejas. Hasta la aparición de CSS2 (y especialmente CSS3), esta era la forma de conseguir maquetaciones de páginas web avanzadas.
EJEMPLO:
<!doctype html>
<html lang=”es”>
<head>
<meta charset=”UTF-8”>
<title>Subtablas</title>
<style>
table{
width:50%;
}
table table{
width:100%;
}
td{
border:2px solid black;
}
table table td{
background-color:yellow;
}
</style>
</head>
<body>
<table>
<tr>
<td> </td>
<td> </td>
<td>
<table>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td> </td>
<td>
<table>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>
<table>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</td>
<td> </td>
</tr>
</table>
</body>
</html>
Information
- Description
- Tercero Organizadores Graficos Flowchart on BasedeDatos_OrganizadorGraficos_LMSA_5F, created by LUIS MANUEL SALGADO ALONSO on 25/11/2021.
- Created by
- LUIS MANUEL SALGADO ALONSO
- Views
- 2
- Tags
- Rating