Articles
Introducción a CSS
Propiedades de CSS relacionadas con tablas

Propiedades de CSS relacionadas con tablas

Este artículo explica las propiedades de CSS relacionadas con tablas.

Puedes aprender cómo usar y escribir propiedades para diseños de tablas, bordes, posiciones de leyendas y más.

YouTube Video

HTML para vista previa

css-table.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-table.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Table Related CSS Properties</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Table Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>table-layout</h3>
 23            <section>
 24                <header><h4>table-layout: auto</h4></header>
 25                <section class="sample-view">
 26                    <table class="table-layout-auto">
 27                        <thead>
 28                            <tr>
 29                                <th>Column 1</th>
 30                                <th>Column 2</th>
 31                                <th>Column 3</th>
 32                            </tr>
 33                        </thead>
 34                        <tbody>
 35                            <tr>
 36                                <td>Short</td>
 37                                <td>Some longer content here</td>
 38                                <td>Content</td>
 39                            </tr>
 40                            <tr>
 41                                <td>Another short one</td>
 42                                <td>This is a much longer piece of text to demonstrate the auto layout</td>
 43                                <td>Short</td>
 44                            </tr>
 45                        </tbody>
 46                    </table>
 47                </section>
 48            </section>
 49            <section>
 50                <header><h4>table-layout: fixed</h4></header>
 51                <section class="sample-view">
 52                    <table class="table-layout-fixed">
 53                        <thead>
 54                            <tr>
 55                                <th>Column 1</th>
 56                                <th>Column 2</th>
 57                                <th>Column 3</th>
 58                            </tr>
 59                        </thead>
 60                        <tbody>
 61                            <tr>
 62                                <td>Short</td>
 63                                <td>Some longer content here</td>
 64                                <td>Content</td>
 65                            </tr>
 66                            <tr>
 67                                <td>Another short one</td>
 68                                <td>This is a much longer piece of text to demonstrate the fixed layout</td>
 69                                <td>Short</td>
 70                            </tr>
 71                        </tbody>
 72                    </table>
 73                </section>
 74            </section>
 75        </article>
 76        <article>
 77            <h3>border-collapse</h3>
 78            <section>
 79                <header><h4>border-collapse: separate</h4></header>
 80                <section class="sample-view">
 81                    <table class="border-collapse-separate">
 82                        <thead>
 83                            <tr>
 84                                <th>Header 1</th>
 85                                <th>Header 2</th>
 86                                <th>Header 3</th>
 87                            </tr>
 88                        </thead>
 89                        <tbody>
 90                            <tr>
 91                                <td>Cell 1</td>
 92                                <td>Cell 2</td>
 93                                <td>Cell 3</td>
 94                            </tr>
 95                            <tr>
 96                                <td>Cell 4</td>
 97                                <td>Cell 5</td>
 98                                <td>Cell 6</td>
 99                            </tr>
