Completo tutorial de HTML - Tablas en HTML. Atributos de la tabla y conclusión

22 - Tablas en HTML. Atributos de la tabla y conclusión

[editar]
Tutorial creado por Indaya.com. Extraido de: http://www.indaya.com
11 de Septiembre de 2005

Además de los atributos específicos de cada celda o línea, las tablas pueden
ser adicionalmente formateadas a partir de los atributos que nos ofrece la
propia etiqueta <table>. He aquí aquellos que pueden parecernos en un principio
importantes:

=========


 align
 Alinea horizontalmente la tabla con respecto a su entorno. 
 
 background
 Nos permite colocar un fondo para la tabla a partir de un enlace a una imagen. 
 
 bgcolor
 Da color de fondo a la tabla. 
 
 border
 Define el número de pixels del borde principal. 
 
 bordercolor
 Define el color del borde. 
 
 cellpadding
 Define, en pixels, el espacio entre los bordes de la celda y el
contenido de la misma. 
 
 cellspacing
 Define el espacio entre los bordes (en pixels). 
 
 height
 Define la altura de la tabla en pixels o porcentaje. 
 
 width
 Define la anchura de la tabla en pixels o porcentaje.
 

Los atributos que definen las dimensiones, height y width, funcionan de una
manera análoga a la de las celdas tal y como hemos visto en el capitulo
anterior. Contrariamente, el atributo align no nos permite justificar el texto
de cada una de las celdas que componen la tabla, sino más bien, justificar la
propia tabla con respecto a su entorno.

Los atributos cellpading y cellspacing nos ayudaran a dar a nuestra tabla un
aspecto más estético. En un principio puede parecernos un poco confuso su uso
pero un poco de practica será suficiente para hacerse con ellos.

En la siguiente imagen podemos ver gráficamente el significado de estos
atributos.

Modelo de Cellpading y Cellspacing

Podéis comprobar vosotros mismos que los atributos definidos para una celda
tienen prioridad con respecto a los definidos para una tabla. Podemos definir,
por ejemplo, una tabla con color de fondo rojo y una de las celdas de color de
fondo verde y se verá toda la tabla de color rojo menos la celda verde. Del
mismo modo, podemos definir un color azul para los bordes de la tabla y hacer
que una celda particular sea mostrada con un borde rojo. (Aunque esto no
funcionará en todos los navegadores debido a que algunos no reconocen el
atributo bordercolor


Tabla de color rojo de fondo El atributo bgcolor de la tabla está en rojo.
Celda normal Esta celda está en verde. tiene el atributo bgcolor en
color verde


 

Tablas anidadas

Muy útil también es el uso de tablas anidadas. De la misma forma que podíamos
incluir listas dentro de otras listas, las tablas pueden ser incluidas dentro de
otras. Así, podemos incluir una tabla dentro de la celda de otra. El modo de
funcionamiento sigue siendo el mismo aunque la situación puede complicarse si el
número de tablas embebidas dentro de otras es elevado.

Consejo: Páginas como DesarrolloWeb.com y muchas otras (La mayoría de las páginas avanzadas) que basan su diseño en tablas, realizan anidaciones de tablas constantemente para meter unos elementos de la página dentro de otros. Se pueden anidar tablas sin límite, sin embargo, en el caso de Netscape 4 hay que tener
cuidado con el número de tablas que anidamos, porque a medida que metemos
una tabla dentro de otra y otra dentro de esta y otra más, aumentando el
grado de anidación sucesivamente... podemos encontrar problemas en su
visualización y puede que la página tarde un poco de tiempo más en mostrarse
en pantalla.


Vamos a ver un código de anidación de tablas. Veamos primero el resultado y
luego el código, así conseguiremos entenderlo mejor.

Celda de la tabla principal









Tabla anidada, celda 1 Tabla anidada, celda 2
Tabla anidada, celda 3 Tabla anidada, celda 4




Este sería el código:

<table cellspacing="10" cellpadding="10" border="3">

<tr>

    <td align="center">

    Celda de la tabla principal

    </td>

    <td align="center">

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

        <tr>

            <td>Tabla anidada, celda 1</td>

            <td>Tabla anidada, celda 2</td>

        </tr>

        <tr>

            <td>Tabla anidada, celda 3</td>

            <td>Tabla anidada, celda 4</td>

        </tr>

        </table>

    </td>

</tr>

</table>



Hasta aquí la información que pretendíamos transmitiros sobre las tablas en
HTML. Sería importante ahora realizar algún ejemplo de realización de una tabla
un poco compleja.

[editar]

30 opiniones

OCHOA

MUY BUENO
bastante buena

:D
mu weno

si señor esto si k mola
amilcar caamal

hasta que porfin alguien hace algo bien GGGGGGGGGG """"bravo""""
aza

muy bien
1 2 3 4 5 6 | siguiente >

Tutoriales relacionados con 'Completo tutorial de HTML'

Bienvenidos al manual de HTML de Indaya.A través de todos estos capítulos vamos a descubrir... Más »
En estas páginas de CSS pretendemos dar a conocer la tecnología con un enfoque práctico... Más »
ASP (Active Server Pages) es la tecnología para la creación de páginas dinámicas del lado... Más »
Este documento describe cómo usar el sistema de spooling para impresoras de líneas que provee... Más »
Hace tiempo que terminé la traducción de un excelente artículo sobre kde-kiosk, la tecnología que... Más »

Autor y licencia de 'Completo tutorial de HTML'


Tutorial de Indaya.com. Extraido de: http://www.indaya.com CopyLeft
Licencia GNU Free Documentation License: http://www.gnu.org/copyleft/fdl.html
Este contenido ha sido recopilado por el equipo de Wikilearning. Todo el contenido recopilado se ha obtenido respetando y comunicando en nuestro site la licencia de cada fuente.
Wikilearning tiene permiso expreso por escrito de los autores para publicar los contenidos que ha extraído de otras webs, incluyendo su uso comercial.