29-Tablas en CSS

Jorge Catalao noviembre 10, 2024
HTML




Tablas en CSS

Las tablas en CSS permiten organizar los datos de una forma estructurada y clara. El siguiente ejemplo muestra cómo crear una tabla básica con CSS, controlando el estilo de bordes, espaciado y alineación.

Para empezar, se utiliza la etiqueta <table> para definir la tabla, luego se utilizan las etiquetas <tr> para las filas, <th> para las celdas de encabezado y <td> para las celdas de datos. Podemos personalizar las tablas usando propiedades de CSS como border, padding, text-align, etc.

El siguiente ejemplo muestra cómo crear una tabla básica en HTML y CSS:

    <table style="width: 100%; border-collapse: collapse; border: 1px solid #000;">
        <tr style="background-color: #f2f2f2;">
            <th style="padding: 8px; text-align: left; border: 1px solid #ddd;">Encabezado 1</th>
            <th style="padding: 8px; text-align: left; border: 1px solid #ddd;">Encabezado 2</th>
            <th style="padding: 8px; text-align: left; border: 1px solid #ddd;">Encabezado 3</th>
        </tr>
        <tr>
            <td style="padding: 8px; text-align: left; border: 1px solid #ddd;">Dato 1</td>
            <td style="padding: 8px; text-align: left; border: 1px solid #ddd;">Dato 2</td>
            <td style="padding: 8px; text-align: left; border: 1px solid #ddd;">Dato 3</td>
        </tr>
        <tr style="background-color: #f2f2f2;">
            <td style="padding: 8px; text-align: left; border: 1px solid #ddd;">Dato 4</td>
            <td style="padding: 8px; text-align: left; border: 1px solid #ddd;">Dato 5</td>
            <td style="padding: 8px; text-align: left; border: 1px solid #ddd;">Dato 6</td>
        </tr>
    </table>

Ejemplos Visuales

Ejemplo de Tabla Básica en CSS

Este es un ejemplo de una tabla básica con bordes, espaciado y alineación utilizando solo HTML y CSS:

Encabezado 1 Encabezado 2 Encabezado 3
Dato 1 Dato 2 Dato 3
Dato 4 Dato 5 Dato 6

Este ejemplo muestra una tabla con tres columnas y dos filas de datos. El borde de la tabla es visible y las celdas tienen un espaciado interno (padding) para mejorar la legibilidad.



...
Bordes de las Tablas

En este tema, aprenderás a agregar bordes a las tablas con CSS y cómo personalizarlos.

Podemos aplicar bordes a toda la tabla o a las celdas individuales. Para aplicar bordes a las celdas, usamos la propiedad border y la propiedad border-collapse para fusionar los bordes de las celdas adyacentes.

El siguiente ejemplo muestra cómo se aplican los bordes a las celdas de una tabla:

<table style="width: 100%; border-collapse: collapse; border: 2px solid black;">
    <tr>
        <th style="border: 2px solid black; padding: 8px;">Encabezado 1</th>
        <th style="border: 2px solid black; padding: 8px;">Encabezado 2</th>
    </tr>
    <tr>
        <td style="border: 2px solid black; padding: 8px;">Dato 1</td>
        <td style="border: 2px solid black; padding: 8px;">Dato 2</td>
    </tr>
</table>


Ejemplos Visuales

Ejemplo de Bordes de las Tablas

Este es un ejemplo de una tabla con bordes aplicados a las celdas. Cada celda tiene un borde de 2px de grosor y de color negro:

border-collapse: collapse;border: 2px solid black;">
Encabezado 1 Encabezado 2
Dato 1 Dato 2

En este ejemplo, el borde es de 2px de grosor y se aplica tanto a las celdas como a la tabla. Usamos border-collapse: collapse; para asegurarnos de que los bordes entre celdas adyacentes se fusionen.



Doble Borde

Aprende cómo aplicar un doble borde a una tabla utilizando CSS para mejorar su estilo.

Para lograr un efecto de doble borde, se aplican dos bordes distintos a la tabla: uno para el contorno y otro para las celdas.

El siguiente ejemplo muestra cómo aplicar un doble borde:

table, th, td {
    border: 3px double #007bff; /* Doble borde azul */
    padding: 8px;
}


Ejemplos Visuales

Ejemplo de Doble Borde en la Tabla

