Atributos para tablas HTML

Conocemos los atributos principales que le podemos asignar a las tablas en el lenguaje HTML de modo general. Además vemos varios ejemplos prácticos de construcción de tablas.

En este artículo vamos a seguir hablando de tablas, con información de diverso tipo. A la parte de los atributos para tablas puedes prestarle poca atención porque básicamente lo que hacen es aplicar estilo a la propia tabla o a sus celdas y estas definiciones actualmente se recomienda incluir en el CSS. Luego pasaremos a ver las tablas anidadas y realizar unas unas prácticas de representación de información tabulada, que sí merece la pena estudiar para afianzar el conocimiento.

A continuación encuentras los más importantes de los atributos específicos para tablas, aunque recuerda que todos están ya en desuso desde la versión del estándar HTML5.

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.

Vamos a poner tres ejemplos de alineado de tablas, centradas, alineadas a la derecha y a la izquierda.

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

Con un poco de práctica 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).

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.

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

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>

Ejemplos prácticos

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. Por ejemplo la siguiente:

Se puede ver el código fuente para generar esa tabla. Pero antes intenta realizarla por ti mismo, que es esencial para poder afianzar el conocimiento. Ten en cuenta también que ciertos estilos colocados en la tabla pueden no funcionar en todos los navegadores. Además, lo que hemos repetido ya innumerables veces: los estilos forman parte de la responsabilidad del CSS.

<table align="center" cellspacing="2" cellpadding="2" border="1" bgcolor=dddddd>
<tr>
    <td colspan="4" align="center" bgcolor="666666"><font color="#FFFFFF"><strong>Animales en peligro de extinción</strong></font></td>
</tr>
<tr bgcolor="aaaaaa">
    <td>Nombre</td>
    <td align="center">Cabezas</td>
    <td align="center">Previsión 2010</td>
    <td align="center">Previsión 2020</td>
</tr>
<tr>
    <td>Ballena</td>
    <td align="center">6000</td>
    <td align="center">4000</td>
    <td align="center">1500</td>
</tr>
<tr>
    <td>Oso Pardo</td>
    <td align="center">50</td>
    <td rowspan="2" colspan="2" align="center" bgcolor="red">0</td>
</tr>
<tr>
    <td>Lince</td>
    <td align="center">10</td>
</tr>
<tr>
    <td>Tigre</td>
    <td align="center">300</td>
    <td colspan="2" align="center">210</td>
</tr>
</table>

Otro ejemplo de tabla con el que podemos practicar. En este caso hemos implementado una anidación de tablas, es decir, dentro de un TD hemos colocado un TABLE completo. Es un buen ejemplo para seguir aprendiendo

También podemos ver su código fuente. Inténtalo tú antes de revelar la solución!

<table cellspacing="4" cellpadding="4" border="1" width=400 bgcolor=dddddd>
<tr>
    <td colspan="2" bgcolor="666666" align="center"><font color="#FFFFFF"><strong>Climas de América del Sur</strong></font></td>
</tr>
<tr>
    <td width="50%">
		<table align="right" cellspacing="1" cellpadding="1" border="1">
		<tr>
		    <td bgcolor="#cccccc" align="center">Venezuela</td>
		</tr>
		<tr>
		    <td bgcolor="#cccccc" align="center">Colombia</td>
		</tr>
		<tr>
		    <td bgcolor="#cccccc" align="center">Ecuador</td>
		</tr>
		<tr>
		    <td bgcolor="#cccccc" align="center">Perú</td>
		</tr>
		</table>
		Parte de arriba de América del Sur. Países como:
	</td>
    <td width="50%">
		<table align="right" cellspacing="1" cellpadding="1" border="1">
		<tr>
		    <td bgcolor="#cccccc" align="center">Argentina</td>
		</tr>
		<tr>
		    <td bgcolor="#cccccc" align="center">Chile</td>
		</tr>
		<tr>
		    <td bgcolor="#cccccc" align="center">Uruguay</td>
		</tr>
		<tr>
		    <td bgcolor="#cccccc" align="center">Paraguay</td>
		</tr>
		</table>
		Parte de abajo de América del Sur. Países como:
	</td>
