Etiquetas para crear una tabla sencilla

Las tablas son una de las herramientas ms potentes del lenguaje HTML ya que, adems de crear las tpicas tablas de datos, permite distribuir el texto y las imgenes en nuestra pgina con una infinidad de posibilidades pero con un sencillo formato. Para crear una tabla sencilla slo necesitamos tres etiquetas:
<table> para definir la tabla <tr> para definir las filas <td> para definir las celdas de cada fila

A continuacin tienes un resumen de las propiedades de estas etiquetas y sus principales atributos. Etiquetas
<table> </table> <tr> </tr> <td> </td> <th> </th>

Inicio y fin respectivamente de la tabla Inicio y fin de una fila Inicio y fin de una celda Inicio y fin de una celda de encabezado. No es obligatoria pudindose utilizar en su lugar <td> Indica el ttulo de la tabla. Por defecto se representa encima de esta, aunque puede cambiarse usando hojas de estilo. Su uso no es obligatorio, pero si se utiliza ha de ir necesariamente despus de la etiqueta <table> Estructura
<table> <tr> <th>Encabezado 1</th> <th>Encabezado 2</th> </tr> <tr> <td>Celda 1.1</td> <td>Celda 1.2</td> </tr> <tr> <td>Celda 2.1</td> <td>Celda 2.2</td> </tr> </table>

<caption> </caption>

Ejemplo Encabezado 1 Encabezado 2 Celda 1.1 Celda 1.2 Celda 2.1 Celda 2.2

Es conveniente estructurar la escritura del cdigo Html metiendo las lneas hacia la derecha al crear tablas, esto ahorrar posteriormente tiempo de bsqueda y permitir trabajar mucho mejor con las pginas

Personalizar los atributos de una tabla

A continuacin tienes un resumen de los posibles atributos con los que personalizar una tabla. Recuerda que puedes, como siempre, utilizar el atributo style para aadir ms efectos, por ejemplo con background-color para cambiar el color de fondo de las celdas. Atributos opcionales para <table>
border[="nmero"] sumary="texto"

Indica si tiene borde y el grosor, si se omite no se muestra. border - muestra el borde por defecto border="10" - muestra un borde de 10 pixels Indica un resumen o una explicacin del contenido de la tabla. Indica la anchura de la tabla. Si indicamos un nmero indica pixels, podemos indicar porcentage poniendo el smbolo % a continuacin width="250" - tabla de 250 pixels de ancho width="90%" - tabla de 90% del ancho de la ventana del navegador Si no se indica este atributo, el navegador establecer el ancho de tabla que crea oportuno segn su contenido.

width="anchura"

cellpadding="nmero" cellspacing="nmero"

Indican respectivamente el espacio entre el borde de las celdas y el contenido de estas y el espacio entre celdas contiguas La imagen de la izquierda representa estos atributos. Indica que bordes del marco de la tabla se mostrarn. Sus posibles valores son: void - Ningn lado. Este es el valor por defecto. above - Slo el borde superior. below - Slo el borde inferior. hsides - Slo los bordes superior e inferior. vsides - Slo los lados derecho e izquierdo. lhs - Slo el lado izquierdo. rhs - Slo el lado derecho. box - Los cuatro lados. border - Los cuatro lados. Indica que bordes de la tabla sern visibles: none - Ninguna lnea de divisin. Este es el valor por defecto. groups - Slo aparecern lneas de divisin entre grupos de filas y grupos de columnas. Ms tarde veremos como se definen estos grupos.

frame="valor"

rules="valor"

cols - Slo aparecern lneas de divisin entre filas. rows - Slo aparecern lneas de divisin entre columnas. all - Se mostrarn todas las lneas. Atributos opcionales para <tr> Indica la posicin horizontal del texto dentro de las celdas de la fila. Sus posibles valores son: left - Alineado a la izquierda. Este es el valor por defecto. right - Alineado a la derecha. center - Centrado. justify - Justificado a izquierda y derecha. char - Alineado alrededor de un caracter. Por defecto es la coma decimal, aunque puede especificarse con el atributo char

align="posicin"

Indica la posicin vertical del texto dentro de las celdas de la fila. Sus posibles valores son: top - Alineado con la parte superior de la celda. valign="posicin" middle - Centrado verticalmente dentro de la celda. Este es el valor por defecto. bottom - Alineado con la parte inferior de la celda. baseline - La primera lnea de cada celda de la fila es comn. char="carcter" Indica el carcter alrededor del cual se alinear el texto de las celdas. Por defecto es la coma decimal. Atributos opcionales para <td> y <th> Indica la posicin horizontal y vertical del texto dentro de las celdas como se align="posicin" explica en atributos de <tr> valign="posicin" La alineacin horizontal por defecto de <th> es center char="carcter" Lo mismo que para los atributos de <tr>. charoff="longitud" rowspan="nmero" colspan="nmero" Se utiliza para fusionar celdas de la misma columna o de la misma fila respectivamente indicando el nmero de celdas a fusionar. Por ejemplo, en esta tabla la celda de ms arriba Atributos opcionales para <td> y <th> tiene un valor colspan="2"

charoff="longitud" Establece la distancia entre el borde y el caracter de alineacin.