Este es un ejemplo de una tabla con doble borde aplicado tanto a la tabla como a las celdas:

Encabezado 1 Encabezado 2 Encabezado 3
Dato 1 Dato 2 Dato 3

En este ejemplo, el doble borde se aplica tanto a la tabla como a las celdas usando la propiedad border con un valor double.



Colapso de los Bordes

Este tema trata sobre el colapso de los bordes de las tablas, una característica importante para crear tablas con bordes que se fusionan en lugar de ser independientes. Cuando aplicamos la propiedad border-collapse: collapse;, los bordes de las celdas adyacentes se combinan en un solo borde. Esto es útil para tablas con bordes más limpios y compactos.

Por defecto, las tablas en CSS tienen bordes separados, pero al utilizar la propiedad border-collapse con el valor collapse, los bordes de las celdas se fusionan, lo que elimina los espacios entre ellos.

El siguiente ejemplo muestra cómo aplicar el colapso de los bordes a una tabla:

table {
    border-collapse: collapse; /* Colapsa los bordes */
}
th, td {
    border: 1px solid black; /* Borde de las celdas */
    padding: 8px;
}

Ejemplos Visuales

Ejemplo de Colapso de Bordes en la Tabla

Este es un ejemplo de una tabla con los bordes colapsados. Los bordes entre las celdas se fusionan en un solo borde:

Encabezado 1 Encabezado 2 Encabezado 3
Dato 1 Dato 2 Dato 3

En este ejemplo, la propiedad border-collapse: collapse; asegura que los bordes de las celdas adyacentes se fusionen, eliminando los espacios entre ellas.



Tamaños de las Tablas

Descubre cómo ajustar los tamaños de las tablas y sus celdas con propiedades CSS como width y height. La propiedad width se usa para definir el ancho de la tabla o de las celdas, y height se utiliza para definir la altura de las celdas.

También puedes controlar el tamaño total de la tabla mediante la propiedad table-layout. El valor fixed puede hacer que las celdas tengan un tamaño uniforme.

El siguiente ejemplo muestra cómo ajustar el tamaño de una tabla y sus celdas:

table {
    width: 80%; /* Ancho de la tabla */
    table-layout: fixed; /* Establece un tamaño fijo para las celdas */
}
th, td {
    border: 1px solid black;
    padding: 8px;
    height: 50px; /* Altura de las celdas */
}

Ejemplos Visuales

Ejemplo de Tamaños de Tablas

Este es un ejemplo de una tabla con tamaños de celdas definidos:

Encabezado 1 Encabezado 2 Encabezado 3
Dato 1 Dato 2 Dato 3

En este ejemplo, hemos ajustado el ancho de la tabla al 80% del contenedor y hemos dado un tamaño fijo a las celdas con la propiedad table-layout: fixed;. También hemos especificado la altura de las celdas a 50px.



Alineamiento Horizontal de una Tabla

Aquí aprenderás cómo alinear una tabla horizontalmente en su contenedor usando las propiedades de CSS adecuadas, como margin y text-align.

Para alinear una tabla en su contenedor, puedes usar la propiedad margin con los valores auto para centrar la tabla. La propiedad text-align se usa para alinear el contenido de las celdas dentro de la tabla.

El siguiente ejemplo muestra cómo alinear una tabla horizontalmente en su contenedor:

table {
    width: 60%; /* Ancho de la tabla */
    margin: 0 auto; /* Alineación horizontal centrada */
}
th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: center; /* Alineación del contenido de las celdas */
}

Ejemplos Visuales

Ejemplo de Alineamiento Horizontal de la Tabla

Este es un ejemplo de cómo alinear una tabla horizontalmente en su contenedor usando CSS:

Encabezado 1 Encabezado 2
Dato 1 Dato 2

En este ejemplo, hemos utilizado margin: 0 auto para centrar la tabla en el contenedor, y text-align: center para centrar el contenido dentro de las celdas.



Alineamiento Vertical de una Tabla

En este tema se explica cómo alinear el contenido de las celdas de una tabla de forma vertical utilizando CSS.

Para alinear el contenido verticalmente dentro de las celdas de una tabla, se pueden usar propiedades como vertical-align en las celdas de la tabla (td y th).

En el siguiente ejemplo, se muestra cómo alinear el contenido de las celdas en la parte superior, en el centro y en la parte inferior:

