ATRIBUTOS DE UNA TABLA

El conocimiento de los atributos de una tabla puede considerarse como esencial para la correcta utilización de las tablas:

border="n" Crea un borde alrededor de la tabla de grosor especificado por el valor "n", tomando como unidad el píxel. Teniendo cero como valor por defecto. Cuando comenzamos la realización de una tabla es aconsejable usarlo para ir comprobando que todo funciona como hemos pensado. 

Width="n" el valor "n" indica la anchura de la tabla en pixels (200) o porcentaje (20%). También se puede utilizar este atributo con las celdas <td>

height ="n" el valor "n", asigna la altura de la tabla en pixels o porcentaje.

Align="right / left / center" Alinea horizontalmente la tabla con respecto a su entorno.

Background="nombre_imagen.extension_del formato" Nos permite colocar un fondo para la tabla a partir de un enlace a una imagen.

bgcolor="#ffaabb" indica el color de fondo de la tabla o celda.

bordercolor="#ffffff",define el color del borde.

cellpadding="n",define el espacio, en pixels, entre los bordes de la celda y el contenido de la misma. Por defecto, y si no se especifica, tiene un valor de 1.

cellspacing="x", define el espacio ,en pixels, entre el borde cada una de las celdas y el borde de la tabla. De no especificarse, tiene un valor por defecto de 2.:

Los atributos que modifican a una celda tienen prioridad respecto a los que modifican a una tabla. Por ejemplo podemos aplicar un color azul a una tabla y amarillo para una celda.

Ejemplo (1):

 <table border="1">
   <tr>
     <td > Antonio Perez</td>
     <td> Zaragoza </td>
   </tr>
 </table>
 

se visualizará:

Antonio Perez

Zaragoza

Ejemplo (2):

 <table border="10">
   <tr>
     <td > Antonio Perez</td>
     <td> Zaragoza </td>
   </tr>
 </table>
 

se visualizará:

Antonio Perez

Zaragoza

Ejemplo (3):

 <table border="1" width="100%">
   <tr>
     <td > Antonio Perez</td>
     <td> Zaragoza </td>
   </tr>
 </table>
 

se visualizará:

Antonio Perez

Zaragoza

Ejemplo (4):

 <table border="1" width="200" bgcolor="red">
   <tr>
     <td bgcolor=”yellow”> Antonio Perez</td>
     <td> Zaragoza </td>
   </tr>
   <tr>
    <td> Texto  </td>
     <td> Texto </td>
   </tr>

 </table>
 

se visualizará:

Antonio Perez	Zaragoza
Texto	Texto

Atributos de las celdas

Estos atributos modifican el formato de las filas y/o celdas dependiendo si están en un <tr bgcolor="red"> afectaría a toda la fila o se encuentra en <td bgcolor="yellow"> donde solamente afectaría a la celda. Estos atributos son: bgcolor ="nombre del color / número hexadecimal". Define el color de la celda o fila. bordercolor="nombre del color / número hexadecimal". Define el color del borde de la celda. align="top / middle / bottom". Elegimos el lugar en cual el texto es colocado. Top (arriba),middle(centro) y bottom(abajo) valign="left / center / right". Alineación del texto izquierda (left), centro(center), o derecha (right) Los siguientes atributos sólo pueden ser aplicados a una celda y no al conjunto de celdas que forman una fila. colspan="n". Expande el una celda horizontalmente tantas celdas como el valor asignado a n rowspan="n". Expande una celda verticalmente tanta celdas como el valor asignado a n width="n". El valor n indica la anchura de la tabla en pixels (200) o porcentaje (20%). Este atributo también se puede aplicar a la celdas <td>. height ="n". El valor n, define la altura de la celda en pixels o porcentaje. Ejemplos aplicando lo anterior: Ejemplo (1) : <table border="1"> <tr> <td bgcolor="lime" width="250">Diseño de páginas</td> <td> las tablas </td> </tr> </table> se visualizará: Diseño de páginas las tablas Ejemplo (2): <table border="1"> <tr> <td colspan="3" > Diseño de páginas</td> </tr> <tr> <td> Atributos </td> <td> Celdas </td>< td> las tablas </td> </tr> </table> se visualizará: Diseño de páginas Atributos Celdas las tablas Ejemplo (3): <table border="1"> <tr> <td> Diseño de páginas</td> </tr> <tr> <td rowspan="2"> Atributos </td> <td> Celdas </td> <td> las tablas </td> </tr> <tr> <td> A </td><td> B </td> </tr> </table> Se visualizará: Diseño de páginas Atributos Celdas las tablas A B