Tablas CSS: qué son y cómo crearlas (con ejemplos)

Descarga aquí más de 190 prompts de IA para impulsar tu negocio
Maria Coppola
Maria Coppola

Actualizado:

Publicado:

Las tablas son elementos útiles para organizar una gran cantidad de datos en filas y columnas. Y aunque es posible realizar una tabla en HTML, esta suele ser muy limitada en cuanto a su formato y estilo. Por eso, es común recurrir a las tablas CSS para pasar de un diseño simple a algo mucho más elaborado y funcional. 

Tablas CSS

Una hoja de estilo en cascada o CSS (por sus siglas en inglés) permite crear sitios web atractivos para que los elementos HTML tengan propiedades de diseño más avanzadas. Si bien su lenguaje de marcado más común es HTML, también existen otros como SGV y XML.

Códigos de programación para CSS

Descarga códigos y snippets CSS útiles y funcionales para personalizar y mejorar el diseño de tu sitio web de manera efectiva.

Más información

    Descargar ahora

    Todos los campos son obligatorios.

    ¡Listo!

    Haz clic en este enlace para acceder a este recurso en cualquier momento.

    El CSS permite dar un formato mucho más amplio a los elementos dentro de un sitio web; por ejemplo, cambiar el color y tamaño de un encabezado. En esta ocasión nos concentraremos en decirte cómo crear tablas CSS. Pero, antes de ello, comencemos por lo básico.

    Las tablas CSS se componen de propiedades que permiten controlar el estilo de los títulos, el tamaño de las celdas, filas y columnas, así como el espaciado entre los bordes. Entre las propiedades más utilizadas se encuentran las siguientes: 

    • caption-side. Sirve para posicionar el título sobre la tabla CSS.
    • table-layout. Funciona para dar formato a las celdas, filas y columnas. 
    • border-collapse. Se utiliza para seleccionar el modelo de los bordes.
    • border-spacing. Sirve para indicar el espaciado entre los bordes de celdas adyacentes. 
    • empty-cells. Se usa para dar visibilidad a los bordes de celdas sin contenido. 

    Una vez que conoces lo básico sobre las tablas CSS, es tiempo de construir la tuya. A continuación, te compartimos los pasos.

    1. Añade el código HTML

    Comienza con el código boilerplate HTML:

    <table class="content-table"> <thead> <tr> <th>Primera columna</th> <th>Segunda columna</th> <th>Tercera columna</th> <th>Cuarta columna</th> </tr> </thead> <tbody> <tr> <td>a</td> <td>a</td> <td>a</td> <td>a</td> </tr> <td>b</td> <td>b</td> <td>b</td> <td>b</td> </tr> <tr> <td>c</td> <td>c</td> <td>c</td> <td>c</td> </tr> </tbody> </table>

    Puedes añadir tantos encabezados como elementos de fila.

    << [Plantilla gratuita] >> Plantillas de códigos de programación para CSS

    2. Edita el contenido

    Una vez que tengas el HTML básico, podrás añadir tu información.

    <table class="content-table"> <thead> <tr> <th>Posición</th> <th>Nombre</th> <th>Ventas cerradas</th> <th>Subárea</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Sara</td> <td>23</td> <td>Ventas a mayoristas</td> </tr> <td>2</td> <td>Ernesto</td> <td>13</td> <td>Cuentas empresariales</td> </tr> <tr> <td>3</td> <td>Nuria</td> <td>11</td> <td>Cuentas empresariales</td> </tr> </tbody> </table>

    Verás que <th> </th> marca los encabezados de las columnas, mientras que la información de cada celda está entre <td> y </td>.

    3. Agrega CSS para dar estilo

    Entonces, podrás añadir CSS para darle estilo.

    .styled-table { border-collapse: collapse; margin: 25px 0; font-size: 1em; font-family: sans-serif; min-width: 450px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); }

    Puedes configurar el estilo como lo desees. Este es un código básico.

    Entonces, configura las celdas de encabezado:

    .styled-table thead tr { background-color: #980081; color: #ffffff; text-align: middle; }

    Luego, el resto de celdas:

    .styled-table th, .styled-table td { padding: 12px 15px; }

    Y las filas:

    .styled-table tbody tr { border-bottom: 1px solid #dddddd; } .styled-table tbody tr:nth-of-type(even) { background-color: #f3f3f3; } .styled-table tbody tr:last-of-type { border-bottom: 2px solid #009879; }

    Este es el resultado:

    Ejemplo de tabla CSS

    Si cambiamos el color del encabezado (en background-color por #eb920e) y el contenido, se vería así:

    <table class="content-table"> <thead> <tr> <th>Nombre</th> <th>Platillo favorito</th> <th>Alergias / no le gusta</th> </tr> </thead> <tbody> <tr> <td>Emmanuel</td> <td>Enchiladas</td> <td>Pasas</td> </tr> <td>Lina</td> <td>Salteñas</td> <td>Aderezos</td> </tr> <tr> <td>Adrián</td> <td>Berenjenas horneadas</td> <td>Queso</td> </tr> <tr> <td>Yaz</td> <td>Sopa de cebolla</td> <td>Carnes rojas</td> </tr> </tbody> </table>

    Ejemplo de tabla CSS fácil

    Este video de dcode contiene el código y pasos que hemos utilizado. Está solamente en inglés, pero puedes configurar la traducción automática al español:

     

    Ahora puedes comenzar tus propias tablas CSS en estos simples pasos. Configúralas con los colores y valores que desees, y así podrás darles un mejor estilo visual.

    Plantillas de código de programación para CSS
    Temas: CSS

    Artículos relacionados

    Pop up para DESCARGA AQUÍ MÁS DE 190 PROMPTS DE IA PARA IMPULSAR TU NEGOCIO 190 PROMPTS PARA EMPRESAS

    Plantilla gratuita con 190 prompts para escalar tu negocio con inteligencia artificial

      Pop up para DESCARGA AQUÍ MÁS DE 190 PROMPTS DE IA PARA IMPULSAR TU NEGOCIO 190 PROMPTS PARA EMPRESAS

      CMS Hub is flexible for marketers, powerful for developers, and gives customers a personalized, secure experience

      START FREE OR GET A DEMO