td {
    height: 100px; /* Establece una altura para ver el alineamiento vertical */
}
.top {
    vertical-align: top; /* Alinea el contenido en la parte superior */
}
.middle {
    vertical-align: middle; /* Alinea el contenido al centro */
}
.bottom {
    vertical-align: bottom; /* Alinea el contenido en la parte inferior */
}

Ejemplos Visuales

Ejemplo de Alineamiento Vertical de las Celdas

Este es un ejemplo de cómo alinear el contenido de las celdas verticalmente dentro de una tabla:

Encabezado 1 Encabezado 2
Alineación Superior Alineación Media
Alineación Inferior Alineación Inferior

En este ejemplo, hemos utilizado la propiedad vertical-align para alinear el contenido de las celdas. Los valores utilizados son:

  • top: Alineación en la parte superior de la celda.
  • middle: Alineación al centro de la celda.
  • bottom: Alineación en la parte inferior de la celda.


Padding en una Tabla

Aprende cómo aplicar el padding a las celdas de una tabla para mejorar su espaciamiento y legibilidad.

El padding se utiliza para agregar espacio dentro de las celdas de la tabla, separando el contenido de las celdas de sus bordes. Esto hace que el contenido sea más legible y estéticamente agradable.

En el siguiente ejemplo, se utiliza padding en las celdas de la tabla para agregar espacio alrededor del contenido:

table, th, td {
    border: 1px solid black;
    padding: 15px; /* Aplica padding de 15px a todas las celdas de la tabla */
}


Ejemplos Visuales

Ejemplo de Padding en las Celdas de una Tabla

Este es un ejemplo de cómo se ve el efecto del padding en las celdas de una tabla:

Encabezado 1 Encabezado 2
Contenido de la celda 1 Contenido de la celda 2
Contenido de la celda 3 Contenido de la celda 4

En este ejemplo, hemos agregado un padding de 15px a todas las celdas de la tabla (incluidos los encabezados th y las celdas de datos td) para crear un espacio uniforme alrededor del contenido.



Bordes Horizontales

En este tema aprenderás cómo aplicar bordes solamente en las filas de una tabla, creando divisores horizontales sin bordes verticales. Esto se logra utilizando la propiedad border-bottom o border-top en las filas de la tabla <tr>, y dejando las celdas <td> o <th> sin bordes laterales.

Este estilo es útil cuando deseas una tabla más limpia y ordenada, con solo divisores horizontales entre las filas.

            
<table style="width: 100%; border-collapse: collapse;">
    <tr style="border-bottom: 2px solid black;">
        <th>Encabezado 1</th>
        <th>Encabezado 2</th>
    </tr>
    <tr style="border-bottom: 2px solid black;">
        <td>Dato 1</td>
        <td>Dato 2</td>
    </tr>
    <tr style="border-bottom: 2px solid black;">
        <td>Dato 3</td>
        <td>Dato 4</td>
    </tr>
</table>

Ejemplos Visuales

Ejemplo de Bordes Horizontales en una Tabla

En el siguiente ejemplo, puedes ver cómo se aplican bordes solo en las filas de la tabla:

Encabezado 1 Encabezado 2
Dato 1 Dato 2
Dato 3 Dato 4

En este ejemplo, hemos utilizado la propiedad border-bottom para aplicar un borde solo en la parte inferior de cada fila. Las celdas no tienen bordes verticales, lo que crea un diseño más limpio con solo líneas horizontales entre las filas.



Tabla pasando el ratón (:hover)

En este tema aprenderás a usar el selector :hover para cambiar el estilo de las filas de una tabla cuando el ratón pasa sobre ellas. Esto se logra añadiendo una regla CSS que cambia las propiedades de estilo de las filas de la tabla, como el color de fondo, cuando el usuario interactúa con ellas.

