Hablar de tablas en HTML es un tema extenso y complejo, ya que tiene muchas finalidades y propiedades que pueden atribuirsele, creando un objeto divertido en html.

Se le llama tabla a un conjunto de filas donde cada una contiene un grupo de filas.  Pueden insertarse en un HTML con la finalidad de crear listas de precios, productos y clasificados, puede contener textos, imagenes, videos, hipervinculos, o simplemente colores.

La etiqueta para crear tablas es: <table>

Y esta conformada dentro de ella de filas <tr> y celdas <td>

Cada fila puede tener infinidad de celdas, y cada tabla puede tener infinidad de filas.

La sintaxis simple para insertar una tabla en el body de un HTML es:

<table>
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
<td>Celda 3</td>
</tr>
<tr>
<td>Celda 4</td>
<td>Celda 5</td>
<td>Celda 6</td>
</tr>
</table>

Y se veria asi:

——————————> aqui iria la imagen

Cada tabla puede tener diferentes propiedades por ejemplo:

• Ancho: width
  
• Alto: height
• Borde: Estilos de borde: body style: solid, dashed, etc/ border-color.
• Color de fondo: background-color
• Hipervinculos: a href

Ejemplo:

Tabla con propiedad de ancho y alto:

Codigo

<table width=”613″ height=”396″>
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
<td>Celda 3</td>
</tr>
<tr>
<td>Celda 4</td>
<td>Celda 5</td>
<td>Celda 6</td>
</tr>
</table>

Y se veria asi:

————————–> aqui va la imagen

NOTA: Al a;adir una propiedad a la tabla aplicara a TODA la tabla y las propiedades de cada fila y/o celda se veran afectadas, te recomendamos primero crear la tabla y posteriormente decidir que propiedades le das a cada etiqueta.

Encabezados y atritubuto SCOPE

Es un atributo dentro de <td> tomando la etiqueta <th> que es otro tipo de celda, misma que contiene un encabezado dentro de la misma.

Scope, es el atributo que permite crear dentro de TH un texto en negritas que hara que sobresalga como un encabezado:

Ejemplo:

<table>
<tr>
<th scope=”col”>Columna 1</th>
<th scope=”col”>Columna 2</th>
<th scope=”col”>Columna 3</th>
</tr>
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
<td>Celda 3</td>
</tr>
<tr>
<td>Celda 4</td>
<td>Celda 5</td>
<td>Celda 6</td>
</tr>
</table>

Se veria asi:

—————————————-> aqui va la imagen

Las filas pueden tener todas una misma propiedad como un color de fondo, combinando los estilos y diferentes etiquetas en la sintaxis.

Ejemplo:

<table width=”613″ height=”396″>
<tr style=”background-color:#CC99CC”>
<th scope=”col”>Columna 1</th>
<th scope=”col”>Columna 2</th>
<th scope=”col”>Columna 3</th>

</tr>
<tr>
<td>Celda 4</td>
<td>Celda 5</td>
<td>Celda 6</td>
</tr>
</table>

Esta propiedad afecta a toda la fila y a su vez a cada celda

El resultado seria asi:

————————————————-> aqui va la imagen

Sin embargo jugando mas con las tablas, podemos darle a cada celda una propiedad diferente, sin que esto afecte a la fila completa, esto lo hacemos dando propiedades a cada celda por separado,

Ejemplo:

<table width=”613″ height=”396″>
<tr style=”background-color:#CC99CC”>
<th scope=”col”>Columna 1</th>
<th scope=”col”>Columna 2</th>
<th scope=”col”>Columna 3</th>

</tr>
<tr>
<td style=”background-color:#33CCCC”>Celda 4</td>
<td style=”background-color:#CCFF00″>Celda 5</td>
<td style=”background-color:#9966FF””>Celda 6</td>
</tr>
</table>

Resultado:

———————————————–> aqui va la imagen

Los colores de fondo, no son la unica opcion para una tabla, tambien es posible insertar una imagen de fondo, tanto en toda la tabla, como en cada fila.

Imagen de fondo en toda la tabla:

<table width=”613″ height=”396″; background=”file:///C|/Documents and Settings/edna/Desktop/rosablanca.jpg”>
<tr>
<th scope=”col”>Columna 1</th>
<th scope=”col”>Columna 2</th>
<th scope=”col”>Columna 3</th>

</tr>
<tr>
<td>Celda 4</td>
<td>Celda 5</td>
<td>Celda 6</td>
</tr>
</table>

Resultado:

———————————————–> aqui va la imagen

NOTA: La imagen aplica a toda la tabla siempre y cuando ni filas ni celdas contengan ninguna propiedad de fondo.

