Tablas HTML

HTML Tablas

«Anterior

Capítulo Siguiente »

---

HTML Ejemplo de tabla:

Nombre	Apellido	Puntos
Jill	Herrero	50
Eva	Jackson	94
Juan	Coneja	80
Adán	Johnson	67

---

Pruébelo usted mismo - Ejemplos

Tablas
cómo crear tablas en un documento HTML.

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

---

Tablas HTML

Las tablas se definen con la etiqueta <table>.

Una tabla se divide en filas (con la etiqueta <tr>), y cada fila se divide en celdas de datos (con la etiqueta <td>). TD es sinónimo de "datos de la tabla," y sostiene el contenido de una celda de datos. Una etiqueta <td> puede contener texto, enlaces, imágenes, listas, formularios, otras tablas, etc

Ejemplo de tabla

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

Como el código HTML anterior se ve en un navegador:

fila 1, celda 1	fila 1, celda 2
fila 2, celda 1	fila 2, celda 2

---

Tablas HTML y el atributo border

Si no se especifica un atributo border, la tabla se mostrará sin fronteras. A veces esto puede ser útil, pero la mayoría del tiempo, queremos que los márgenes para mostrar.

Para mostrar una tabla con bordes, especifique el atributo border:

<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>

---

Tabla HTML Encabezados

La información de cabecera en una tabla se definen con la etiqueta <th>.

Todos los principales navegadores muestran el texto en el elemento <th> como negrita y centrado.

<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

Como el código HTML anterior se ve en su navegador:

Encabezado 1	Header 2
fila 1, celda 1	fila 1, celda 2
fila 2, celda 1	fila 2, celda 2

---

Más ejemplos

Tablas sin fronteras
Cómo crear tablas sin fronteras.

Cabeceras de la tabla
Cómo crear encabezados de tabla.

Tabla con un subtítulo
Cómo agregar un título a una tabla.

Las celdas de tabla que abarcan más de una fila / columna
¿Cómo definir las celdas de tabla que abarcan más de una fila o una columna.

Etiquetas dentro de una tabla
Cómo visualizar elementos dentro de otros elementos.

Relleno de la celda
Modo de empleo cellpadding para crear más espacio en blanco entre el contenido de la celda y de sus fronteras.

Celular espaciamiento
Cómo utilizar cellspacing para aumentar la distancia entre las células.

---

Tabla HTML Etiquetas

Tag	Description
<table>	Defines a table
<th>	Defines a header cell in a table
<tr>	Defines a row in a table
<td>	Defines a cell in a table
<caption>	Defines a table caption
<colgroup>	Specifies a group of one or more columns in a table for formatting
<col>	Specifies column properties for each column within a <colgroup> element
<thead>	Groups the header content in a table
<tbody>	Groups the body content in a table
<tfoot>	Groups the footer content in a table