El efecto de :hover mejora la interacción del usuario al hacer la tabla más dinámica y visualmente atractiva.


            
 <!-- Tabla con efecto :hover para cambio de color de fondo -->
 <table style="width: 100%; border-collapse: collapse; border: 1px solid #ccc;">
     <tr style="background-color: #f2f2f2; border: 1px solid #ccc;">
         <th style="border: 1px solid #ccc; padding: 8px;">Encabezado 1</th>
         <th style="border: 1px solid #ccc; padding: 8px;">Encabezado 2</th>
     </tr>
     <tr style="background-color: #ffffff;" onmouseover="this.style.backgroundColor='orange'" 
         onmouseout="this.style.backgroundColor='#ffffff'" style="border: 1px solid #ccc;">
         <td style="border: 1px solid #ccc; padding: 8px;">Dato 1</td>
         <td style="border: 1px solid #ccc; padding: 8px;">Dato 2</td>
     </tr>
     <tr style="background-color: #ffffff;" onmouseover="this.style.backgroundColor='orange'" 
         onmouseout="this.style.backgroundColor='#ffffff'" style="border: 1px solid #ccc;">
         <td style="border: 1px solid #ccc; padding: 8px;">Dato 3</td>
         <td style="border: 1px solid #ccc; padding: 8px;">Dato 4</td>
     </tr>
     <tr style="background-color: #ffffff;" onmouseover="this.style.backgroundColor='orange'" 
         onmouseout="this.style.backgroundColor='#ffffff'" style="border: 1px solid #ccc;">
         <td style="border: 1px solid #ccc; padding: 8px;">Dato 5</td>
         <td style="border: 1px solid #ccc; padding: 8px;">Dato 6</td>
     </tr>
     <tr style="background-color: #ffffff;" onmouseover="this.style.backgroundColor='orange'" 
         onmouseout="this.style.backgroundColor='#ffffff'" style="border: 1px solid #ccc;">
         <td style="border: 1px solid #ccc; padding: 8px;">Dato 7</td>
         <td style="border: 1px solid #ccc; padding: 8px;">Dato 8</td>
     </tr>
     <tr style="background-color: #ffffff;" onmouseover="this.style.backgroundColor='orange'" 
         onmouseout="this.style.backgroundColor='#ffffff'" style="border: 1px solid #ccc;">
         <td style="border: 1px solid #ccc; padding: 8px;">Dato 9</td>
         <td style="border: 1px solid #ccc; padding: 8px;">Dato 10</td>
     </tr>
 </table>

Ejemplo Visual

Encabezado 1 Encabezado 2
Dato 1 Dato 2
Dato 3 Dato 4
Dato 5 Dato 6
Dato 7 Dato 8
Dato 9 Dato 10


Tabla Striped

El estilo "striped" se utiliza para mejorar la legibilidad de las tablas mediante la alternancia de colores entre las filas. Esta técnica es útil cuando se manejan grandes cantidades de datos, ya que facilita la visualización y comparación de la información de cada fila. Para lograr este efecto, se puede usar CSS para aplicar colores alternados en las filas de una tabla.

En la siguiente sección, verás cómo aplicar este estilo utilizando la propiedad :nth-child de CSS. 


                
    <!-- Tabla Striped con CSS personalizado -->
    <table style="width: 100%; border-collapse: collapse; border: 1px solid black;">
        <tr style="background-color: #f2f2f2; border: 1px solid black;">
            <th style="border: 1px solid black;">Encabezado 1</th>
            <th style="border: 1px solid black;">Encabezado 2</th>
        </tr>
        <tr style="background-color: #ffffff; border: 1px solid black;">
            <td style="border: 1px solid black;">Dato 1</td>
            <td style="border: 1px solid black;">Dato 2</td>
        </tr>
        <tr style="background-color: #f9f9f9; border: 1px solid black;">
            <td style="border: 1px solid black;">Dato 3</td>
            <td style="border: 1px solid black;">Dato 4</td>
        </tr>
        <tr style="background-color: #ffffff; border: 1px solid black;">
            <td style="border: 1px solid black;">Dato 5</td>
            <td style="border: 1px solid black;">Dato 6</td>
        </tr>
        <tr style="background-color: #f9f9f9; border: 1px solid black;">
            <td style="border: 1px solid black;">Dato 7</td>
            <td style="border: 1px solid black;">Dato 8</td>
        </tr>
        <tr style="background-color: #ffffff; border: 1px solid black;">
            <td style="border: 1px solid black;">Dato 9</td>
            <td style="border: 1px solid black;">Dato 10</td>
        </tr>
    </table>

Ejemplo Visual

Encabezado 1 Encabezado 2
Dato 1 Dato 2
Dato 3 Dato 4
Dato 5 Dato 6
Dato 7 Dato 8
Dato 9 Dato 10


Tablas Coloridas con Bootstrap

