Un saludo amigo lector estamos de regreso en un nuevo post de esta serie titulada ¡Da tus primeros pasos en HTML 5!, en esta ocasión para no perder la secuencia de lo que ya hemos tocado, continuaremos con los elementos tabla dentro de HTML. Aprenderemos que son, como se implementan y algunas cosas más, ¡entremos en materia!
Tablas en HTML 5
Una tabla no es otra cosa más que un medio de organizar datos en filas y columnas. Este concepto ha estado presente en nuestra sociedad por un largo período de tiempo y ha sido adoptado por HTML en sus etapas iniciales, como una forma de transmitir información de una manera mucho mas sencilla.
En documentos HTML una tabla puede ser considerada, resumidamente, como un grupo de filas donde cada una contiene a un grupo de celdas. Esto es conceptualmente distinto a un grupo de columnas que contiene a un grupo de filas, y esta diferencia tendrá un impacto en la composición y comportamiento de la tabla.
Veamos un ejemplo de la estructura base de una tabla.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Listas de definiciones</title>
</head>
<body>
<h2>Hola Mundo!</h3>
<h3>Aquí veras una Tabla basica</h5>
<!-- Desde Aquí comienza la maquetación de la tabla -->
<table>
<tr>
<td>Celda 01</td>
<td>Celda 02</td>
<td>Celda 03</td>
</tr>
<tr>
<td>Celda 04</td>
<td>Celda 05</td>
<td>Celda 06</td>
</tr>
</table>
</body>
</html>
Esto tendría que verse de la siguiente manera:
Bueno ahora que ya vimos lo que es una tabla en HTML de una manera muy introductoria vamos a detallar un poco más la información que quiero presentarles.
Celdas de Encabezado
Una celda de encabezado es un tipo especial de celda utilizada para organizar y categorizar otras celdas en la tabla. Es difícil imaginar una tabla donde una celda de encabezado no tenga utilidad.
Para entender más esto veamos en HTML la implementación, en donde lograremos diferenciar una celda de encabezado de una común por dicha implementación ya que la etiqueta que utilizaremos es <th>:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Listas de definiciones</title>
</head>
<body>
<h2>Hola Mundo!</h3>
<h3>Aquí veras una Tabla basica</h5>
<!-- Desde Aquí comienza la maquetación de la tabla -->
<table>
<tr>
<th>Hoy</th>
<th>Mañana</th>
<th>Sábado</th>
</tr>
<tr>
<td>Día Soleado</td>
<td>Mayormente soleado</td>
<td>Parcialmente nublado</td>
</tr>
<tr>
<td>19°C</td>
<td>17°C</td>
<td>12°C</td>
</tr>
<tr>
<td>E 13 km/h</td>
<td>E 11 km/h</td>
<td>S 16 km/h</td>
</table>
</body>
</html>
Esto tendría que verse de la siguiente manera:
Propiedad Colspan
Esta propiedad sino la mas utilizada una de las mas utilizadas si que lo es, ya que en muchos casos queremos crear celdas que que ocupen el tamaño de dos o tres o un número superior a uno, para dar un formato mas avanzado al diseño de la tabla en cuestión. Veamos un ejemplo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Listas de definiciones</title>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<h2>Hola Mundo!</h3>
<h3>Aquí veras una Tabla basica</h5>
<!-- Desde Aquí comienza la maquetación de la tabla -->
<table>
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>
</body>
</html>
Esto tendría que verse de la siguiente manera:
Siempre existirán maneras más complejas para detallar muchos elementos o maquetados en HTML, así como en el caso de las tablas esto no es una excepción, pero aquí solo te muestro la manera básica de maquetar las tablas, y algunos detalles más como el style que se agrego para que pudieras diferenciar las celdas. Pero es cuestión de que te adentres aun más para buscar diferentes etiquetas que te ayuden a lograr cosas más avanzadas y vistosas que puedan cubrir tus necesidades y este caso inicial tus inquietudes.
Cesar Flores