viernes, 8 de octubre de 2010

84 - HTML - Tablas - Atributos “width y height”

¿Como definimos las dimensiones de las tablas?. Muy fácil con los atributos “width” y “height”.

El tamaño de la tabla se define con estos atributos en función del diseño elegido.

width : indica el ancho de la tabla en pixeles o porcentaje.

height : indica a los navegadores el alto de la tabla, al igual que width también se puede indicar su valor en pixeles o en valor porcentual. Su uso ha sido desaprobado recomendándose las hojas de estilo.

Es recomendable no superar los 765 pixeles de ancho para que en pantallas con resolución de 800x600 para que pueda visualizarse todo el contenido.

image

Código de Ejemplo aplicando las características vistas anteriormente: Se ha aplicado un ancho (width) de 200 pixeles y una altura (height) de 100 pixeles. Solamente para que se vea en que punto del código se deben colocar estos atributos.

<html>
  <head>
    <title>Tabla - Alineación vertical de celdas</title>
  </head>
  <body>
       <table width="200" height="100" border="1"  bordercolorlight="red" bordercolordark="maroon" cellspacing="50"

cellpadding="50%">
<tr>
         <th width="20%" >Nombre</th>
         <th width="20%" >Telefono</th>
         <th  width="20%" >Otros</th>
         <th width="20%">Comentarios</th>

      </tr>
      <tr>
         <td  width="20%" align="left">Izquierda</td>
         <td  width="20%" align="right">derecha</td>
         <td  width="20%" align="center">centro</td>
         <td  width="20%" align="justify">texto justificado izq. y derecha</td>

      </tr>
      <tr>
         <td  width="20%" align="left">Izquierda</td>
         <td  width="20%" align="right">derecha</td>
         <td  width="10%" align="center">centro</td>
         <td  width="20%" align="justify">texto justificado izq. y derecha</td>

      </tr>
      <tr>
         <td  width="20%" align="left">Izquierda</td>
         <td  width="20%" align="right">derecha</td>
         <td  width="20%" align="center">centro</td>
         <td  width="20%" align="justify">texto justificado izq. y derecha</td>

      </tr>
   </table>
  </body>
</html>

Puedes probar el código haciendo copiar y pegar. Si tienes guardado el código de la lección anterior solo debes agregar estos nuevos atributos para probarlo.

Temas anteriores de curso HTML gratis
83 - HTML - Tablas - Atributos “cellspacing” y “cellpadding”
82.- HTML – Tablas – Atributos Celdas: "align"
81.- HTML – Tablas – Atributos Celdas: "background – bgcolor – width - height"
mas ... acceder al índice de temas ...

Otros Links:
Piso en Garrucha - Almería € 110.000
Ático en Vera Playa - Almería € 303.500
Ático en Vera Playa - Almería € 300 (Alq.Anual)

No hay comentarios:

Publicar un comentario

Gracias por tu comentario, en un maximo de 48 horas sera publicado.