Tablas HTML

Puedes crear tablas usando HTML.

Ejemplo

Tabla
Este ejemplo muestra cómo crear tablas en documentos HTML.
Bordes de la tabla
Este ejemplo muestra varios tipos de bordes de tabla.

(Puedes encontrar más ejemplos en la parte inferior de esta página)

Tabla

La tabla se define con la etiqueta <table>. Cada tabla tiene varias filas (definidas por la etiqueta <tr>), y cada fila se divide en varias celdas (definidas por la etiqueta <td>). La letra td representa los datos de la tabla (table data), es decir, el contenido de la celda de datos. Las celdas de datos pueden contener texto, imágenes, listas, párrafos, formularios, líneas horizontales, tablas, etc.

<table border="1">
<tr>
<td>Fila 1, celda 1</td>
<td>Fila 1, celda 2</td>
</tr>
<tr>
<td>Fila 2, celda 1</td>
<td>Fila 2, celda 2</td>
</tr>
</table>

Se muestra en el navegador de la siguiente manera:

Fila 1, celda 1 Fila 1, celda 2
Fila 2, celda 1 Fila 2, celda 2

Tabla y propiedad de borde

Si no se define la propiedad de borde, la tabla no mostrará el borde. A veces es útil, pero la mayoría de las veces, queremos mostrar el borde.

Usa la propiedad de borde para mostrar una tabla con borde:

<table border="1">
<tr>
<td>Fila 1, celda 1</td>
<td>Fila 1, celda 2</td>
</tr>
</table>

Encabezados de la tabla

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

La mayoría de los navegadores mostrarán los encabezados de tabla como texto negrita centrado:

<table border="1">
<tr>
<th>Título</th>
<th>Otro Título</th>
</tr>
<tr>
<td>Fila 1, celda 1</td>
<td>Fila 1, celda 2</td>
</tr>
<tr>
<td>Fila 2, celda 1</td>
<td>Fila 2, celda 2</td>
</tr>
</table>

Se muestra en el navegador de la siguiente manera:

Título Otro Título
Fila 1, celda 1 Fila 1, celda 2
Fila 2, celda 1 Fila 2, celda 2

Célula vacía en la tabla

En algunos navegadores, las celdas de tabla sin contenido se ven mal. Si una celda está vacía (sin contenido), el navegador puede no mostrar el borde de esta celda.

<table border="1">
<tr>
<td>Fila 1, celda 1</td>
<td>Fila 1, celda 2</td>
</tr>
<tr>
<td></td>
<td>Fila 2, celda 2</td>
</tr>
</table>

El navegador puede mostrarlo de la siguiente manera:

Célula vacía en la tabla

Nota:Este borde de celda vacío no se muestra. Para evitar esto, agrega un marcador de posición de espacio en blanco en la celda vacía para que se muestre el borde.

<table border="1">
<tr>
<td>Fila 1, celda 1</td>
<td>Fila 1, celda 2</td>
</tr>
<tr>
<td> </td>
<td>Fila 2, celda 2</td>
</tr>
</table>

Se muestra en el navegador de la siguiente manera:

Fila 1, celda 1 Fila 1, celda 2
　 Fila 2, celda 2

Más ejemplos

Tabla sin borde
Este ejemplo muestra una tabla sin borde.
Encabezado de la tabla (Heading)
Este ejemplo muestra cómo mostrar el encabezado de la tabla.
Celda vacía
Este ejemplo muestra cómo manejar celdas de tabla sin contenido usando " ".
Tabla con título
Este ejemplo muestra una tabla con título (caption).
Celdas de tabla que se extienden a través de filas o columnas
Este ejemplo muestra cómo definir celdas de tabla que se extienden a través de filas o columnas.
Etiquetas dentro de la tabla
Este ejemplo muestra cómo mostrar elementos dentro de diferentes elementos.
Márgen de celda (Cell padding)
Este ejemplo muestra cómo usar Cell padding para crear un espacio en blanco entre el contenido de la celda y el borde.
Espacio entre celdas (Cell spacing)
Este ejemplo muestra cómo usar Cell spacing para aumentar el espacio entre celdas.
Agregar color de fondo o imagen de fondo a la tabla
Este ejemplo muestra cómo agregar un fondo a la tabla.
Agregar color de fondo o imagen de fondo a celdas de tabla
Este ejemplo muestra cómo agregar un fondo a una o más celdas de tabla.
Alinear contenido en celdas de tabla
Este ejemplo muestra cómo se puede usar el atributo "align" para alinear el contenido de las celdas para crear una tabla atractiva.
Atributo de cuadro (frame)
Este ejemplo muestra cómo se puede usar el atributo "frame" para controlar el borde alrededor de la tabla.

Etiqueta de tabla

Tabla Descripción
<table> Define la tabla.
<caption> Define el título de la tabla.
<th> Define el encabezado de la tabla.
<tr> Define la fila de la tabla.
<td> Define la celda de la tabla.
<thead> Define el encabezado de la tabla.
<tbody> Define el cuerpo de la tabla.
<tfoot> Define el pie de página de la tabla.
<col> Define las propiedades utilizadas para las columnas de la tabla.
<colgroup> Define el grupo de columnas de la tabla.