Tablas de HTML

Las usamos para componer un sitio o simplemente como tabla de datos.


Las tablas

Las tablas son herramientas muy útiles para presentar datos en forma de tablas y para el diseño de páginas y ubicación de textos y gráficos dentro de las mismas.

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.


Sintaxis

<table>
<tr>
<td>contenido celda 1</td>
<td>contenido celda 2</td>
</tr>
</table>

Ejemplo

Vamos a crear una pequeña tabla para ver su comportamiento

Código
<table border="1px">
<tr>
<td>Nombre</td>
<td>Apellido</td>
</tr>
<tr>
<td>Pedro</td>
<td>Garcia</td>
</tr>
</table>
Resultado
Nombre Apellido
Pedro Garcia

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.

Ejemplo

Código
<table border="3px">
<tr>
<td>Borde</td>
<td>3 pixels</td>
</tr>
</table>
Resultado
Borde 3 pixels

Veamos un ejemplo sin bordes

Ejemplo

Código
<table>
<tr>
<td>Esta tabla es</td>
<td>Sin bordes</td>
</tr>
</table>
Resultado
Esta tabla es 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>.

Ejemplo

Código
<table border="1px">
<tr>
<th>Nombre</th>
<th>Apellido</th>
</tr>
<tr>
<td>Pedro</td>
<td>Garcia</td>
</tr>
<tr>
<td>Juan</td>
<td>Perez</td>
</tr>
</table>
Resultado
Nombre Apellido
Pedro Garcia
Juan Perez
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.

Ejemplo

Código
<table border="1px" cellpadding="20px">
<tr>
<th>Nombre</th>
<th>Apellido</th>
</tr>
<tr>
<td>Pedro</td>
<td>Garcia</td>
</tr>
</table>
Resultado
Nombre Apellido
Pedro García
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.

Ejemplo

Código
<table border="1px" cellspacing="15px">
<tr>
<th>Nombre</th>
<th>Apellido</th>
</tr>
<tr>
<td>Pedro</td>
<td>Garcia</td>
</tr>
</table>
Resultado
Nombre Apellido
Pedro Garcia
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. Sin ejemplo
center Sin ejemplo
right Sin ejemplo
bgcolor
Desaprobado
rgb(x,x,x) Color de fondo de las tablas. Use la propiedad background de CSS en su lugar. Sin ejemplo
#xxxxxx Sin ejemplo
nombre_color Sin ejemplo
border pixels Espesor del borde de la tabla. Ejemplo que define el borde exterior de la tabla
cellpadding pixels Espacio entre la pared de la celda y el contenido. Ejemplo que define el espacio entre contenido y borde de celda en pixels
% Ejemplo
cellspacing pixels Espacio entre celdas. Ejemplo que define el espacio entre diferentes celdas en pixels
% Ejemplo que define el espacio entre diferentes celdas en porcentajes
frame void Especifica cual de los bordes alrededor de la tabla será visible. Ejemplo que no muestra líneas de la tabla
above Ejemplo que muestra las líneas horizontales por arriba de cada celda de la tabla
below Ejemplo que muestra las líneas horizontales por debajo de cada celda de la tabla
hsides Ejemplo que muestra todas las líneas horizontales de la tabla
lhs Ejemplo que muestra las líneas verticales a la izquierda de cada celda de la tabla
rhs Ejemplo que muestra las líneas verticales a la derecha de cada celda de la tabla
vsides Ejemplo que muestra todas las líneas verticales de la tabla
box Ejemplo que muestra todas las líneas exteriores de la tabla
border Ejemplo que muestra todas las líneas exteriores de la tabla
rules none Especifica las líneas divisorias horizontales y verticales. Ejemplo que muestra una tabla sin líneas divisorias
groups
rows Ejemplo que muestra solo las líneas horizontales de una tabla
cols Ejemplo que muestra solo las líneas verticales de una tabla
all Ejemplo que muestra todas las líneas de una tabla
summary texto Resumen del contenido de la tabla para navegadores sin visualizador.
width % Especifica el ancho de la tabla. Ejemplo que especifica el ancho de la tabla en porcentajes
pixels Ejemplo que especifica el ancho de la tabla en pixels
<tr> Define una fila.
align right Alínea horizontalmente el texto en la celda. Ejemplo que compara los diferentes tipos de alineación dentro de las celdas
left Ejemplo que compara los diferentes tipos de alineación dentro de las celdas
center Ejemplo que compara los diferentes tipos de alineación dentro de las celdas
justify Ejemplo que compara los diferentes tipos de alineación dentro de las celdas
char
bgcolor
Desaprobado
rgb(x,x,x) Color de fondo de las celdas. Use la propiedad background de CSS en su lugar. Sin ejemplo
#xxxxxx Sin ejemplo
nombre_color Sin ejemplo
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. Ejemplo que compara los diferentes tipos de alineación vertical dentro de las celdas
middle Ejemplo que compara los diferentes tipos de alineación vertical dentro de las celdas
bottom Ejemplo que compara los diferentes tipos de alineación vertical dentro de las celdas
baseline Ejemplo que compara los diferentes tipos de alineación vertical dentro de las celdas
<td>
<th>
Define una celda. Ejemplo del uso de td y th para definir una celda
Define los encabezados de una tabla. Ejemplo del uso de td y th para definir una celda
abbr texto abreviado Especifica una versión abreviada del contenido de una celda.
align left Alínea horizontalmente el texto en la celda. Ejemplo que compara los diferentes tipos de alineación horizontal dentro de las celdas
right Ejemplo que compara los diferentes tipos de alineación horizontal dentro de las celdas
center Ejemplo que compara los diferentes tipos de alineación horizontal dentro de las celdas
justify Ejemplo que compara los diferentes tipos de alineación horizontal dentro de las celdas
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. Sin ejemplo
#xxxxxx Sin ejemplo
nombre_color Sin ejemplo
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. Ejemplo que muestra como anexar celdas horizontalmente
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. Sin ejemplo
nowrap
Desaprobado
nowrap Si está presente, deshabilita el ajuste automático de líneas. Use CSS en su lugar. Sin ejemplo
rowspan número Indica el número de filas que esta celda debe anexar. Ejemplo que muestra como anexar celdas entre si verticalmente
scope col Este atributo especifica el conjunto de celdas de datos para las cuales la celda de encabezado actual proporciona información de encabezado. Ejemplo que muestra el uso de scope en la tabla
colgroup
row Ejemplo que muestra el uso de scope en la tabla
rowgroup
valign top Especifica la posición vertical de los datos dentro de una celda. Ejemplo que compara los diferentes tipos de alineación vertical dentro de las celdas
middle Ejemplo que compara los diferentes tipos de alineación vertical dentro de las celdas
bottom Ejemplo que compara los diferentes tipos de alineación vertical dentro de las celdas
baseline Ejemplo que compara los diferentes tipos de alineación vertical dentro de las celdas
width
Desaprobado
pixels Especifica el ancho de la celda. Use la propiedad width de CSS en su lugar. Sin ejemplo
% Sin ejemplo
<caption> Define el título de la tabla. Ejemplo que muestra como definir un título para una tabla
align
Desaprobado
top Ubicación del título con respecto a la tabla. Use la propiedad caption-side de CSS en su lugar. Sin ejemplo
bottom Sin ejemplo
left Sin ejemplo
right Sin ejemplo
<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>. Ejemplo que muestra como definir la cabecera, el pie o el cuerpo de una tabla
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

id, class, title, style, dir, lang

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

Eventos intrínsecos

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

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



<<< Frame o marcos en HTML Las listas en HTML >>>

En la Web