Formato de la página - Hablamos de tablas - Características de las tablas
FORMATEAR CON CSS
por Lino Bertuzzi

Para estudiar esta sección usted debe saber cómo se hace y cómo es la estructura de una página HTML, de lo contrario se debe estudiar el tema (clic) antes de leer este artículo.


Limitarnonos a los conceptos fundamentales, dejando de lado la abundancia de normas de detalle y complejas que rigen su comportamiento. El uso de un tipo de software como Adobe Dreamweaver nos puede ayudar de conocer y utilizar muchas de estas reglas.
FORMATEAR LA PAGINA

Las hojas de estilo página HTML incluyen información tanto para la propia página y de los elementos que están contenidos en el mismo. Una hoja de estilo INCORPORADA se puede escribir directamente entre la etiqueta <head> y </head> con el siguiente código

<style type="text/css">

body {
margin: 0px;
}

# cornice {
padding: 0px; text-align: center; margin: 0 auto;

}

</style>

Pueden luego conectarse a la página web con la siguiente declaración, donde stilenuovo.css es un archivo de hoja de estilo que reside en la carpeta css y contiene el código. Para guardar el código anterior  en un archivo separado se tiene que escribir en la primera línea del archivo @charset "utf-8" y omitir <style type="text/css"> y </style>.

después entre la etiqueta <head> y </head> se inserta el código

<link href="css/stilenuovo.css" rel="stylesheet" type="text/css" />

 

HABLAMOS DE TABLAS Y ESTILO EN LÍNEA

       
       
       

Esta es una tabla de cuatro columnas, y 3 líneas, que se obtiene mediante la redacción de este código, a partir del punto en el que se desea que aparezca la tabla

<table width="90%" border="2" cellspacing="2" cellpadding="2" align="center">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

y aquí está el significado del código

Nombre Original Valor Traducción explicación
<table .......>   Tabla <tabla ... valores >
width "90%" del foglio ancho Anchura total elegida
border "2" borde  en px Espesor del borde en pixels
cellspacing "2" Espacios celdas El espacio entre las celdas en píxeles
cellpadding "2" Acolchado distancia interna entre el contenido de la celda y el borde en píxeles
align "center" alinear alinea la tabla al centro de la página
<tr>     Comienzo de una línea
<td>     Comienzo de una columna
&nbsp;   nuevo espacio blanco El espacio en blanco para mantener la altura de la fila
</td>     final de una colonna
</tr>     Final de una línea

Usted puede atribuir las características de las líneas introduciendo el código de estilo línea por línea

<tr .....style=" .....grandezas y .valores....".>&bnsp</tr>

para cambiar el fondo, letras de fuente, color de texto, etc. Esto también se puede hacer después del comienzo de cada etiqueta donde quiera que se le permite hacer. Por ejemplo, el  <p> que es el inicio de un nuovo párrafo se puede escribir como

<p ...style=" .....grandezas y .valores....".> contenido del párrafo </p>

Un ejemplo lo tenemos aquí por una tabla del código de página que usted está viendo ahora.

<table width="700" border="0" align="left" cellpadding="10" cellspacing="0" style="background-image:url(../../../images/pansoff.png); border-radius:30px;" >

Significado: ancho de la tabla 700px  , sin borde, alineada a la izquierda, acolchado 10px,  no hay espacios entre las celdas, la imágen del fondo de la tabla es pansoff.png, y las esquinas de la tabla están redondeadas con un radio de 30 px.  Se puede también dar los demás valores ancho y padding etc entre el estilo en line en lugar de tenerla separadas..



CARACTERÍSTICAS DE TABLAS

Además de formatear a toda la tabla, o cada celda, las columnas de una linea se pueden combinar (fusionadas - merged en ingles)

       
  2 celdas pre-existentes se han unido  
       

Y aquí está el código a medida que cambia. Pueden ver de sí mismo, a continuación, como cambia el código de las columnas en la segunda fila.

<table width="90%" border="2" cellspacing="2" cellpadding="2" align="center">
<tr>
<td width="24%">&nbsp;</td>
<td width="24%">&nbsp;</td>
<td width="25%">&nbsp;</td>
<td width="27%">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td colspan="2" align="center">2 celdas pre-existentes se han unido</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

Tomemos un ejemplo de cómo adjuntar atributos de estilo a una etiqueta <td>, es decir, una celda

<td width = "301"> <p style = "color: # CC0000; font-size: smaller;"> Aquí escribimos el contenido </ p> </ td>

o incluso

<Td width = "301" style = "color: # CC0000; font-size: smaller;"> Aquí escribimos el contenido</ td>

En todos casos el software DREAMWEAVER nos ayuda con sugerirnos mediante el menú desplegable, que permite de elegir los datos de estilo a ser insertados.
Construir una tabla e insertarla en un punto de la página, así como la edición por insertar y unir filas o columnas, con este software hoy en día es muy fácil.