</tr>
<tr>
    <td bgcolor="#358391">Bosque tropical, clima de sabana, clima marítimo con inviernos secos.</td>
    <td bgcolor="#358391">Climas marítimos con veranos secos, con inviernos secos, climas frios, clima de estepa, clima desértico.</td>
</tr>
</table>

No debes maquetar con tablas

En HTML (antes de la popularización del lenguaje CSS) se utilizan las tablas para maquetar páginas, aparte de mostrar información tabulada como hemos visto en este artículo. Como maquetar nos referimos al proceso por el cual se posicionan contenidos atendiendo a una estructura. Se conoce como maquetación y a la estructura muchas veces se la conoce como layout.

Con las tablas podemos generar una serie de columnas, espacios como cabecera o pie donde podemos mostrar contenidos estructurados que den la sensación de un diseño bien realizado, dividido en columnas y filas, como la maquetación de una revista o un portal. Sin embargo, usar las tablas NO es una práctica recomendada. La maquetación por tablas la comentamos en un taller de HTML. Puedes analizar ese artículo para estudiar cómo se hacían las cosas antes y para practicar con HTML, pero hoy no se hacen las cosas así.

Lo correcto hoy, en páginas actuales que además tienen capacidades medianamente avanzadas y con información bien estructurada, se usa el lenguaje CSS y sus múltiples herramientas para producir un contenido correctamente maquetado. Si te interesa profundizar sobre este tema te recomendamos la lectura del Manual de Maquetación CSS, aunque antes debes aprender el propio CSS.

Autor

Rubén Alvarez

Rubén es doctor en química y programador aficionado con experiencia en PHP.

Compartir

Comentarios

Miguel

28/8/2003
En la explicación de los atributos para tablas pone cellpading le falta una "d" ( Cellpadding), luego mas abajo te viene ya corregido en los ejemplos pero vaya por si alguien no ve los ejemplos y se come el tarro un ratito como yo jajaja...es un fallo que cualquiera lo puede tene. Muy Buen sitio web y seguid asi. :)

CORREGIDO! Muchas gracias.

Marcelo Bonilla

30/4/2004
Hola:
En el primer ejemplo de tablas anidadas el texto contenido en las tablas induce a confusión. La programación es correcta. Propongo lo siguiente:

<table border="1" cellpadding="5" align="center">
<tr>
<td>Celda 1 de la tabla principal</td>
<td>
<table border="1" cellpadding="5" align="center">
<tr>
<td>Fila 1, celda 1 de la tabla anidada</td>
<td>Fila 1, celda 2 de la tabla anidada</td>
</tr>
<tr>
<td>Fila 2, celda 1 de la tabla anidada</td>
<td>Fila 2, celda 2 de la tabla anidada</td>
</tr>
</table>
</td>
</tr>
</table>

Los felicito por el excelente nivel de este curso.
Saludos a todos desde Chile.

Jorge

30/6/2004
En la parte de alineación de tablas, la palabra correcta es align o aling?, gracias amigos.

Respuesta

El atributo se escribe ALIGN. Si aparece de otra manera en el texto del artículo, es una errata.

Dani

15/5/2007
Buenos días.

Tengo un problema-duda: Con IE si hago una tabla con una celda vacía de altura 100% con un color de fondo para que llene lo acepta. Con firefox no me la hace. El problema lo tengo con altura en porcentaje...

Como puedo hacer para firefox para que me llene en altura al 100%?

Gracias!

marce

30/8/2007
me parec q es fantastik su pagina sigan asi bye friends..............

Fabio

01/10/2007
La verdad, muy buena explicacion, y muy detallada. Gracias mr fue muy util. Saludos

monica paredes lozano

20/11/2007
buenas noches:
¿como ?hago para q me salga en una fila tres columnas quisiera que me de un ejemplo mas omenos asi : nombres
manuel torres perez
jose aguirre tenorio
miguel gutierres morante
cada uno separado . espero su respuesta muchas gracias.

10/12/2007
loq tenes q haser no no se como se ase deja hasr una inevstigacion ma profundo y depsues te escrivol rapuesta chao

LIZETH

02/3/2008
si deseo poner una celda pero que esta tenga una diagonal como podria hacerle?

