Etiqueta <table> HTML

Definición y uso

<table> La etiqueta define la tabla HTML.

Una tabla HTML se compone por un <table> elemento y uno o más <tr>、<th> y <td> Elementos compuestos por:

La tabla HTML puede contener los siguientes elementos:

Vea también:

Tutorial de HTML:Tabla HTML

Manual de referencia del DOM HTML:Objeto Table

Tutorial de CSS:Establecer estilos de tabla

Ejemplo

Ejemplo 1

Una tabla HTML simple, que contiene dos columnas y dos filas:

<table>
  <tr>
    <th>Mes</th>
    <th>Ahorros</th>
  </tr>
  <tr>
    <td>Febrero</td>
    <td>￥3400</td>
  </tr>
</table>

Prueba por tu cuenta

Ejemplo 2

¿Cómo agregar bordes plegables a la tabla (usando CSS)?:

<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>
<table>
  <tr>
    <th>Mes</th>
    <th>Ahorros</th>
  </tr>
  <tr>
    <td>Febrero</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Febrero</td>
    <td>￥4500</td>
  </tr>
</table>
</body>
</html>

Prueba por tu cuenta

Ejemplo 3

¿Cómo alinear la tabla a la derecha (usando CSS)?:

<table style="float:right">
  <tr>
    <th>Mes</th>
    <th>Ahorros</th>
  </tr>
  <tr>
    <td>Febrero</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Febrero</td>
    <td>￥4500</td>
  </tr>
</table>

Prueba por tu cuenta

Ejemplo 4

¿Cómo alinear la tabla al centro (usando CSS)?:

<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}
table.center {
  margin-left: auto;
  margin-right: auto;
}
</style>
</head>
<body>
<table class="center">
  <tr>
    <th>Mes</th>
    <th>Ahorros</th>
  </tr>
  <tr>
    <td>Febrero</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Febrero</td>
    <td>￥4500</td>
  </tr>
</table>

Prueba por tu cuenta

Ejemplo 5

¿Cómo agregar un color de fondo a la tabla (usando CSS)?:

<table style="background-color:#00FF00">
  <tr>
    <th>Mes</th>
    <th>Ahorros</th>
  </tr>
  <tr>
    <td>Febrero</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Febrero</td>
    <td>￥4500</td>
  </tr>
</table>

Prueba por tu cuenta

Ejemplo 6

¿Cómo agregar márgenes internos a la tabla (usando CSS)?:

<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}
th, td {
  padding: 10px;
}
</style>
</head>
<body>
<table>
  <tr>
    <th>Mes</th>
    <th>Ahorros</th>
  </tr>
  <tr>
    <td>Febrero</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Febrero</td>
    <td>￥4500</td>
  </tr>
</table>
</body>
</html>

Prueba por tu cuenta

Ejemplo 7

¿Cómo establecer el ancho de la tabla (usando CSS)?:

<table style="width:400px">
  <tr>
    <th>Mes</th>
    <th>Ahorros</th>
  </tr>
  <tr>
    <td>Febrero</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Febrero</td>
    <td>￥4500</td>
  </tr>
</table>

Prueba por tu cuenta

Ejemplo 8

¿Cómo crear encabezados de tabla?:

<table>
  <tr>
    <th>Nombre</th>
    <th>Correo electrónico</th>
    <th>Telfono</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
  </tr>
</table>

Prueba por tu cuenta

Ejemplo 9

¿Cómo crear una tabla con encabezado?:

<table>
  <caption>Ahorros mensuales</caption>
  <tr>
    <th>Mes</th>
    <th>Ahorros</th>
  </tr>
  <tr>
    <td>Febrero</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Febrero</td>
    <td>￥4500</td>
  </tr>
</table>

Prueba por tu cuenta

Ejemplo 10

¿Cómo definir celdas de tabla que se extienden a través de múltiples filas o columnas?:

<table>
  <tr>
    <th>Nombre</th>
    <th>Correo electrónico</th>
    <th colspan="2">Telfono</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
    <td>186-2345-6789</td>
  </tr>
</table>

Prueba por tu cuenta

Atributos globales

<table> La etiqueta también admite Atributos globales en HTML.

Atributos de eventos

<table> La etiqueta también admite Atributos de eventos en HTML.

Configuración CSS predeterminada

La mayoría de los navegadores mostrarán los siguientes valores predeterminados <table> Elemento:

table {
  display: table;
  border-collapse: separate;
  border-spacing: 2px;
  border-color: gray;
}

Prueba por tu cuenta

Compatibilidad del navegador

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Soporte Soporte Soporte Soporte Soporte