100                        </tbody>
101                    </table>
102                </section>
103            </section>
104            <section>
105                <header><h4>border-collapse: collapse</h4></header>
106                <section class="sample-view">
107                    <table class="border-collapse-collapse">
108                        <thead>
109                            <tr>
110                                <th>Header 1</th>
111                                <th>Header 2</th>
112                                <th>Header 3</th>
113                            </tr>
114                        </thead>
115                        <tbody>
116                            <tr>
117                                <td>Cell 1</td>
118                                <td>Cell 2</td>
119                                <td>Cell 3</td>
120                            </tr>
121                            <tr>
122                                <td>Cell 4</td>
123                                <td>Cell 5</td>
124                                <td>Cell 6</td>
125                            </tr>
126                        </tbody>
127                    </table>
128                </section>
129            </section>
130        </article>
131        <article>
132            <h3>border-spacing</h3>
133            <section>
134                <header><h4>border-spacing: 5px 20px</h4></header>
135                <section class="sample-view">
136                    <table class="border-spacing-example">
137                        <thead>
138                            <tr>
139                                <th>Header 1</th>
140                                <th>Header 2</th>
141                                <th>Header 3</th>
142                            </tr>
143                        </thead>
144                        <tbody>
145                            <tr>
146                                <td>Cell 1</td>
147                                <td>Cell 2</td>
148                                <td>Cell 3</td>
149                            </tr>
150                            <tr>
151                                <td>Cell 4</td>
152                                <td>Cell 5</td>
153                                <td>Cell 6</td>
154                            </tr>
155                        </tbody>
156                    </table>
157                </section>
158            </section>
159        </article>
160        <article>
161            <h3>caption-side</h3>
162            <section>
163                <header><h4>caption-side: top</h4></header>
164                <section class="sample-view">
165                    <table>
166                        <caption class="caption-side-top">
167                            Table Caption on Top
168                        </caption>
169                        <thead>
170                            <tr>
171                                <th>Header 1</th>
172                                <th>Header 2</th>
173                                <th>Header 3</th>
174                            </tr>
175                        </thead>
176                        <tbody>
177                            <tr>
178                                <td>Data 1</td>
179                                <td>Data 2</td>
180                                <td>Data 3</td>
181                            </tr>
182                            <tr>
183                                <td>Data 4</td>
184                                <td>Data 5</td>
185                                <td>Data 6</td>
186                            </tr>
187                        </tbody>
188                    </table>
189                </section>
190            </section>
191            <section>
192                <header><h4>caption-side: bottom</h4></header>
193                <section class="sample-view">
194                    <table>
195                        <caption class="caption-side-bottom">
196                            Table Caption on Bottom
197                        </caption>
198                        <thead>
199                            <tr>
200                                <th>Header 1</th>
201                                <th>Header 2</th>
202                                <th>Header 3</th>
203                            </tr>
204                        </thead>
205                        <tbody>
206                            <tr>
207                                <td>Data 1</td>
208                                <td>Data 2</td>
209                                <td>Data 3</td>
210                            </tr>
211                            <tr>
212                                <td>Data 4</td>
213                                <td>Data 5</td>
214                                <td>Data 6</td>
215                            </tr>
216                        </tbody>
217                    </table>
218                </section>
219            </section>
220        </article>
221        <article>
222            <h3>empty-cells</h3>
223            <section>
224                <header><h4>empty-cells: show</h4></header>
225                <section class="sample-view">
226                    <table class="empty-cells-show">
227                        <tr>
228                            <th>Header 1</th>
229                            <th>Header 2</th>
230                            <th>Header 3</th>
231                        </tr>
232                        <tr>
233                            <td>Data 1</td>
234                            <td></td> <!-- Empty cell -->
235                            <td>Data 3</td>
236                        </tr>
237                        <tr>
238                            <td>Data 4</td>
239                            <td></td> <!-- Empty cell -->
240                            <td>Data 6</td>
241                        </tr>
242                    </table>
243                </section>
244            </section>
245            <section>
246                <header><h4>empty-cells: hide</h4></header>
247                <section class="sample-view">
248                    <table class="empty-cells-hide">
249                        <tr>
250                            <th>Header 1</th>
251                            <th>Header 2</th>
252                            <th>Header 3</th>
253                        </tr>
254                        <tr>
255                            <td>Data 1</td>
256                            <td></td> <!-- Empty cell -->
257                            <td>Data 3</td>
258                        </tr>
259                        <tr>
260                            <td>Data 4</td>
261                            <td></td> <!-- Empty cell -->
262                            <td>Data 6</td>
263                        </tr>
264                    </table>
265                </section>
266            </section>
267        </article>
268    </main>
269</body>
270</html>

Diseño de tabla

Propiedad table-layout 

 1table {
 2    width: 100%;
 3}
 4
 5th, td {
 6    border: 1px solid black;
 7    padding: 10px;
 8}
 9
10table.table-layout-auto {
11    border-collapse: collapse;
12    table-layout: auto;
13}
14
15table.table-layout-fixed {
16    border-collapse: collapse;
17    table-layout: fixed;
18}
19
20table.table-layout-fixed th {
21    width: 33.33%; /* Distribute width equally among 3 columns */
22}

table-layout es una propiedad de CSS que controla el método de diseño de las tablas HTML. Esta propiedad permite especificar cómo calcular los anchos de las columnas de una tabla.

  • En la clase table-layout-auto, los anchos de las columnas se determinan según el contenido dentro de cada celda.

  • Los anchos de las columnas varían según el contenido, y las celdas con contenido extenso ampliarán la columna.

  • La clase table-layout-fixed utiliza table-layout: fixed.

  • El ancho de cada columna se establece de manera igualitaria, y no cambia incluso si el contenido es largo.

Valores de table-layout 

1table {
2    table-layout: auto;
3}
4
5table {
6    table-layout: fixed;
7}

table-layout tiene principalmente dos valores: auto y fixed.

  1. auto (valor por defecto):

    • Especificar auto ajusta automáticamente los anchos de las columnas de la tabla según el contenido.
    • El navegador lee todo el contenido de cada celda y determina el ancho de cada columna basándose en ese contenido.
    • Esto puede resultar en un renderizado más lento de toda la tabla.

  2. fixed:

    • Especificar fixed significa que el ancho de cada columna se determina por el ancho de las celdas en la primera fila o por el atributo width.
    • Se dibuja toda la tabla de inmediato y los anchos de las columnas se determinan sin leer todo el contenido.
    • El rendimiento mejora incluso cuando hay muchos datos en la tabla.

Diferencia entre table-layout: auto y table-layout: fixed

  • Con auto, el ancho de la tabla se ajusta automáticamente según el contenido. Es posible un diseño más dinámico, pero el rendimiento puede empeorar con tablas complejas.
  • Con fixed, los anchos de columna son fijos, manteniendo un diseño consistente independientemente del contenido de la tabla. Aunque el rendimiento mejora, el contenido puede truncarse si no se ajusta al ancho.