josedavid

29/11/2008
Hola, por favor: Con border se le pone el grosor al borde el grosor al borde de las celdas? Gracias

singusto bienvenido mercado de la paba

05/1/2009
no pueden hacer algio mejor y enten dible maricas

posdata.......
VALEN VERGA

fernando

09/3/2009
+ o - sirve para estudiar el supletorio bacan

web_noob

16/6/2009
ola
Me parece muy ideonea esta pàgina

Me esta sirviendo de mucho

xd

MACKER.NET

29/8/2009
excelente tutorial
vacanes este articulo me parecio muy interesante
aprendi como crear mis primeras tablas en html .gracias..
como recomendacion desearia que dieran un tutorial sobre los diferentes metdos
de enviar informacion en la web (metodo get etc..)
gracias..

Tutor

16/12/2009
Videotutorial
Os dejo por si os interesa un videotutorial del uso de tablas en html.

http://www.vertutoriales.com/index.php/html-uso-de-tablas/

Hasta luego!

Carlos Galdames

19/12/2009
FONDO DE TABLAS
Hola que tal amigos, muy interesante todo, pero tengo un problema les ruego por favor ayudarme, yo estoy diseñando con dreamweaver y con tablas, pero al poner una imágen como fondo de la tabla luego en el explorador no aparece.. ¿ Por qué es esto ?.. como puedo resolverlo? ya que encesito ponerle una imágen de fondo gracias =)

ddskyred

17/1/2010
errata en una tabla?
en la parte donde dice que los atributos de una celda tienen prioridad sobre loos de la tabla yo veo toda la tabla en rojo , pero en las tablas de los ejemplos practicos se ven bien los colores

uso firefox

Fer

22/2/2010
Corrección
Hay un error en la programación del ejercicio práctico de tabla anidada.
Falta el signo "=" (igual) en cellpadding, por lo tanto se omite ese atributo!

Fer

22/2/2010
Corrección (2)
OMITAN el comentario anterior por favor, el código fuente al que hacía referencia con el error de arriba, no es el de la tabla de esta página. Perdón!

oscar flores

10/3/2010
tabla
por que no puede ser asi el código

<table border="1" cellpadding="5" align="center">

<tr>

<td>Celda 1 de la tabla principal
</td>

<td>

<table border="1" cellpadding="5" align="center">

</tr>

<tr>

<td>Fila 1, celda 1 de la tabla anidada
</td>

<td>Fila 1, celda 2 de la tabla anidada
</td>

</tr>

<tr>

<td>Fila 2, celda 1 de la tabla anidada
</td>

<td>Fila 2, celda 2 de la tabla anidada
</td>

</tr>

</table>

</table>

GrinD

27/5/2010
errata en una tabla? Por: ddskyred
Pues si que la hay, he editado el código y se han olvidado una almohadilla, y no se si el explorer lo tolera, pero el firefox no, por lo que recoge el atributo del resto de la tabla y por eso sale en rojo.

Debería poner bgcolor="#009900" en vez de bgcolor="009900"

ana

01/6/2010
no puedo crear una tabla
tengo qe acer una tabla pero tiene qe contener imagenes en ellas pero no puedo podrias ayudarme pliis.

Jesús

05/9/2010
Les dejo un diseño mio de una Página Web en Tablas!! (Se agradece)
<html>

<boby>
<h1 align= "center">
<table border= "2">


<td colspan= "4" align= "center"><h1><br>
</td>

<tr>
<td align= "center"><br>
</td>
<td align= "center"><br>
</td>
<td align= "center"><br>
</td>
<td align= "center"><br>
</td>
</tr>

<tr>
<td align= "center"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p><br><br><br>
</td>

<td rowspan= "2" colspan= "2"><img "width="0" height="0" hspace="340" height="175">
<font size=2 face="arial,verdana">
</font>
</td>

<td rowspan="2"><img "width="0" height="180" hspace="135" height="0"></td>

</tr>

<tr>
<td>
<IMG width= "280" height= "450"><br></td>
</tr>

<tr>
<td colspan= "4" align= "center"><br></td>

</tr>

</table>

</h1>

