Inicio > Referencia HTML > Tags HTML > Tag HTML table

Tag HTML table

Nota: Si no sabes lo que es un tag y/o cómo se debe utilizar, te recomendamos que leas nuestro tutorial "tags y atributos HTML" que puedes encontrar en nuestra sección de tutoriales HTML.

Descripción

The HTML table tag inserta una table en el documento. Este tag es el contenedor para todas las partes de la tabla: títulos (tag HTML caption), encabezados (tag HTML thead), celdas de encabezado (tag HTML th), pies (tag HTML tfoot), cuerpo (tag HTML tbody), filas (tag HTML tr), atributos de columnas (tag HTML col), grupos de columnas (tag HTML colgroup), celdas (tag HTML td).

Atributos

id (name)

El atributo "id" asigna un identificador al elemento asociado. Este identificador debe ser único en el documento y puede ser usado para referirse a ese elemento.

Ejemplo:

Code begin
<p id="parrafo1">Este es el primer p&aacute;rrafo nombrado parrafo1. Para cambiar din&aacute;micamente las propiedades del mismo usa este identificador.</p>Code end

class (cdata)

El atributo "class" asigna un nombre de clase (o una lista de nombres de clase separados por espacios) al elemento contenedor. Es usado con hojas de estilos e indica al navegador la clase a la cual el elemento está asociado. Una clase provee atributos visuales para los elementos.

Ejemplo:

Code begin
<p class="referencias">Este art&iacute;culo est&aacute; basado en el libro "Viento en los &aacute;rboles" por Jhon L. Brooks</p>

<p class="referencias importante">Este art&iacute;culo est&aacute; basado en el libro "Viento en los &aacute;rboles" por Jhon L. Brooks... y es m&aacute;s importante que el anterior.</p>Code end

style (style)

Define un estilo visual para el elemento. Es una mejor práctica definir atributos en hojas de estilos externas agrupándolos en clases. Los atributos en el parámetro "style" deben preservar este orden "nombre : valor" y ser separados por un punto y coma.

Si estás escribiendo código XHTML te recomendamos no utilizar este atributo y probar con las clases de hojas de estilo (con el atributo "class").

Ejemplo:

Code begin
<p style="color: #0000FF; font-size: 12pt">Este es un p&aacute;rrafo con un estilo definido</p>
<p>Y este es otro texto sin estilo.</p>Code end

title (text)

Indica un título para el elemento. Usado para dar una descripción acerca del elemento que es usualmente mostrado como un "tool tip" cuando el usuario pone el puntero del mouse sobre el elemento.

Ejemplo:

Código	Visualización
<a title="HTMLQuick.com" href="https://www.htmlquick.com">Código HTML</a>	Código HTML

lang (langcode)

Especifica el lenguaje del contenido de un elemento. El valor predeterminado es "desconocido".

Al escribir código XHTML la sintaxis "xml:lang" representa una alternativa preferida en XHTML 1.0 y un reemplazo en XHTML 1.1 (por ejemeplo, xml:lang="en").

Ejemplo:

Code begin
<p lang="en">This is a paragraph in english.</p>
<p lang="es">Este es un p&aacute;rrafo en espa&ntilde;ol.</p>Code end

dir

Especifica la dirección de texto del contenido y atributos del elemento, así como la direccionalidad de las tablas. Tiene dos valores posibles que son insensibles a mayúsculas/minúsculas:

RTL: Derecha a izquierda.
LTR: Izquierda a derecha.

Ejemplo:

Code begin
<q lang="he" dir="rtl">...Una cita en Hebreo...</q>Code end

summary (text)

Provee un resumen del propósito y estructura de la tabla.

align

Este atributo ha sido desaprobado

Establece la alineación de la tabla. Los valores posibles son (insensibles a mayúsculas/minúsculas):

left: La tabla es alineada a la izquierda del espacio disponible.
center: La tabla es alineada al centro del espacio disponible.
right: La tabla es alineada a la derecha del espacio disponible.

width (length)

Especifica el ancho deseado de la tabla entera.

frames

Especifica qué lados del marco de la tabla será visible. Los valores posibles son (insensibles a mayúsculas/minúsculas):

void: Sin lados. Este es el valor predeterminado.
above: Solo el lado superior.
below: Solo el lado inferior.
hsides: Solo los lados superior e inferior..
vsides: Solo los lados izquierdo y derecho.
lhs: Solo el lado izquierdo.
rhs: Solo el lado derecho.
box: Todos los lados.
border: Todos los lados.

rules

Decide qué reglas aparecerán entre las celdas de una tabla. Los valores posibles son (insensibles a mayúsculas/minúsculas):