La imagen puede aplicar unicamente a las filas utilizando la siguiente sintaxis:

<table width=”720″ height=”420″>
<tr style=”background-image: httpdocs/Images/bannersrosablanca.jpg”>
<th scope=”col”>Columna 1</th>
<th scope=”col”>Columna 2</th>
<th scope=”col”>Columna 3</th>

</tr>
<tr>
<td>Celda 4</td>
<td>Celda 5</td>
<td>Celda 6</td>
</tr>
</table>

Resultado:

——————————–> aqui va la imagen

O bien podemos aplicar la imagen en una sola celda:

<table width=”720″ height=”420″>
<tr>
<th scope=”col” style=”background-image:background-image: httpdocs/Images/bannersrosablanca.jpg”>Columna 1</th>
<th scope=”col”>Columna 2</th>
<th scope=”col”>Columna 3</th>

</tr>
<tr>
<td>Celda 4</td>
<td>Celda 5</td>
<td>Celda 6</td>
</tr>
</table>

Resultado:

———————————-aqui va la imagen

NOTA: Es muy importante poner la ruta exacta del archivo, en este caso de la imagen en el HTML, sucede que si ejecutas el codigo en un programa como dream weaver, te pone la URL local de tu computadora, eso al subir una pagina web no funciona, debido a que como hemos mencionado en articulos anteriores, todos los archivos, HTML, fotos, videos, etc deben subirse al servidor de manera ordenada en una carpeta, es por eso que debemos especificar la ruta de la siguiente manera:

Ejemplo: /httpdocs/Images/banners/bannersrosablanca.jpg

httpdocs, se refiere a la carpeta raiz del servidor y dentro de la cual se encuentran otras carpetas en este caso la carpeta Images, en donde se contiene todas las imagenes, que pueden estar clasificadas en otra carpeta, en este ejemplo banners, y posterior el nombre del archivo: bannersrosablanca.jpg y la extension (jpg, gif, png)

Entonces se traduce en:  carpeta raiz/subcarpeta images/ subcarpeta banners/ nombre y extension del archivo.

Bordes en una tabla

Los bordes sirven para resaltar toda la tabla, o cada celda, pueden tener el mismo color o colores diferentes si se trata de las celdas.

Atributo borde aplicado a toda la tabla:

<table style=”border:solid #CC0000″ width=”720″ height=”420″>
<tr>
<th scope=”col”>Columna 1</th>
<th scope=”col”>Columna 2</th>
<th scope=”col”>Columna 3</th>

</tr>
<tr>
<td>Celda 4</td>
<td>Celda 5</td>
<td>Celda 6</td>
</tr>
</table>

Significa:

Table style: estilo de la tabla

Border: borde / Solid: tipo solido y posterior el codigo del color

Resultado:

—————————————–> aqui va la imagen

Borde en cada celda:

<table width=”720″ height=”420″>
<tr>
<th scope=”col” style=”border:dashed #33FF33″>Columna 1</th>
<th scope=”col” style=”border:dotted #9933CC”>Columna 2</th>
<th scope=”col” style=”border:double #FF66CC”>Columna 3</th>

</tr>
<tr>
<td style=”border:groove #FFFF33″>Celda 4</td>
<td style=”border:thick #FF6600″>Celda 5</td>
<td style=”border:solid #333333″>Celda 6</td>
</tr>
</table>

Resultado:

——————————————————> aqui va la imagen

Podemos combinar tambien los colores de fondo con el borde, las tablas te dan una opcion para jugar con el codigo y son una oportunidad para practicar la sintaxis, creando una practica divertida y colorida para tu pagina web.

Ejemplo:

<table width=”720″ height=”420″>
<tr>
<th scope=”col” style=”border:dashed #33FF33; background-color:#336699″>Columna 1</th>
<th scope=”col” style=”border:dotted #9933CC; background-color:#CC66FF”>Columna 2</th>
<th scope=”col” style=”border:double #FF66CC; background-color:#FFFF99″>Columna 3</th>

</tr>
<tr>
<td style=”border:groove #FFFF33; background-color:#00CC33″>Celda 4</td>
<td style=”border:thick #FF6600; background-color:#66FF33″>Celda 5</td>
<td style=”border:solid #333333; background-color:#CC33FF”>Celda 6</td>
</tr>
</table>

Resultado:

——————————————————-> aqui va la imagen

En esta primera parte termimanos lo basico 1 de tablas, en donde incluimos imagenes de fondo, color de fondo, bordes, ancho y alto en una tabla.

Hablar de HTML es un tema extenso y rico en propiedades, tablas incluidas.

En otro articulo indagaremos sobre mas etiquetas y atributos!

Esperalo!