</body>

</html>

frankbry0

13/9/2011
lo mejor seria asi:
<table border="1" cellpadding="5" align="center">
<tr>
<td background="C:Documents and SettingsAll UsersDocumentosMis imágenesImágenes de muestraPuesta de sol.jpg">Celda 1 de la tabla principal</td>
<td>
<table border="1" cellpadding="5" align="center">
<tr>
<td bgcolor="green"> Fila 1, celda 1 de la tabla anidada </td>
<td bgcolor="red"> Fila 1, celda 2 de la tabla anidada </td>
</tr>
<tr>
<td bgcolor="skyblue"> Fila 2, celda 1 de la tabla anidada </td>
<td bgcolor="yellow"> Fila 2, celda 2 de la tabla anidada </td>
</tr>
</table>
</td>
</tr>
</table>

federicogl

24/8/2012
Tablas Anidadas Sencillas
Hola el mismo ejercicio pero con comentarios para aclara un poco el tema.
Espero les sea de gran ayuda!.

<html>
<head><title>Tablas Anidadas</title></head>

<body>

<!--Creamos la tabla principal-->
<table border="2" align="center" cellpadding="5">

<!--Creamos la Fila 1 de la Tabla principal-->
<tr>
<!--Creamos la Columna 1 de la tabla principal-->
<td>Celda 1 de la Tabla principal</td>

<!--Creamos la columna 2 de la tabla principal-->
<td>
<!--En esta nueva columna anidamos la nueva tabla-->
<table border="1" cellpadding="5" align="center">

<!--Creamos la Fila 1 de la nueva tabla-->
<tr>
<!--Creamos la columna 1 de la nueva tabla-->
<td>Fila 1, Celda 1 anidada</td>
<!--Creamos la columna 2 de la nueva tabla-->
<td>Fila 1, Celda 2 anidada</td>
<!--Cerramos la Fila 1 de la nueva tabla-->
</tr>

<!--Creamos la Fila 2 de la nueva tabla-->
<tr>
<!--Creamos la columna 1 en la fila 2 de la nueva tabla-->
<td>Fila 2, Celda 1 anidada</td>
<!--Creamos la columna 2 en la fila 2 de la nueva tabla-->
<td>Fila 2, Celda 2 anidada</td>
<!--Cerramos la Fila 2 de la nueva tabla-->
</tr>

<!--Cerramos la tabla anidada-->
</table>

<!--Cerramos la columna 2 de la tabla principal-->
</td>

<!--Cerramos la Fila 1 de la Tabla principal-->
</tr>

<!--Cerramos la Tabla principal-->
</table>

</body>
</html>

ronald

02/10/2012
ayuda como hacer una cartelera de películas en html
amigo necesito hacer una cartelera de películas donde se muestren solo 5 fotos de películas por cada fila pero que cada ves que yo le agregue una nueva foto de película a cualquier fila no queden 6 fotos en la misma fila si no que se corra la ultima foto a la siguiente fila a modo de que siempre me queden solo 5 fotos (columnas) por cada fila. por tablas lo puedo hacer? te agradecería que te pasaras por el bloc? utilidadvirtual.blogspot.com en peliculas y me hablaras en el chat de chatago del bloc

Calc Lopez

24/10/2012
como inserto una imagen
disculpen quiero usar la tabla siguiente, pero como le agrego una imagen en donde dice CELDA PRINCIPAL? soy nuevo en esto de paginas, agradeciera su ayuda, gracias.

<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>

jimena

29/4/2013
codigo
y como seria el codigo de la ultima tabla la de los climas de america latina

criyibike

13/6/2013
como hice los ejemplos jajaja hice papa en el segundo
así es como hice los ejemplos sin ver la el codigo de fuente.. después me di cuenta de los errores jejeje pero bueno lo estoy intentando.. que buena pagina loco!!!

aracelly agudelo osorio

09/8/2013
agilidad en el proceso
Creo conveniente que no dejen entrar a nadie sin pagar los $ 90.000, para poder agilizar el proceso, ya que estan tomando posiciones algunos lideres para ganar eso mismo, posicion y estorbar los que realmente queremos llegar ligero, la idea es que todos ganemos rapido y asi poder invitar a mucha gente. gracias por su colaboracion y de esta manera poder entusiasmarnos mas.

