Está en la página 1de 15

1.

7 Tablas en html

Código de las tablas en html

Otra forma de estructurar la web distinta de las capas son las tablas. El menú de navegación lo
vamos a hacer por medio de tablas, pero primero vamos a ver cómo se hacen estas tablas.

Una tabla está dividida en filas y columnas, por ejemplo, esto es una tabla de dos filas y cuatro
columnas:

Celda 1 Celda 2 Celda 3 Celda 4

Celda 5 Celda 6 Celda 7 Celda 8

Como podeis ver a cada casilla de una tabla se le llama celda. Pues bien, para abrir una tabla
usamos el código <table>, y para cerrarla usamos </table>. En una tabla además tenemos que
indicar si tiene bordes y cómo son estos bordes. Para ello lo incluimos dentro del código de la tabla
de la siguiente forma (ahora os explico para qué es cada cosa):

<table border="1" cellpadding="0" cellspacing="0">


</table>

Podemos ver tres cosas:

1. Border, que se utiliza para indicar el grosor del borde. Si no queremos que tenga borde
sólo tenemos que ponerlo a 0.

2. Cellpadding, que es el padding de las celdas, es decir, el margen interior. Esto también se
puede indicar en la hoja de estilos como ya hemos aprendido.

3. Cellspacing. Como podemos ver si nos fijamos con detalle el borde de una tabla está
formada por dos líneas. Cellspacing es la distancia entre estas dos líneas, de forma que el
valos de ésta características se sumará a la del borde, haciéndolo más grande.

Pues bien, continuemos con la creación de las tablas. Una vez puesta la etiqueta de la tablas
tenemos que poner las filas, y luego las columnas (siempre hay que poner las columnas dentro de
las filas y no al revés). Para poner una fila la abrimos con <tr> y la cerramos con </tr>. Al igual,
para abrir una columna usamos <td> y para cerrarla </td>. Dentro de las filas ya ponemos lo que
queramos de contenido.

De esta forma, la tabla que os enseñé antes, que tiene cuatro columnas y dos filas, con un borde
de 1 píxel, y que dentro de las celdas tienen un texto escrito se haría así:

<table border="1" cellpadding="0" cellspacing="0">


<tr>
<td>Celda 1</td>
<td>Celda 2</td>
<td>Celda 3</td>
<td>Celda 4</td>
</tr>
<tr>
<td>Celda 5</td>
<td>Celda 6</td>
<td>Celda 7</td>
<td>Celda 8</td>
</tr>
</table>

Creando el menú de navegación

