Unidad 6. Tablas (II)


Formato de la tabla

 

Es posible modificar los siguientes atributos de una tabla:

Atributo
Significado
Posibles valores

width

ancho de la tabla

un número, acompañado de % cuando se desee que sea en porcentaje

height
altura de la tabla
un número, acompañado de % cuando se desee que sea en porcentaje
cellpadding
espacio entre el contenido de las celdas y el borde
un número
cellspacing
espacio entre celdas
un número
border
grosor del borde
un número
align
alineación de la tabla dentro de la página
left (izquierda)
right (derecha)
center (centro)
bgcolor
color de fondo
número hexadecimal
background
imagen de fondo
número hexadecimal
bordercolor
color del borde
número hexadecimal

 

Por ejemplo, para modificar la tabla de la página anterior para que quedase como la siguiente:

Sabado Domingo
Curso HTML Curso Dreamweaver
Curso Frontpage Curso Flash

Habría que escribir:

<table width="50%" border="2" align="center" cellspacing="0" bordercolor="#000000" bgcolor="#FFCC99">
  
...
</table>

Con esto indicamos que el ancho (width) de la tabla debe ocupar el 50% del ancho de la ventana (lo puedes comprobar cambiando el ancho de la ventana de tu navegador y verás que el ancho de la tabla varía para ocupar siempre la mitad de la ventana), que el borde (border) tiene un grosor de dos píxeles (es más ancho que las separaciones internas de la tabla que tienen grosor 1), que la tabla está alineada al centro (center) de la ventana, que no hay espacio entre las celdas (cellspacing="0"), que el borde la tabla es negro (#000000) y el fondo naranja (#FFCC99).

Formato de las celdas

 

Es posible modificar los siguientes atributos de una celda:

Atributo
Significado
Posibles valores

width

ancho de la tabla

un número, acompañado de % cuando se desee que sea en porcentaje

height
altura de la tabla
un número, acompañado de % cuando se desee que sea en porcentaje
align
alineación horizontal del contenido de la celda
left (izquierda)
right (derecha)
center (centro)
valign
alineación vertical del contenido de la celda
baseline (línea de base)
bottom (inferior)
middle (medio)
top (superior)
bgcolor
color de fondo
número hexadecimal
background
imagen de fondo
número hexadecimal
bordercolor
color del borde
número hexadecimal

 

También es posible modificar estos atributos de toda una fila, especificándolos en la etiqueta <tr>, en lugar de en la etiqueta <td>.

Hay que tener en cuenta que los atributos tienen más prioridad cuando son establecidos para una celda que cuando son establecidos para una fila completa. Al mismo tiempo, tienen más prioridad los atributos establecidos para una fila que los establecidos para toda la tabla.

Por ejemplo, si escribiéramos el siguiente código:

<table width="50%" border="2" align="center" cellspacing="0" bordercolor="#000000" bgcolor="#FFCC99">
  <tr
align="center" bgcolor="#0099CC">
    <td>
Sabado</td>
    <td
bgcolor="#66CC99">Domingo</td>
  </tr>
  <tr>
    <td>
Curso HTML</td>
    <td>
Curso Dreamweaver</td>
  </tr>
  <tr>
    <td
>Curso Frontpage</td>
    <td>
Curso Flash</td>
  </tr>
</table>

Obtendríamos la siguiente tabla:

Sabado Domingo
Curso HTML Curso Dreamweaver
Curso Frontpage Curso Flash

 

Se ha establecido el color naranja como fondo de toda la tabla, pero con la línea de código <tr align="center" bgcolor="#0099CC"> se ha establecido el color azul como color de fondo de la primera fila, por lo que dicha fila se mostrará de color azul, y no de color naranja. Al mismo tiempo, se ha cambiado el color de la segunda celda de la primera fila por el color verde, a través de la línea <td bgcolor="#66CC99">Domingo</td> por lo que esta fila en vez de ser azul será verde, los atributos de celda tienen prioridad sobre los de la fila.

Existe otro atributo que puede establecerse sobre las celdas. Se trata del atributo nowrap, que hace que el contenido de la celda no se ajuste de manera automática al ancho de la columna sino que el ancho de la celda se adapta al ancho del contenido para que el contenido ocupe una sólo fila. Este atributo no toma ningún valor, simplemente se añade o no a las etiqueta <td>.

 

Atrás  Inicio  Adelante


.