atentamente: ara2014 (usuazrio)

RIVE

10/7/2014
desahuevense vagonetas
trabajen ptm ¿que piensan hacer por la vida? ¿creen que todo cae del cielo ?

Pedro Nuñez

19/8/2014
buen trabajo
Este articulo es muy útil si haces un resúmen y muchas gracias (176040455)

DANILE

27/10/2014
AYUDA TENGO QUE HACER UNA TABLA CON COLPASO
SON DOS TABLAS HORIZONTALES YLAS OTRAS VERTICALES Y LA DE LA FINAL HORIZONTAL

andres peres

08/3/2015
etetetretret
es una prqueria
poooooooooooorrrrrrrrrrrrrrqqqqquuuueeeeeeeeeeeeeeerrrrrrrrrrrrrriiiiiiiiiiiiiiiiiaaaaaaaaaaaaa

Mario Olivera

15/3/2015
Mejorar la programacion
Hola, tendrias que mejorar la programacion de ejemplo porque en el ejercicio http://www.desarrolloweb.com/articulos/ejemplos/html/tabla1.html

pones valores center a todas las celdas (3) enves de poner center al <tr align="center"> </td> y poner align="left" a los animales.

Saludos Mario Olivera.

Edsson

22/4/2015
Mi Primer web :)
<html>
<head>
<title> Etiquetas en HTML </title>
</head>
<body bgcolor= "#58FA58">
<font face="GREASE" color = "purple">
<h1><center> Etiquetas HTML </center></h1>
<h2><center> HR </center></h2>
<br>
<p>
La etiqueta "hr" representa una línea horizontal para separar diferentes secciones de un documento.
<br>
<p>
<h2><center> Marquee </center></h2>
<br>
<p>
La etiqueta marquee nos sirve para dar un efecto diferente a los texto de nuestra página web. Gracias a ella podemos conseguir texto en movimiento.
<br>
<p>
<h2><center> Movimiento </center></h2>
<hr>
<marquee>
La etiqueta marquee nos sirve para dar un efecto diferente a los texto de nuestra página web. Gracias a ella podemos conseguir texto en movimiento.
</marquee>
<br>
<p>
<hr>
<marquee direction="right">
La etiqueta "hr" representa una línea horizontal para separar diferentes secciones de un documento.
</marquee>
<hr>
<br>
<p>
<h2><center> Tabla </center></h2>
<center>
<table border="2">
<tr>
<th width="0.5%" bgcolor="red">Nombre 1</th>
<th width="0.5%" bgcolor="#DF7401">Nombre 2</th>
<th width="0.5%" bgcolor="#B404AE">Apellido 1</th>
<th width="0.5%" bgcolor="yellow">Apellido 2</th>
<th width="0.5%" bgcolor="blue">Edad</th>
</tr>
<tr>
<td width="0.5%" bgcolor="red">Edsson</td>
<td width="0.5%" bgcolor="#DF7401">Ardany</td>
<td width="0.5%" bgcolor="#B404AE">Mejia</td>
<td width="0.5%" bgcolor="yellow">Dubon</td>
<td width="0.5%" bgcolor="blue">17</td>
</tr>
<tr>
<td width="0.5%" bgcolor="red">Dilan</td>
<td width="0.5%" bgcolor="#DF7401">Omar</td>
<td width="0.5%" bgcolor="#B404AE">Milla</td>
<td width="0.5%" bgcolor="yellow">Ponce</td>
<td width="0.5%" bgcolor="blue">17</td>
</tr>
</table>
</center>
<br>
<p>
<h2><center> Lista </center></h2>
<ol>
<li>Kevin</li>
<li>Jurgen</li>
<li>Dilan</li>
<li>Gerson</li>
</ol>
<br>
<p>
<h2><center> Link </center></h2>
<a href="http://html-color-codes.info/codigos-de-colores-hexadecimales/">La pagina de los Colores de HTML</a>
<!--Feliz Dia>
</body>
</html>

EL BRAYAN

14/3/2016
el brayan
ELBRAYAN



7w7