Lenguaje HTML / Tablas
De Wikilibros, la colección de libros de texto de contenido libre.
Son una herramienta muy útil y muy potente para mostrar información de una manera estructurada.
Una aclaración importante:
Las tablas no son una herramienta para maquetar o dar formato a los documentos. Las tablas son para tabular datos.
Los elementos de los que nos serviremos para crearlas son:
Contenido |
[editar] Elementos básicos
[editar] table
(table = tabla)
Es el elemento que define y delimita la tabla.
Sus etiquetas son: <table></table> (ambas obligarorias)
Sus atributos principales son:
- width - anchura de la tabla (valor en pixeles o en porcentaje)
- border - grosor del borde de la tabla (valor en pixeles)
- cellspacing - espacio entre celdas (valor en pixeles)
- cellpadding - espacio entre el contenido y los bordes de la celda (valor en pixeles)
[editar] tr
(table row = fila de tabla, renglón de tabla)
Es el elemento que define y delimita las filas de la tabla.
Sus etiquetas son: <tr></tr>
[editar] td
(table data = datos de tabla)
Es el elemento con el que crearemos las celdas de la tabla.
Sus etiquetas son: <td></td>
Sus atributos principales son:
- align --alineación horizontal.
- valign --alineación vertical.
- colspan-- número de columnas ocupados por la celda.
- rowspan-- número de filas ocupados por la celda.
[editar] Ejemplos
Una tabla básica escrita así:
<table border='1' cellspacing='1' cellpadding='2' width='50%'>
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
<tr><td>5</td><td>6</td></tr>
</table>
Se verá así:
| 1 | 2 |
| 3 | 4 |
| 5 | 6 |
[editar] Elementos de encabezado
[editar] caption
Es el elemento con el que podemos darle un título a la tabla. Debe ir inmediatamente despues de la etiqueta <table>.
Sus etiquetas son: <caption></caption> (ambas obligatorias)
Sus atributos principales son:
align - ¡DESAPROBADO!
[editar] th
Es el elemento con el que crearemos las celdas de encabezado
Sus etiquetas son: <th></th> (la de cierre es opcional ¡úsala de todos modos!)
Sus atributos principales son:
- align - alineacion horizontal
- valign - alineacion vertical
- colspan- número de columnas abarcado por la celda
- rowspan- número de filas abarcado por la celda
[editar] Fusionando celdas
Paras las etiquetas anteriormente mencionadas,<td> y <th> existen atributos para la combinación de celdas, que son:
rowspan: especifica cuantas celdas dentro de una columna serán combinadas colspan: especifica cuantas columnas dentro una fila serán combinadas
Por ejemplo,
<table border=1>
<tr> <td colspan="2">Combinación de columnas</td> </tr> <tr> <td>Columna 1</td> <td>Columna 2</td> </tr>
</table>
| Combinación de columnas | |
| Columna 1 | Columna 2 |
Tendrá como resultado que, en la primera fila, esten combinados las 2 primeras columnas. Tómese en cuenta que, al escribir este atributo(si sólo existen 2 columnas), no se debe de añadir más etiquetas de columnas, caso contrario, se deberá tomar en cuenta la cantidad de celdas de columnas combinadas y las que se quieran agregar.
Para el atributo colspan:
<table border=1>
<tr> <td rowspan="2">Combinación de celdas de filas en una columna</td> <td>Columna2, fila1</td> </tr> <tr> <td>Columna2, fila2</td> </tr>
</table>
| Combinación de celdas de filas en una columna | Columna2, fila1 |
| Columna2, fila2 |
Tendrá como resultado que, en la primera columna, esten combinados las 2 filas definidas. Tómese en cuenta que, al escribir este atributo(si sólo existen 2 filas), no se debe de añadir más etiquetas de columnas, caso contrario, se deberá tomar en cuenta la cantidad de celdas de filas combinadas y las que se quieran agregar.
