W3docs
es
Iniciar sesión

Tablas CSS

Aprende a dar estilo a tablas con CSS: color, bordes colapsados, ancho, alto, alineación y relleno. Con ejemplos prácticos.

Las tablas HTML que renderiza el navegador por defecto son muy sencillas: bordes dobles delgados, celdas apretadas y sin separación visual entre filas. CSS las convierte en presentaciones de datos legibles y escaneables. Este capítulo recorre las propiedades más importantes para las tablas — bordes, espaciado, alineación y estilos de fila — y termina con patrones que usarás una y otra vez: divisores, resaltado al pasar el cursor, franjas de cebra y desplazamiento horizontal en pantallas pequeñas.

Todos los ejemplos a continuación son páginas completas y ejecutables, así que puedes abrirlas, modificar un valor y ver el efecto de inmediato.

Propiedades de estilo para tablas

Estas son las propiedades CSS utilizadas para dar estilo a una tabla. Las propiedades background-color y color establecen el color de fondo y el color del texto, respectivamente. La propiedad border-collapse colapsa los bordes de la tabla. La propiedad text-align establece la alineación horizontal del texto. Además, puedes usar height, width y padding para ajustes de disposición.

Ejemplo de estilo de una tabla:

Ejemplo de estilo de tablas HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        width: 100%;
        border-collapse: collapse;
      }
      table,
      th,
      td {
        border: 1px solid black;
      }
      thead {
        background-color: #1c87c9;
        color: #ffffff;
      }
      th {
        text-align: center;
        height: 50px;
      }
      tbody tr:nth-child(odd) {
        background: #ffffff;
      }
      tbody tr:nth-child(even) {
        background: #f4f4f4;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Heading</th>
          <th>Heading</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
Pruébalo tú mismo »

Resultado

Ejemplo de tabla

Expliquemos el código anterior.

Como puedes ver, nuestra tabla tiene dos secciones principales: la sección <thead> para los encabezados y la sección <tbody> para las filas de datos. La tabla utiliza bordes negros, aplicados mediante la propiedad border. Puedes usar cualquier color y estilo de borde que prefieras.

Color de tabla

La fila de encabezado (<thead>) es azul con texto blanco. El relleno azul proviene de la propiedad background-color, y el texto blanco de la propiedad color — ambas aplicadas al selector thead para que todas las celdas de encabezado dentro de él las hereden. Las celdas del cuerpo vuelven al texto negro predeterminado de la página sobre un fondo blanco (o con franjas de cebra).

Colapsar bordes

Por defecto, una tabla dibuja dos bordes entre celdas adyacentes — uno por cada celda — lo que produce un espacio visible y una línea doble. La propiedad border-collapse controla esto:

  • border-collapse: separate (el valor por defecto) mantiene los bordes de cada celda separados.
  • border-collapse: collapse fusiona los bordes adyacentes en una sola línea, dando el aspecto limpio y de cuadrícula que se usa en todos los ejemplos de esta página.

Casi siempre querrás usar collapse para tablas de datos.

Ancho y alto de tabla

Usa width en el selector table para controlar cuánto espacio horizontal ocupa la tabla — width: 100% la hace llenar su contenedor, que es la opción más común. Usa height en th (o td) para dar espacio a las filas. Ambas propiedades aceptan píxeles (50px) para un tamaño fijo o porcentajes (100%) para un tamaño relativo al padre. Ten en cuenta que un height en porcentaje solo funciona si el padre tiene una altura conocida, por lo que los valores fijos son más fiables para las filas.

Alineación de texto en tablas

La propiedad text-align establece la alineación horizontal del contenido de las celdas. Los navegadores alinean por defecto el texto de <th> al center y el de <td> a la left, así que solo necesitas establecer text-align cuando quieras modificar ese comportamiento — por ejemplo, text-align: center en th para mantener los encabezados centrados, o text-align: right para alinear columnas numéricas por sus dígitos. La siguiente sección muestra un ejemplo completo.

Relleno en tablas

Para controlar el espacio entre el borde y el contenido de una tabla, usa la propiedad padding en los elementos <td> y <th>:

Relleno en tablas HTML

td, th {
  padding: 15px;
}

Alineación horizontal con la propiedad text-align

Con la ayuda de la propiedad CSS text-align, puedes establecer la alineación horizontal del contenido en <th> o <td>.

Por defecto, el contenido de los elementos <td> está alineado a la izquierda y el contenido de los elementos <th> está alineado al centro. En el ejemplo siguiente, el contenido de los elementos <th> y <td> está alineado a la derecha:

Ejemplo de alineación del contenido de los elementos <th> y <td> a la derecha:

Ejemplo de alineación del contenido de los elementos <th> y <td> a la derecha

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table,
      td,
      th {
        border: 1px solid black;
      }
      table {
        border-collapse: collapse;
        width: 100%;
      }
      th,
      td {
       text-align: right;
      }
    </style>
  </head>
  <body>
    <h2>Horizontal alignment example</h2>
    <table>
      <thead>
        <tr>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Money</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Sherlock</td>
          <td>Holmes</td>
          <td>$200</td>
        </tr>
        <tr>
          <td>John</td>
          <td>Watson</td>
          <td>$250</td>
        </tr>
        <tr>
          <td>Mary</td>
          <td>Whatson</td>
          <td>$500</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
Pruébalo tú mismo »

Alineación vertical con la propiedad vertical-align

Usando la propiedad CSS vertical-align, puedes establecer la alineación vertical del contenido en <th> o <td>.

Por defecto, el contenido tanto en los elementos <th> como <td> está alineado verticalmente al centro.

En el ejemplo siguiente, el contenido de los elementos <td> está alineado verticalmente hacia abajo:

Ejemplo de alineación vertical del contenido de los elementos <td> hacia abajo:

<!DOCTYPE html>
<html>
  <head>
    <style>
      table,
      td,
      th {
        border: 1px solid black;
      }
      table {
        border-collapse: collapse;
        width: 100%;
      }
      td {
        height: 50px;
        vertical-align: bottom;
        text-align: right;
        padding-right: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Vertical alignment example</h2>
    <table>
      <thead>
        <tr>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Money</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Sherlock</td>
          <td>Holmes</td>
          <td>$300</td>
        </tr>
        <tr>
          <td>John</td>
          <td>Watson</td>
          <td>$250</td>
        </tr>
        <tr>
          <td>Mary</td>
          <td>Watson</td>
          <td>$500</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
Pruébalo tú mismo »

Divisores horizontales

Al agregar la propiedad CSS border-bottom a los elementos <td> y <th>, crearás divisores horizontales.

Ejemplo de creación de divisores horizontales:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        border-collapse: collapse;
        width: 100%;
      }
      th,
      td {
        padding: 10px;
        text-align: left;
        border-bottom: 1px solid #cccccc;
      }
    </style>
  </head>
  <body>
    <h2>Horizontal dividers example</h2>
    <table>
      <thead>
        <tr>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Money</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Sherlock</td>
          <td>Holmes</td>
          <td>$200</td>
        </tr>
        <tr>
          <td>John</td>
          <td>Watson</td>
          <td>$350</td>
        </tr>
        <tr>
          <td>Mary</td>
          <td>Watson</td>
          <td>$500</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
Pruébalo tú mismo »

Tablas con efecto hover

Usando el selector CSS :hover en el elemento <tr>, se podrá resaltar la fila al pasar el cursor.

Ejemplo de creación de una tabla con efecto hover:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        border-collapse: collapse;
        width: 100%;
      }
      tr {
        background-color: #f5f5f5;
      }
      th,
      td {
        padding: 15px;
        text-align: left;
        border-bottom: 1px solid #ccc;
      }
      tr:hover {
        background-color: #cdcdcd;
      }
    </style>
  </head>
  <body>
    <h2>Hoverable table example</h2>
    <table>
      <thead>
        <tr>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Money</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Sherlock</td>
          <td>Holmes</td>
          <td>$200</td>
        </tr>
        <tr>
          <td>John</td>
          <td>Watson</td>
          <td>$350</td>
        </tr>
        <tr>
          <td>Mary</td>
          <td>Watson</td>
          <td>$500</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
