oletusWEBos.es - Lecciones paso a paso para crear tu web. Tutoriales de Dreamweaver, HTML y CSS
Curso HTML - Lección 11: Tablas II
Más atributos para las tablas
Te voy a presentar un par de atributos más para las tablas: colspan y rowspan que los utilizaremos para elaborar tablas más elaboradas con lo cuál sube un poquito la dificultad... pero poco ¿eh? jeje.
Colspan significa "expandir columna" y lo utilizaremos en la etiqueta <td> para especificar cuantas columnas ocupará la celda.
Ejemplo 1:
<table border="1">
<tr>
<td colspan="3">Celda 1</td>
</tr>
<tr>
<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>
</tr>
</table>
que se visualizará de la siguiente manera en nuestro navegador:
| Celda 1 | ||
| Celda 2 | Celda 3 | Celda 4 |
| Celda 5 | Celda 6 | Celda 7 |
Como ves hemos establecido el atributo colspan con un valor de "3" y por eso la celda de la primera fila ocupa tres columnas. Puedes darle a colspan el valor que quieras pero según el valor que le des tantas columnas te ocupará.
rowspan significa "expandir fila" y lo utilizaremos en la etiqueta <td> para especificar cuantas filas ocupará la celda.
Ejemplo 2:
<table border="1">
<tr>
<td rowspan="3">Celda 1</td>
<td>Celda 2</td>
</tr>
<tr>
<td>Celda 3</td>
</tr>
<tr>
<td>Celda 4</td>
</tr>
</table>
y así es como lo veremos en el navegador:
| Celda 1 | Celda 2 |
| Celda 3 | |
| Celda 4 |
Como ves hemos establecido el atributo rowspan con un valor de "3" y por eso la celda de la primera columna ocupa tres filas. Puedes darle a rowspan el valor que quieras pero según el valor que le des tantas filas te ocupará.
Para terminar con las tablas veremos dos atributos más:
- align nos especificará la alineación horizontal del contenido de toda la tabla, de una fila o de una sola celda. Lo haremos con los siguientes valores: left, right o center.
- valign nos especificará la alineación vertical del contenido de una celda. Lo haremos con los siguientes valores: top, middle o bottom.
<td align="center" valign="middle">Celda 1</td>
Si no has entendido algo no dejes de preguntar en nuestro Foro OTW y práctica todo lo aprendido para que no quede en el olvido. Pasemos a la siguiente lección.
Quiero aprender más!!!
- Avanzar a Lección 12: Capas
- Retroceder a Lección 10: ¿Que son las tablas?
©oletusWEBos 2009 all right reserved | Contácta con oletusWEBos.es
Design By: JTole®