Las tablas coloridas pueden ser una forma efectiva de mejorar la apariencia de los datos que presentas. Con Bootstrap, podemos usar clases como table, table-success, table-danger, y table-primary para agregar color a las tablas de manera sencilla.

Por ejemplo, table-success aplica un fondo verde claro, table-danger un fondo rojo, y table-primary un fondo azul.


            
                <!-- Tabla Amarilla -->
                <table class="table table-warning table-striped">
                    <thead>
                        <tr>
                            <th>Encabezado 1</th>
                            <th>Encabezado 2</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Dato 1</td>
                            <td>Dato 2</td>
                        </tr>
                        <tr>
                            <td>Dato 3</td>
                            <td>Dato 4</td>
                        </tr>
                    </tbody>
                </table>

                <!-- Tabla Roja -->
                <table class="table table-danger table-striped">
                    <thead>
                        <tr>
                            <th>Encabezado 1</th>
                            <th>Encabezado 2</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Dato 1</td>
                            <td>Dato 2</td>
                        </tr>
                        <tr>
                            <td>Dato 3</td>
                            <td>Dato 4</td>
                        </tr>
                    </tbody>
                </table>

                <!-- Tabla Azul -->
                <table class="table table-primary table-striped">
                    <thead>
                        <tr>
                            <th>Encabezado 1</th>
                            <th>Encabezado 2</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Dato 1</td>
                            <td>Dato 2</td>
                        </tr>
                        <tr>
                            <td>Dato 3</td>
                            <td>Dato 4</td>
                        </tr>
                    </tbody>
                </table>

Ejemplo Visual

Tabla Amarilla
Encabezado 1 Encabezado 2
Dato 1 Dato 2
Dato 3 Dato 4

Tabla Roja
Encabezado 1 Encabezado 2
Dato 1 Dato 2
Dato 3 Dato 4

Tabla Azul
Encabezado 1 Encabezado 2
Dato 1 Dato 2
Dato 3 Dato 4


Tablas Responsivas

Las tablas responsivas son aquellas que se adaptan al tamaño de la pantalla en la que se visualizan, lo que permite una mejor experiencia en dispositivos móviles o pantallas más pequeñas. Para hacer que una tabla sea responsiva, se puede utilizar la propiedad overflow-x junto con un contenedor que permita desplazamiento horizontal cuando la tabla sea más ancha que el área visible en la pantalla.

En este tema, aprenderás cómo implementar una tabla responsiva usando clases de Bootstrap que ayudan a gestionar este comportamiento en pantallas pequeñas.

El código básico para una tabla responsiva es el siguiente:

                        
    <div style="overflow-x:auto;">
        <table>
            ... table content ...
        </table>
    </div>

Ejemplo Visual

Encabezado 1 Encabezado 2 Encabezado 3 Encabezado 4 Encabezado 5
Dato 1 Dato 2 Dato 3 Dato 4 Dato 5
Dato 6 Dato 7 Dato 8 Dato 9 Dato 10
Dato 11 Dato 12 Dato 13 Dato 14 Dato 15
Dato 16 Dato 17 Dato 18 Dato 19 Dato 20






Tags:
Jorge Catalao

Posted by: Jorge Catalao

Durante el decorrer de los años y ya desde niño mis gustos preferidos, fue siempre la electrónica y la programación, eso que llevo a que me formase en varias escuelas profesionales, en temas tales como: electrónica Electricidad programación Técnicas de refrigeración etc. Tengo varias carreras profesionales relacionadas a los temas anteriormente descritos, precisamente por ese motivo, me he entusiasmado a crear un blog donde los temas serán los mencionados anteriormente. Espero que a mis visitantes les guste, y se aprovechen de los conocimientos que llevo años recopilando. Si eres estudiante de electricidad, electrónica o programación, aquí vas adquirir los conocimientos básicos, tanto para que continúes tus estudios, como para tu formación profesional. Cursos completos desde cero, los iré recopilando poco a poco, los cuales servirán para consulta tanto de estudiantes como electricistas profesionales, será como un manual o mas bien dicho un resumen donde podremos encontrar lo que necesitamos. Bueno espero que vos guste y me seguis, ya que los temas los ire duplicar tanto nel blog, como en mi canal de youtube.

Publicar un comentario

0 Comentarios

Si desea contactar comigo, lo puede hacer atravez deste formulario gracias