Diferencia entre revisiones de «Lenguaje HTML/Tablas»
Contenido eliminado Contenido añadido
m trasladó Lenguaje HTML / Tablas a Lenguaje HTML/Tablas: Al incluir los espacios antes y después de la barra, los enlaces "anterior" y "posterior" no terminan de funcionar bien |
m Bot controlado: actualizada sintaxis de tabla; cambios triviales |
||
Línea 6:
Son una herramienta muy útil y muy potente para mostrar información de una manera estructurada.
Una aclaración importante: <br />
Las tablas no son una herramienta para maquetar o dar formato a los documentos.
Las tablas son para tabular datos. <br />
Los elementos de los que nos serviremos para crearlas son:
== Elementos básicos ==
=== '''table''' ===
(table = tabla)<br />
Es el elemento que define y delimita la tabla. <br />
Sus etiquetas son: <'''table'''></'''table'''> (ambas obligarorias)<br />
Sus atributos principales son: <br />
:''width'' - anchura de la tabla (valor en pixeles o en porcentaje) <br />
:''border'' - grosor del borde de la tabla (valor en pixeles) <br />
:''cellspacing'' - espacio entre celdas (valor en pixeles) <br />
:''cellpadding'' - espacio entre el contenido y los bordes de la celda (valor en pixeles) <br />
=== '''tr''' ===
(table row = fila de tabla, renglón de tabla) <br />
Es el elemento que define y delimita las filas de la tabla. <br />
Sus etiquetas son: <'''tr'''></'''tr'''> <br />
=== '''td''' ===
(table data = datos de tabla) <br />
Es el elemento con el que crearemos las celdas de la tabla. <br />
Sus etiquetas son: <'''td'''></'''td'''> <br />
Sus atributos principales son: <br />
:''align'' --alineación horizontal. <br />
:''valign'' --alineación vertical. <br />
:''colspan''-- número de columnas ocupados por la celda. <br />
:''rowspan''-- número de filas ocupados por la celda. <br />
=== Ejemplos ===
Una tabla básica escrita así:
<'''table''' ''border''='1' ''cellspacing''='1' ''cellpadding''='2' ''width''='50%'> <br />
<'''tr'''><'''td'''>1</'''td'''><'''td'''>2</'''td'''></'''tr'''> <br />
<'''tr'''><'''td'''>3</'''td'''><'''td'''>4</'''td'''></'''tr'''> <br />
<'''tr'''><'''td'''>5</'''td'''><'''td'''>6</'''td'''></'''tr'''> <br />
</'''table'''> <br />
Se verá así:
<table border='1' cellspacing='1' cellpadding='2' width='50%'>▼
==Elementos de encabezado==▼
|-
| 1 || 2
|-
| 3 || 4
|-
| 5 || 6
|}
▲== Elementos de encabezado ==
==='''caption'''===▼
Es el elemento con el que podemos darle un título a la tabla. Debe ir inmediatamente despues de la etiqueta <'''table'''>.<br>▼
▲=== '''caption''' ===
Sus etiquetas son: <'''caption'''></'''caption'''> (ambas obligatorias) <br>▼
▲Es el elemento con el que podemos darle un título a la tabla. Debe ir inmediatamente despues de la etiqueta <'''table'''>.<br />
Sus atributos principales son: <br>▼
▲Sus etiquetas son: <'''caption'''></'''caption'''> (ambas obligatorias) <br />
▲Sus atributos principales son: <br />
''align'' - ¡DESAPROBADO!
=== '''th''' ===
Es el elemento con el que crearemos las celdas de encabezado <br />
Sus etiquetas son: <'''th'''></'''th'''> (la de cierre es opcional ¡úsala de todos modos!)<br />
Sus atributos principales son: <br />
:''align'' - alineacion horizontal <br />
:''valign'' - alineacion vertical <br />
:''colspan''- número de columnas abarcado por la celda <br />
:''rowspan''- número de filas abarcado por la celda <br />
== Fusionando celdas ==
Línea 98 ⟶ 102:
</table>
|-
|-
|
|}
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.
Línea 122 ⟶ 124:
</table>
|-
|
|-
|
|}
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.
| |||