none: Sin reglas. Este es el valor predeterminado.
groups: Las reglas se mostrarán entre grupos de filas (tag HTML thead, tag HTML tfoot, y tag HTML tbody) y grupos de columnas (tag HTML colgroup y tag HTML col) solamente.
rows: Las reglas se mostrarán entre filas solamente.
cols: Las reglas se mostrarán entre columnas solamente.
all: Las reglas se mostrarán entre todas las filas y columnas.

border (pixels)

Especifica el ancho en pixels del borde del marco alrededor de una tabla.

Ejemplo:

Código

Visualización

<table border="5" summary="Tabla ejemplo mostrando el uso del atributo border.">
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
<td>Celda 3</td>
</tr>
<tr>
<td>Celda 4</td>
<td>Celda 5</td>
<td>Celda 6</td>
</tr>
</table>

Celda 1	Celda 2	Celda 3
Celda 4	Celda 5	Celda 6

cellspacing (length)

Define el espacio adejar entre celdas y entre el borde de la tabla y el borde de la celda más cercana al mismo.

Ejemplo:

Código

Visualización

<table cellspacing="10" border="1" summary="Tabla ejemplo mostrando el uso del atributo cellspacing.">
<tr>
<td>...Contenido...</td>
<td>...Contenido...</td>
</tr>
</table>

...Contenido...

cellpadding (length)

Define el espacio a dejar entre el borde de una celda y su contenido. Funciona como margen para celdas.

Ejemplo:

Código

Visualización

<table cellpadding="10" border="1" summary="Tabla ejemplo mostrando el uso del atributo cellpadding.">
<tr>
<td>...Contenido...</td>
<td>...Contenido...</td>
</tr>
</table>

...Contenido...

Eventos

onclick
ondblclick
onmousedown
onmouseup
onmouseover
onmousemove
onmouseout
onkeypress
onkeydown
onkeyup

Lista completa e información acerca de eventos en HTML

Ejemplos

En este ejemplo definimos una tabla con columnas agrupadas, filas agrupadas y varios atributos para cada tag que definirán el estilo visual.

Código

Visualización

<table border="1" frame="border" rules="groups" summary="Funcionalidad de archivos HTML en diferentes versiones de Internet Explorer">
<caption>Representació de cómo archivos HTML funcionan en diferentes versiones de Internet Explorer</caption>
<colgroup align="center"></colgroup>
<colgroup></colgroup>
<colgroup align="center" span="2"></colgroup>
<thead>
<tr>
<th>Archivo</th>
<th>Nombre</th>
<th>4.0</th>
<th>5.0</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Archivo</th>
<th>Nombre</th>
<th>4.0</th>
<th>5.0</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td>index.html</td>
<td>Ok</td>
<td>Ok</td>
</tr>
<tr>
<td>2</td>
<td>links.html</td>
<td>Ok</td>
<td>Ok</td>
</tr>
<tr>
<td>3</td>
<td>fullfunc.html</td>
<td>-</td>
<td>Ok</td>
</tr>
<tr>
<td>4</td>
<td>nofunc.html</td>
<td>Ok</td>
<td>Ok</td>
</tr>
<tr>
<td>5</td>
<td>panel.html</td>
<td>-</td>
<td>Ok</td>
</tr>
</tbody>
<tbody>
<tr>
<td>6</td>
<td>search.php</td>
<td>Ok</td>
<td>Ok</td>
</tr>
<tr>
<td>7</td>
<td>send.php</td>
<td>Ok</td>
<td>Ok</td>
</tr>
</tbody>
</table>

Representació de cómo archivos HTML funcionan en diferentes versiones de Internet Explorer
Archivo	Nombre	4.0	5.0
Archivo	Nombre	4.0	5.0
1	index.html	Ok	Ok
2	links.html	Ok	Ok
3	fullfunc.html	-	Ok
4	nofunc.html	Ok	Ok
5	panel.html	-	Ok
6	search.php	Ok	Ok
7	send.php	Ok	Ok

Saltar declaraciones W3C |

| ¿Por qué confiar en nosotros? Haz click en las imágenes de la izquierda para ver que tan seriamente escribimos nuestras propias páginas, luego haz tu elección.

Este sitio web da su mejor esfuerzo por lograr el nivel de conformidad Tiple-A, de las Directrices de Accesibilidad para el Contenido Web 1.0 del W3C-WAI. Si encuentras algún detalle o error que hayamos pasado por alto, no dudes en comunicárnoslo.

El poder de la Web se encuentra en su universalidad. El acceso por parte de todos más allá de la discapacidad es un aspecto esencial. -- Tim Berners-Lee, Director del W3C e inventor de la World Wide Web