TABLAS ( Lenguaje de Marcas)

ESTRUCTURAS BÁSICAS:

Una tabla, es una cuadrícula donde insertar información.Donde hay celdas, en sentido horizontal se llaman filas y en vertical columnas. La tabla se crea con la etiqueta: (sin almohadillas)<#table> <#/table>.

Dentro de esta tabla, podemos crear filas que se crean con la etiqueta: (sin almohadillas)<#tr> <#/tr>. I dentro de estas filas crear celdas con la etiqueta: 8sin almohadillas) <#td> <#/td> o <#th> <#/th>. Las TD son celdas básicas y simples, las TH son celdas en negrita y centradas.

Ejemplo:

<#table>

 <#tr>

  <#td>PRUEBA<#/td>

  <#th>PRUEBA2<#/th>

 <#/tr>

<#/table>

Ejemplo gráfico:

PRUEBA	PRUEBA2

ENCABEZADO DE TABLA Y COLUMNAS:

El título en las tablas se crea con la etiqueta :(sin almohadilla)<#caption>TÍTULO<#/caption>. Que se introduce justo después de la etiqueta <#table>, y antes de abrir un <#tr>. Veamos un ejemplo gráfico:

TABLA

Prueba

Prueba2

Aunque también dentro de la tabla se pueden crear títulos, insertados dentro de las celdas con la etiqueta <#th> <#/th>.Veamos un ejemplo:

<#table>

<#caption>TÍTULO<#/caption>

 <#tr>

  <#th>PRUEBA<#/th>

  <#th>PRUEBA2<#/th>

 <#/tr>

Y ahora en modo gráfico

TíTULO

Prueba
Prueba2

En la siguiente imagen podéis ver el código de ejemplo de una tabla con varios formatos

Combinación de celdas:

Para combinar celdas, se puede hacer de dos modos. Dependiendo del tipo de combinación que deseemos realizar.

1. Combinación por columnas: Colspan= "numero" de columnas a combinar en una sola
2. Combinación por filas: Rowspan=" numero" de filas a combinar en una sola

Ejemplo de combinación de 2 columnas en la segunda celda de la primera fila

1	2		3
4	5	6	7

Y ahora un caso contrario en el que aplicaremos La combinación por filas uniremos 2 filas con rowspan.

1	2	3
	4	5	6	7

Si aun así no os ha quedado claro, aquí debajo tenéis una imagen. Ya sabéis lo que dicen, una imagen vale más que mil palabras.

BORDES:

Para conseguir la visibilidad de los bordes de las tablas, podemos poner dentro del STYLE lo siguiente (sin almohadillas):

• table {border-collapse: collapse}
• td { border: thin solid blue (o otro color)
• th { border: thin solid blue (o otro color)