Pruébalo tú mismo »

Tabla con franjas de cebra

Usando el selector nth-child() y añadiendo la propiedad CSS background-color a las filas impares (o pares) de la tabla, puedes crear una tabla con franjas de cebra.

Ejemplo de creación de una tabla con franjas de cebra:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        border-collapse: collapse;
        width: 100%;
      }
      th,
      td {
        text-align: left;
        padding: 10px;
      }
      tr:nth-child(even) {
        background-color: #6eeccf;
      }
      tr:nth-child(odd) {
        background-color: #2d7f88;
      }
    </style>
  </head>
  <body>
    <h2>Striped table example</h2>
    <table>
      <thead>
        <tr>
          <th>First name</th>
          <th>Last name</th>
          <th>Points</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Sherlock</td>
          <td>Holmes</td>
          <td>$250</td>
        </tr>
        <tr>
          <td>John</td>
          <td>Watson</td>
          <td>$350</td>
        </tr>
        <tr>
          <td>Mary</td>
          <td>Watson</td>
          <td>$500</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
Pruébalo tú mismo »

Tablas responsivas

Una tabla ancha puede desbordarse en pantallas estrechas y romper el diseño de la página. Para hacer una tabla responsiva, envuélvela en un elemento contenedor (aquí un <div>) y aplica overflow-x: auto a ese contenedor. Cuando la tabla es más ancha que el viewport, el contenedor muestra una barra de desplazamiento horizontal en lugar de estirar la página — las filas permanecen intactas y el usuario simplemente se desplaza horizontalmente.

