Tablas HTML

❮ AnteriorSiguiente ❯

---

Ejemplo de tabla HTML

Company	Contact	Country
Alfreds Futterkiste	Maria Anders	Germany
Centro comercial Moctezuma	Francisco Chang	Mexico
Ernst Handel	Roland Mendel	Austria
Island Trading	Helen Bennett	UK
Laughing Bacchus Winecellars	Yoshi Tannamuri	Canada
Magazzini Alimentari Riuniti	Giovanni Rovelli	Italy

Pruebelo usted mismo »

---

Definiendo una tabla HTML

Una tabla HTML se define con la etiqueta table .

Cada fila de la tabla se define con la etiqueta tr . Un encabezado de tabla se define con la etiqueta th . Por defecto, los encabezados de las tablas están en negrita y centrados. Una tabla de datos / celda se define con la etiqueta td .

Ejemplo

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

Pruebelo usted mismo »

Nota: Los elementos td son los contenedores de datos de la tabla. 
Pueden contener todo tipo de elementos HTML; texto, imágenes, listas, otras tablas, etc.

---

www.micompraventa.net

---

Tabla HTML - Agregar un borde

Si no especifica un borde para la tabla, se mostrará sin bordes.

Un borde se establece usando la propiedad de borde CSS :

Ejemplo

table, th, td {
    border: 1px solid black;}

Pruebelo usted mismo »

Recuerde definir los bordes tanto para la tabla como para las celdas de la tabla.

---

Tabla HTML: bordes colapsados

Si desea que los bordes colapsen en un borde, agregue la propiedad CSS -collapse border :

Ejemplo

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;}

Pruebelo usted mismo »

---

Tabla HTML - Agregar relleno de celda

El relleno de celdas especifica el espacio entre el contenido de la celda y sus bordes.

Si no especifica un relleno, las celdas de la tabla se mostrarán sin relleno.

Para configurar el relleno, use la propiedad de relleno de CSS :

Ejemplo

th, td {
    padding: 15px;}

Pruebelo usted mismo »

---

Tabla HTML - Encabezados alineados a la izquierda

Por defecto, los encabezados de las tablas están en negrita y centrados.

Para alinear a la izquierda los encabezados de la tabla, use la propiedad CSS text-align :

Ejemplo

th {
    text-align: left;}

Pruebelo usted mismo »

---

Tabla HTML - Agregar espacio entre los bordes

El espacio entre los bordes especifica el espacio entre las celdas.

Para establecer el espacio entre los bordes de una tabla, use la propiedad de espacio entre bordes de CSS :

Ejemplo

table {
    border-spacing: 5px;}

Pruebelo usted mismo »

Nota: Si la tabla tiene bordes colapsados, el espacio entre bordes no tiene ningún efecto.

---

Tabla HTML: celdas que abarcan muchas columnas

Para hacer que una celda abarque más de una columna, use el atributo colspan :

Ejemplo

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
  </tr>
</table>

Pruebelo usted mismo »

---

Tabla HTML: celdas que abarcan muchas filas

Para hacer que una celda abarque más de una fila, use el atributo rowspan :

Ejemplo

<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
</table>

Pruebelo usted mismo »

---

Tabla HTML - Agregar un título

Para agregar un título a una tabla, use la etiqueta caption :

Ejemplo

<table style="width:100%">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

Pruebelo usted mismo »

Nota: La etiqueta caption debe insertarse inmediatamente después de la etiqueta table.

---

Un estilo especial para una mesa

Para definir un estilo especial para una tabla especial, agregue un atributo de id a la tabla:

Ejemplo

<table id="t01">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

Ahora puedes definir un estilo especial para esta tabla:

table#t01 {
    width: 100%; 
    background-color: #f1f1c1;}

Pruebelo usted mismo »

Y agrega más estilos:

table#t01 tr:nth-child(even) {
    background-color: #eee;}
table#t01 tr:nth-child(odd) {
    background-color: #fff;}
table#t01 th {
    color: white;
    background-color: black;}

Pruebelo usted mismo »

---

Resumen del capítulo

• Use el elemento HTML table para definir una tabla
• Use el elemento HTML tr para definir una fila de tabla
• Utilice el elemento HTML td para definir una tabla de datos
• Use el elemento HTML th para definir un encabezado de tabla
• Utilice el elemento HTML caption para definir un título de tabla
• Use la propiedad de borde CSS para definir un borde
• Utilice la propiedad CSS -collapse-border para contraer las fronteras de las celdas
• Use la propiedad de relleno de CSS para agregar relleno a las celdas
• Use la propiedad CSS text-align para alinear el texto de la celda
• Utilice la propiedad de espacio entre bordes de CSS para establecer el espacio entre las celdas
• Use el atributo colspan para hacer que una celda abarque muchas columnas
• Use el atributo rowspan para hacer que una celda abarque muchas filas
• Use el atributo id para definir de manera única una tabla

---

Ponte a prueba con ejercicios!

Ejercicio 1 »  Ejercicio 2»  Ejercicio 3 »  Ejercicio 4»  Ejercicio 5 »  Ejercicio 6»

---

Etiquetas de tabla HTML

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

❮ AnteriorSiguiente ❯