Pues bien, una vez dicho esto vamos a crear nuestro menú de navegación. Vamos a meter nuestra
tabla en un div al que le vamos a poner los estilos, pero también podeis ponerle los estilos a los td.
Pues bien, vámonos a la hoja de estilos y vamos a definir un estilo al que llamaremos navegacion.
A este estilo vamos a ponerle que tenga un margen por abajo de 4 píxeles y que tenga de color de
fondo un color azul oscuro (#000066). De esta forma tenemos que agregar la siguiente línea en la
hoja de estilos:

#navegacion {margin: 0px 0px 4px 0px; background-color: #000066}

Ahora vámonos a la hoja html y vamos a crear el div con el estilo de navegación justo después de
cerrar el div de cabecera:

<body>

<div id="fondo">
<div id="global">

<div id="cabecera">
<div id="logotipo">
<img src="imagenes/site_logo.gif" alt="Tu web de informática">
</div>
<div id="banner"></div>
</div>

<div id="navegacion">
</div>

<p>Aquí va lo que se ve</p>


<p>Ésta es otra línea</p>
</div>
</div>

</body>

Ahora vamos a crear una tabla dentro de este div, y vamos a ponerle las siguiente características:

1. La tabla no va a tener bordes y su tamaño va a ser el 100% del div (esto se pone
introduciendo en la etiqueta table el código width="100%").

2. Va tener una fila y cuatro columnas.

3. Cada fila va a medir lo mismo, es decir, un 25% de lo que mide la tabla

4. En las celdas vamos a escribir las palabra Indice - Seccion 1 - Seccion 2 - Seccion 3

5. Las celdas van a centrar el texto de dentro de ellas, lo que se hace introduciendo el código
align="center" en la etiqueta td.

De esta forma el div de navegacion nos quedaría así:

<div id="navegacion">
<table width="100%" border="0">
<tr>
<td width="25%" align="center">Índice</td>
<td width="25%" align="center">Sección 1</td>
<td width="25%" align="center">Sección 2</td>
<td width="25%" align="center">Sección 3</td>
</tr>
</table>
</div>

De esta forma nuestra web por ahora queda así. Si os fijais no se ve bien el texto de dentro de la
tabla, porque es negro, pero cuando pogamos que sean enlaces en el siguiente capítulo se verán
bien. Si hay algo que no te sale o tienes alguna duda tienes el foro a tu disposición para
preguntarnos.
Como veremos a continuación, existen diversas etiquetas que se deben utilizar en una forma

determinada para la creación de tablas. Por ello, puede que en un principio nos resulte un poco

complicado trabajar con estas estructuras pero, con un poco de práctica podremos crear tablas

con absoluta soltura. Si deseamos mostrar datos de una manera sencilla de leer, dispuestos en

filas y columnas, tarde o temprano observaremos que las tablas son la mejor solución y
apreciaremos las posibilidades nos ofrecen.

Para empezar, nada más sencillo que por el principio: las tablas son definidas por las etiquetas
<table> y </table>.

Dentro de estas dos etiquetas colocaremos todas las otras etiquetas, textos e imágenes que
darán forma y contenido a la tabla.

Las tablas son descritas por líneas de izquierda a derecha. Cada una de estas líneas es definida
por otra etiqueta y su cierre: <tr> y </tr>

Asimismo, dentro de cada línea, habrá diferentes celdas. Cada una de estas celdas será definida

por otro par de etiquetas: <td> y </td>. Dentro de estas etiquetas será donde coloquemos
nuestro contenido.

Aquí tenéis un ejemplo de estructura de tabla:

<table>

<tr>

<td>Celda 1, linea 1</td>

<td> Celda 2, linea 1</td>

</tr>

<tr>

<td> Celda 1, linea 2</td>

<td> Celda 2, linea 2</td>

</tr>

</table>

El resultado:

Celda 1, linea 1 Celda 2, linea 1


Celda 1, linea 2 Celda 2, linea 2

Nota: Hasta aquí hemos visto todas las etiquetas que necesitamos conocer para crear tablas. Existen otras

etiquetas, pero lo que podemos conseguir con ellas se puede conseguir también usando las que hemos visto.

Por poner un ejemplo, señalamos la etiqueta <th>, que sirve para crear una celda cuyo contenido esté

formatedo como un título o cabecera de la tabla. En la práctica, lo que hace es poner en negrita y centrado

el contenido de esa celda, lo que se puede conseguir aplicando las correspondientes etiquetas dentro de la

celda. Así:

<td align="center"><b>contenido de la celda</b></td> .

A partir de esta idea simple y sencilla, las tablas adquieren otra magnitud cuando les

incorporamos toda una batería de atributos aplicados sobre cada tipo de etiquetas que las

componen. A lo largo de los siguientes capítulos nos adentraremos en el estudio de estos

atributos de manera a proporcionaros los útiles indispensables para una buena puesta en
página.

Podemos continuar las explicaciones de tablas en los artículos:

- Atributos para filas y celdas

- Atributos de la tabla y conclusión


- Bordes de tabla en HTML 4

Adicionalmente, queremos destacar la existencia de un vídeo que trata sobre varios de los temas
explicados en este y los próximos artículos: Videotutorial sobre las tablas en HTML.
Cuadro con título y borde
Se ve igual en:

En este recorte hemos hecho una caja con un título y un borde alrededor de la caja, puede
cambiar los valores cellpadding="1" para variar el grosor del borde la caja.

Recorte

Titular del cuadro


Ponga aqui el contenido del
cuadro

Código HTML
<table width="220" border="0" cellspacing="0" cellpadding="1">
<tr bgcolor="#990033" align="center">
<td><b><font color="#FFFFFF">Titular del cuadro</font></b></td>
</tr>
<tr bgcolor="#990033">
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="4">
<tr bgcolor="#FFFFFF">
<td>Ponga aqui el contenido del cuadro</td>
</tr>
</table>
</td>
</tr>
</table>
Usando unos gráficos sencillos podemos aumentar mucho la calidad visual de nuestro sitio,
este recorte esta hecho para que se adapte al contenido de caja, independientemente del ancho
y alto del contenido siempre se visualiza correctamente.

Gráficos

Recorte

Puede poner aquí todo el contenido que quiera, el ancho de la caja se


adapta al contenido de la misma.

Código HTML
<table border="0" cellspacing="0" cellpadding="0" width="80%">
<tr>
<td valign="bottom"><img src="/graficos/rec301.gif" width="8" height="8"></td>
<td background="/graficos/rec302.gif" valign="bottom"><img src="/graficos/rec302.gif"
width="3" height="8"></td>
<td valign="bottom"><img src="/graficos/rec303.gif" width="15" height="8"></td>
</tr>
<tr>
<td background="/graficos/rec308.gif">&nbsp;</td>
<td bgcolor="#FFE5A8">

Puede poner aquí todo el contenido que quiera, el ancho de la caja se adapta al contenido
de la misma.

</td>
<td background="/graficos/rec304.gif">&nbsp;</td>
</tr>
<tr>
<td valign="top" height="2"><img src="/graficos/rec307.gif" width="8" height="17"></td>
<td background="/graficos/rec306.gif" height="2"><img src="/graficos/rec306.gif" width="4"
height="17"></td>
<td valign="top" height="2"><img src="/graficos/rec305.gif" width="15" height="17"></td>
</tr>
</table
º

Margenes de una página web


Marzo 10, 2007 por Víctor Cuervo . 16217 visitas 13 Comentarios Imprimir

Mediante las hojas de estilo CSS podemos modificar los margenes de nuestra página web.
Esto hará que nuestro contenido se posicione en un lugar u otro de la página. Lo podremos
pegar al borde superior, separarlo de la izquierda,... Todo aquello que necesitemos para darle
estilo a la página web.

Si queremos modificar los margenes deberemos de utilizar cuatro propiedades CSS:

o margin-bottom, para el margen inferior.


o margin-left, para el margen izquierdo.
o margin-right, para el margen derecho.
o margin-top, para el margen superior.

Estas propiedades CSS se las podemos asignar a cualquier elemento HTML. Si bien, para
nuestro caso se lo asignaremos al cuerpo de la página. Es decir, al elemento BODY.

De esta manera, el código CSS quedaría de la siguiente forma:

<style type="text/css">
body{
margin-left: 0px;
margin-right: 10px;
margin-top: 0px;
margin-bottom: 10px;
}
</style>

En el caso de que queramos asignar el mismo valor a todos los margenes podemos utilizar
directamente el atributo margin, asignándole un valor.

En este punto el código quedaría de la siguiente forma:

<style type="text/css">
body{
margin: 10px;
}
</style>

Visualizar el ejemplo | Descargar el código


Lección 10: Margen y relleno (padding)
En la lección anterior te presentamos el concepto de modelo de caja. En ésta,
examinaremos cómo cambiar la presentación de los elementos estableciendo las propiedades
margin y padding.

 Establecer el márgen de un elemento


 Establecer el relleno de un elemento

Establecer el márgen de un elemento


Todo elemento tiene cuatro lados: derecho, izquierdo, superior e inferior. La propiedad
margin hace referencia a la distancia desde cada lado respecto al elemento colindante (o
respecto a los bordes del documento). Véase el diagrama de la leccion 9 para ver una imagen
ilustrativa.

En un primer ejemplo, veremos cómo definir los márgenes del documento en sí, es decir,
del elemento <body>. La imagen siguiente muestra cómo queremos que sean los márgenes de
nuestras páginas.

El código CSS necesario para esto es el siguiente:

body {
margin-top: 100px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px;
}

O podrías elegir usar la versión combinada de margin, que queda como más elegante:

body {
margin: 100px 40px 10px 70px;
}

 Ver ejemplo

Se puede establecer los márgenes de casi todos los elementos del mismo modo. Por
ejemplo, podemos elegir definir márgenes para todos los párrafos de texto marcados con el
elemento <p>:

body {
margin: 100px 40px 10px 70px;
}

p {
margin: 5px 50px 5px 50px;
}

 Ver ejemplo

Establecer el relleno de un elemento


La propiedad padding puede entenderse como "relleno". Esto tiene sentido puesto que el
relleno (padding) no afecta a la distancia de un elemento respecto a otros elementos, sino que
sólo define la distancia interior entre el borde y el contenido del elemento.

El uso de la propiedad padding se puede ilustrar viendo un sencillo ejemplo en el que


todos los títulos tienen diferentes colores de fondo:

h1 {
background: yellow;
}

h2 {
background: orange;
}

 Ver ejemplo

Al deninir el padding para los títulos, cambiamos la cantidad de "relleno" que habrá
alrededor del texto en cada uno de ellos:

h1 {
background: yellow;
padding: 20px 20px 20px 80px;
}

h2 {
background: orange;
padding-left:120px;
}

 Ver ejemplo

Resumen
Ya estás en el camino de dominar el modelo de caja en CSS. En la siguiente lección,
examinaremos cómo establecer los bordes con colores diferentes y cómo dar forma a tus
elementos.
Las listas representan uno de los instrumentos más difundidos para
organizar la información dentro de los sitios web. Una de sus características
principales es la de proporcionar un cuadro claro y sintético del tema
tratado.
HTML pone a disposición distintos tipos de listas. A continuación,
analizaremos cada uno de ellos.

Listas ordenadas

Las listas ordenadas constan de una sola marca de apertura y cierre


<OL></OL> y tantas marcas de lista como voces hay en el menú <LI>. La
sintaxis correcta para elaborar listas ordenadas es:

<OL>
<LI> Primera voz del menú
<LI> Segunda voz del menú
<LI> Tercera voz del menú
</OL>

Para un ejemplo práctico, haz clic aquí

1. Primera voz del menú


2. Segunda voz del menú
3. Tercera voz del menú

En el ejemplo notamos cómo es posible omitir la marca <BR> para el salto


de línea, dado que está automáticamente incluido en <LI>. Si no se
establece diversamente (como veremos a continuación), el tipo de lista
ordenada que el navegador visualiza está numerada (es decir, la lista consta
de una serie de números que parte del 1 y va aumentando
progresivamente). Las últimas versiones de HTML prevén la posibilidad de
listas ordenadas que contengan un sistema de ordenación diverso del
numérico antes citado:

Ordenación con letras mayúsculas:

<OL TYPE=A>
<LI> Primera voz del menú
<LI> Segunda voz del menú
<LI> Tercera voz del menú
</OL>

Ordenación con letras minúsculas:

<OL TYPE=a>
<LI> Primera voz del menú
<LI> Segunda voz del menú
<LI> Tercera voz del menú
</OL>

Ordenación con números romanos en mayúscula:

<OL TYPE=I>
<LI> Primera voz del menú
<LI> Segunda voz del menú
<LI> Tercera voz del menú
</OL>

Ordenación con números romanos en minúscula (romanitos):

<OL TYPE=i>
<LI> Primera voz del menú
<LI> Segunda voz del menú
<LI> Tercera voz del menú
</OL>

Para un ejemplo práctico, haz clic aquí

A. Primera voz del menú


B. Segunda voz del menú
C. Tercera voz del menú

a. Primera voz del menú


b. Segunda voz del menú
c. Tercera voz del menú

I. Primera voz del menú


II. Segunda voz del menú
III. Tercera voz del menú

i. Primera voz del menú


ii. Segunda voz del menú
iii. Tercera voz del menú
Listas desordenadas

Las listas desordenadas funcionan de manera similar a las ordenadas. La


diferencia básica es que en el caso de las listas desordenadas no existen
relaciones jerárquicas entre los elementos del elenco, por lo cual no se
prevén ordenaciones progresivas como las obtenidas mediante números o
letras.

Las listas desordenadas constan de una sola marca de apertura y cierre


<UL></UL> y tantas marcas de lista como voces hay que ordenar <LI>. La
sintaxis correcta para definir una lista desordenada es:

<UL>
<LI> Primera voz del menú
<LI> Segunda voz del menú
<LI> Tercera voz del menú
</UL>

Para un ejemplo práctico, haz clic aquí

 Prima voce di menu


 Seconda voce di menu
 Terza voce di menu

Si no se especifica diversamente, cada voz del elenco va precedida de un


símbolo geométrico.
Al igual que para las listas ordenadas, también en este caso podemos
indicar diversos tipos de símbolos:

Los círculos sólidos de la lista anterior se obtienen con disc:

<UL TYPE=disc>
<LI> Primera voz del menú
<LI> Segunda voz del menú
<LI> Tercera voz del menúº
</UL>

El atributo circle imposta circunferencias:

<UL TYPE=circle>
<LI> Primera voz del menú
<LI> Segunda voz del menú
<LI> Tercera voz del menú
</UL>
El atributo square imposta listas definidas por cuadrados sólidos:

<UL TYPE=square>
<LI> Primera voz del menú
<LI> Segunda voz del menú
<LI> Tercera voz del menú
</UL>

Para un ejemplo práctico, haz clic aquí

 Primera voz del menú


 Segunda voz del menú
 Tercera voz del menú

o Primera voz del menú


o Segunda voz del menú
o Tercera voz del menú

 Primera voz del menú


 Segunda voz del menú
 Tercera voz del menú