La propiedad border-collapse 

1table.border-collapse-separate {
2    border-collapse: separate;
3    border-spacing: 10px; /* Set space between cells */
4}
5
6table.border-collapse-collapse {
7    border-collapse: collapse;
8}

border-collapse es una propiedad de CSS que controla cómo se muestran los bordes entre las celdas de la tabla. Se utiliza para definir cómo se muestran los bordes entre las celdas de una tabla.

  • Al usar border-collapse: separate, habrá bordes distintos y espacios entre las celdas. El espacio entre celdas se ajusta con la propiedad border-spacing. En este ejemplo, se establece un espacio de 10px entre cada celda.

  • Al usar border-collapse: collapse, los bordes de las celdas adyacentes se combinan y se muestran como un solo borde. Como resultado, la tabla tiene un diseño más cohesivo.

Como en este ejemplo, la propiedad border-collapse tiene principalmente dos valores: separate y collapse.

  1. separate (valor predeterminado):

    • Al especificar separate, el borde de cada celda se dibuja por separado y hay espacio entre las celdas.
    • Se utiliza cuando se quieren distinguir claramente los bordes, ya que los bordes de las celdas se muestran separados.
    • El espacio entre celdas se puede ajustar con la propiedad border-spacing.

  2. collapse:

    • Al especificar collapse, los bordes de las celdas adyacentes se combinan y se muestran como un solo borde.
    • Debido a que los bordes se superponen, toda la tabla tiene una apariencia unificada.
    • Las filas y columnas de la tabla se muestran ordenadamente, lo que la hace adecuada para un diseño más sencillo.

La propiedad border-spacing 

1table.border-spacing-example {
2    border-collapse: separate;
3
4    /* Set 5px spacing between columns and 20px spacing between rows */
5    border-spacing: 5px 20px;
6}

La propiedad border-spacing es una propiedad CSS para especificar el espacio entre las celdas en una tabla HTML. Ayuda a ajustar el espacio entre las celdas de la tabla y a controlar el margen visual. En este ejemplo, se agrega un espacio de 5px horizontalmente y de 20px verticalmente entre las celdas.

La propiedad border-spacing solo surte efecto en tablas donde se especifica border-collapse: separate;. Si se especifica border-collapse: collapse;, esta propiedad no surte efecto.

Uso

Los valores de la propiedad border-spacing se especifican en píxeles u otras unidades de longitud. Se puede especificar en los siguientes dos formatos:.

  1. Valor único
1table {
2    border-spacing: 10px;
3}
  • Al especificar un solo valor, el espacio entre las filas (arriba y abajo) y las columnas (izquierda y derecha) se establece en el mismo valor.

En este ejemplo, se agrega un espacio de 10px entre todas las celdas.

  1. Dos valores
1table {
2    border-spacing: 10px 20px;
3}
  • Al especificar dos valores, el primer valor establece el espacio horizontal entre las columnas y el segundo valor establece el espacio vertical entre las filas.

En este ejemplo, el espacio entre columnas es de 10px y el espacio entre filas es de 20px.

La propiedad caption-side 

 1caption.caption-side-top {
 2    caption-side: top; /* Display the caption at the top of the table */
 3    font-weight: bold;
 4    font-size: 1.2em;
 5    margin-bottom: 10px;
 6    background-color: #ccc;
 7}
 8
 9caption.caption-side-bottom {
10    caption-side: bottom; /* Display the caption at the bottom of the table */
11    font-weight: bold;
12    font-size: 1.2em;
13    margin-top: 10px;
14    background-color: #ccc;
15}

La propiedad caption-side es una propiedad de CSS que se utiliza para especificar dónde se muestra el título (elemento <caption>) de una tabla HTML.

  • Especificar top muestra el título en la parte superior de la tabla.

    • Esta es la configuración predeterminada, y los títulos suelen usarse como el título o la descripción de la tabla.

  • Especificar bottom muestra el título en la parte inferior de la tabla.

    • Utilice esto cuando desee colocar explicaciones debajo de la tabla.

Propiedad empty-cells 

1table.empty-cells-show {
2    empty-cells: show; /* Display empty cells */
3}
4
5table.empty-cells-hide {
6    empty-cells: hide; /* Display empty cells */
7}

La propiedad empty-cells es una propiedad de CSS para controlar si las celdas vacías en una tabla HTML se muestran. Por defecto, las celdas vacías en una tabla también muestran bordes, pero puedes usar esta propiedad para controlar su visualización.

  • Especificar show también mostrará las celdas vacías. Este es el comportamiento predeterminado.
  • Especificar hide hace que las celdas vacías sean invisibles. No se dibujarán los bordes ni los fondos de las celdas.

Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.

YouTube Video

Propiedades CSS relacionadas con listasPropiedades de CSS relacionadas con el diseño