Lección 10: Tablas
Las tablas se usan cuando necesitamos mostrar "datos en formato de tabla", o sea, información que se presenta de forma lógica en filas y columnas.¿Es díficil?
Construir tablas con HTML puede parecer, al principio, complicado, pero si no pierdes la calma y andas con ojo, en realidad es de lo más lógico: como todo en HTML.Ejemplo 1:
<table>
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
</tr>
<tr>
<td>Celda 3</td>
<td>Celda 4</td>
</tr>
</table>
Celda 1 | Celda 2 |
Celda 3 | Celda 4 |
¿Qué diferencia hay entre <tr>
y <td>
?
Como observarás en el ejemplo anterior, éste es probablemente el ejemplo más complicado de código HTML que hemos escrito hasta el momento. Vamos a desglosarlo y a explicar las diferentes etiquetas:Para insertar tablas se usan 3 elementos diferentes:
- La etiqueta de inicio
<table>
y la etiqueta de cierre</table>
inician y finalizan la tabla. Lógico. <tr>
es la abreviatura de "table row" (es decir, fila de la tabla) e inicia y finaliza las filas horizontales. Lógico también.<td>
es la abreviatura de "table data" (es decir, datos de la tabla). Esta etiqueta inicia y finaliza cada una de las celdas que componen las filas de la tabla. Todo sencillo y lógico.
<table>
, seguida de <tr>
, que indica el inicio de una nueva fila. Se insertan dos celdas en esta fila: <td>
Celda 1</td>
y <td>
Celda 2</td>
. La fila se cierra a continuación con </tr>
e inmediatemente después se inicia una nueva fila con <tr>
. La nueva fila contiene dos celdas. Y por fin la tabla se cierra con </table>
.Vamos a dejarlo claro: las filas son líneas horizontales de celdas y las columnas son líneas verticales de celdas:
Celda 1 | Celda 2 |
Celda 3 | Celda 4 |
En el ejemplo anterior, la tabla consta de dos filas y dos columnas. Sin embargo, una tabla puede contener una cantidad ilimitada de filas y columnas.
Ejemplo 2:
<table>
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
<td>Celda 3</td>
<td>Celda 4</td>
</tr>
<tr>
<td>Celda 5</td>
<td>Celda 6</td>
<td>Celda 7</td>
<td>Celda 8</td>
</tr>
<tr>
<td>Celda 9</td>
<td>Celda 10</td>
<td>Celda 11</td>
<td>Celda 12</td>
</tr>
</table>
Celda 1 | Celda 2 | Celda 3 | Celda 4 |
Celda 5 | Celda 6 | Celda 7 | Celda 8 |
Celda 9 | Celda 10 | Celda 11 | Celda 12 |
¿Existe algún atributo para el elemento table
?
Por supuesto, hay atributos. Por ejemplo, el atributo border
se usa para especificar el grosor del borde de la tabla:Ejemplo 3:
<table border="1">
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
</tr>
<tr>
<td>Celda 3</td>
<td>Celda 4</td>
</tr>
</table>
Celda 1 | Celda 2 |
Celda 3 | Celda 4 |
Al igual que con las imágenes, se puede establecer el ancho de la tabla en píxeles, o, de modo alternativo, por medio de un porcentaje del ancho de la pantalla:
Ejemplo 4:
<table border="1" width="30%">
¿Hay algún otro atributo?
Para las tablas existen muchos atributos. Aquí mostramos dos más:align
: especifica la alineación horizontal del contenido de toda la tabla, de una fila o de una sola celda. Por ejemplo,left
,center
oright
.valign
: especifica la alineación vertical del contenido de una celda. Por ejemplo,top
,middle
obottom
.
<td align="right" valign="top">Celda 1</td>
¿Qué puedo insertar en las tablas?
En teoría, se puede colocar cualquier cosa dentro de una tabla: texto, enlaces, imágenes, ... Sin embargo, las tablas se usan para presentar datos en forma de tabla (es decir, datos que se pueden presentar de forma coherente en columnas y filas), así que evita colocar cosas dentro de una tabla porque quieras colocarlas una al lado de otra.En los viejos tiempos de Internet -es decir, hace unos años-, las tablas se usaban con frecuencia como herramienta de presentación. Sin embargo, si quieres controlar la presentación de los textos y las imágenes existe un modo más guay de hacerlo (pista: CSS). Pero de eso ya trataremos más adelante.
Ahora, empieza a poner en práctica lo que acabas de aprender y diseña varias tablas de diferentes tamaños, con diferentes atributos y contenido. Esto debería de darte para unas cuantas horas de trabajo.
No hay comentarios:
Publicar un comentario