Ejemplo de creación de una tabla responsiva:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        overflow-x: auto;
      }
      table {
        border-collapse: collapse;
        width: 100%;
      }
      th,
      td {
        text-align: left;
        padding: 8px 5px;
      }
      tr:nth-child(even) {
        background-color: #6eeccf;
      }
      tr:nth-child(odd) {
        background-color: #2d7f88;
      }
    </style>
  </head>
  <body>
    <h2>Responsive table example</h2>
    <div>
      <table>
        <thead>
          <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Money</th>
            <th>Money</th>
            <th>Money</th>
            <th>Money</th>
            <th>Money</th>
            <th>Money</th>
            <th>Money</th>
            <th>Money</th>
            <th>Money</th>
            <th>Money</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Sherlock</td>
            <td>Holmes</td>
            <td>$150</td>
            <td>$150</td>
            <td>$150</td>
            <td>$150</td>
            <td>$150</td>
            <td>$150</td>
            <td>$150</td>
            <td>$150</td>
            <td>$150</td>
            <td>$150</td>
          </tr>
          <tr>
            <td>John</td>
            <td>Watson</td>
            <td>$350</td>
            <td>$350</td>
            <td>$350</td>
            <td>$350</td>
            <td>$350</td>
            <td>$350</td>
            <td>$350</td>
            <td>$350</td>
            <td>$350</td>
            <td>$350</td>
          </tr>
          <tr>
            <td>Mary</td>
            <td>Watson</td>
            <td>$500</td>
            <td>$500</td>
            <td>$500</td>
            <td>$500</td>
            <td>$500</td>
            <td>$500</td>
            <td>$500</td>
            <td>$500</td>
            <td>$500</td>
            <td>$500</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>
Pruébalo tú mismo »

Temas relacionados

Práctica

Práctica
¿Qué propiedades de CSS se pueden aplicar a las tablas?
¿Qué propiedades de CSS se pueden aplicar a las tablas?
Was this page helpful?