Sea protagonista de la Web

Virtualnauta > Tutorial HTML > Tablas

HTML

Tablas de HTML

¿Qué son las tablas de HTML?

Las tablas son una herramienta muy útil para presentar datos de tablas y para el diseño de texto y gráficos de una página HTML.

Características de las tablas

• Definimos las tablas con la etiqueta <table>.
• La tabla está dividida en filas definidas con la etiqueta <tr>.
• Y a su vez cada fila dividida en celdas definidas con la etiqueta <td>.
• Las celdas pueden contener texto, imágenes, formularios, listas, otras tablas, etc.

Bordes de las tablas

Para que se visualicen los bordes de una tabla, debemos agregar el atributo border junto con el valor expresado en pixels, de lo contrario no se verán los bordes que dividen las celdas de la tabla.

Veamos un ejemplo sin bordes

Nota: al no colocar el atributo border, los bordes no se visualizan pero la tabla existe.

Encabezados de las tablas

Los encabezados de una tabla se definen con la etiqueta <th>.

La etiqueta <th> siempre muestra los encabezados remarcados.

Márgenes de las celdas

Es el espacio que se encuentra entre los bordes de la celda y su contenido.
Definimos los márgenes con el atributo cellpadding.

Nota: en este ejemplo podemos observar que el atributo cellpadding deja 20 pixels mínimo entre las palabras dentro de cada celda y los bordes de las mismas.

Espaciado entre celdas

Es el espacio que se encuentra entre celda y celda.
El mismo está definido con el atributo cellspacing.

Nota: en este ejemplo el atributo cellspacing deja un espacio de 15 pixels entre las celdas de la tabla

Etiquetas y atributos de las tablas

Etiquetas	Atributos	Valor	Descripción	Ej
<table>			Define una tabla.
	align Desaprobado	left	Alínea las tablas. Use la propiedad position de CSS en su lugar.
		center
		right
	bgcolor Desaprobado	rgb(x,x,x)	Color de fondo de las tablas. Use la propiedad background de CSS en su lugar.
		#xxxxxx
		nombre_color
	border	pixels	Espesor del borde de la tabla.
	cellpadding	pixels	Espacio entre la pared de la celda y el contenido.
		%
	cellspacing	pixels	Espacio entre celdas.
		%
	frame	void	Especifica cual de los bordes alrededor de la tabla será visible.
		above
		below
		hsides
		lhs
		rhs
		vsides
		box
		border
	rules	none	Especifica las líneas divisorias horizontales y verticales.
		groups
		rows
		cols
		all
	summary	texto	Resumen del contenido de la tabla para navegadores sin visualizador.
	width	%	Especifica el ancho de la tabla.
		pixels
<tr>			Define una fila.
	align	right	Alínea horizontalmente el texto en la celda.
		left
		center
		justify
		char
	bgcolor Desaprobado	rgb(x,x,x)	Color de fondo de las celdas. Use la propiedad background de CSS en su lugar.
		#xxxxxx
		nombre_color
	char	carácter	Especifica que un carácter ("."o",") actúe como eje de alineación. Nota: usar junto con align="char".
	charoff	pixels	Especifica la distancia entre el borde y el primer carácter de alineación en cada línea.
		%
	valign	top	Especifica la posición vertical de los datos dentro de la celda.
		middle
		bottom
		baseline
<td> <th>			Define una celda.
			Define los encabezados de una tabla.
	abbr	texto abreviado	Especifica una versión abreviada del contenido de una celda.
	align	left	Alínea horizontalmente el texto en la celda.
		right
		center
		justify
		char
	axis	nombre de la categoría	Sitúa una celda en categorías conceptuales.
	bgcolor Desaprobado	rgb(x,x,x)	Color de fondo de las celdas. Use la propiedad background de CSS en su lugar.
		#xxxxxx
		nombre_color
	char	carácter	Especifica que un carácter actúe como eje de alineación. Nota: usar junto con align="char".
	charoff	pixels	Especifica la distancia entre el borde y el primer carácter de alineación en cada línea.
		%
	colspan	número	Indica el número de columnas que esta celda debe anexar.
	headers	lista de nombres de celdas	Lista de celdas de encabezado que proporcionan información de encabezado para la celda de datos actual.
	height Desaprobado	pixels	Especifica la altura de la celda. Use la propiedad height de CSS en su lugar.
	nowrap Desaprobado	nowrap	Si está presente, deshabilita el ajuste automático de líneas. Use CSS en su lugar.
	rowspan	número	Indica el número de filas que esta celda debe anexar.
	scope	col	Este atributo especifica el conjunto de celdas de datos para las cuales la celda de encabezado actual proporciona información de encabezado.
		colgroup
		row
		rowgroup
	valign	top	Especifica la posición vertical de los datos dentro de una celda.
		middle
		bottom
		baseline
	width Desaprobado	pixels	Especifica el ancho de la celda. Use la propiedad width de CSS en su lugar.
		%
<caption>			Define el título de la tabla.
	align Desaprobado	top	Ubicación del título con respecto a la tabla. Use la propiedad caption-side de CSS en su lugar.
		bottom
		left
		right
<colgroup> <col>			Crea un grupo explícito de columnas.
			Permite a los autores compartir atributos entre varias columnas.
	align	right	Alínea horizontalmente el contenido en el grupo de columnas.
		left
		center
		justify
		char
	char	carácter	Especifica que un carácter actúe como eje de alineación. Nota: usar junto con align="char".
	charoff	pixels	Especifica la distancia entre el borde y el primer carácter de alineación en cada línea.
		%
	span	número	Especifica el número de columnas de un grupo de columnas.
	valign	top	Alínea verticalmente el contenido en el grupo de columnas.
		middle
		bottom
		baseline
	width	%	Define el ancho del grupo de columnas.
		pixels
		longitud relativa
<thead> <tbody> <tfoot>			Las filas de una tabla pueden agruparse en una cabecera de tabla <thead>, un pie de tabla <tfoot> y una o más secciones de cuerpo de tabla <tbody>.
	align	right	Alínea horizontalmente el texto en la celda.
		left
		center
		justify
		char
	char	character	Especifica que un carácter actúe como eje de alineación. Nota: usar junto con align="char".
	charoff	pixels	Especifica la distancia entre el borde y el primer carácter de alineación en cada línea.
		%
	valign	top	Especifica la posición vertical de los datos dentro de la celda.
		middle
		bottom
		baseline

Atributos estándard

Si desea una descripción completa, diríjase a: atributos estándard.

Eventos intrínsecos

Si desea una descripción completa, diríjase a: eventos intrínsecos.

    Virtualnauta provee del material para uso exclusivo de aprendizaje.
No garantizamos que el contenido sea correcto.
El riezgo por el uso del mismo queda bajo la entera responsabilidad del usuario.
Mientras use este sitio, usted acuerda haber leido y aceptado nuestros términos de uso y privacidad.

Copyright 2007 - 2009 by Martín Solomiak. Todos los derechos reservados.

webmaster@virtualnauta.com