Articles
Introdução ao CSS
Propriedades de CSS relacionadas a tabelas

Propriedades de CSS relacionadas a tabelas

Este artigo explica as propriedades de CSS relacionadas a tabelas.

Você pode aprender a usar e escrever propriedades para layouts de tabelas, bordas, posições de legendas e mais.

YouTube Video

HTML para Visualização

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>

Layout de tabela

Propriedade 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 é uma propriedade de CSS que controla o método de layout de tabelas HTML. Esta propriedade permite especificar como calcular a largura das colunas de uma tabela.

  • Na classe table-layout-auto, as larguras das colunas são determinadas com base no conteúdo dentro de cada célula.

  • As larguras das colunas variam de acordo com o conteúdo, e células com conteúdo longo alargarão a coluna.

  • A classe table-layout-fixed usa table-layout: fixed.

  • A largura de cada coluna é definida igualmente, e a largura não muda mesmo que o conteúdo seja longo.

Valores de table-layout 

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

table-layout possui principalmente dois valores: auto e fixed.

  1. auto (valor padrão):

    • Especificar auto ajusta automaticamente as larguras das colunas da tabela com base no conteúdo.
    • O navegador lê todo o conteúdo de cada célula e determina a largura de cada coluna com base nesse conteúdo.
    • Isso pode resultar em uma renderização mais lenta de toda a tabela.

  2. fixed:

    • Especificar fixed significa que a largura de cada coluna é determinada pela largura das células na primeira linha ou pelo atributo width.
    • A tabela inteira é desenhada imediatamente e as larguras das colunas são determinadas sem ler todo o conteúdo.
    • O desempenho melhora mesmo quando há muitos dados na tabela.

Diferença entre table-layout: auto e table-layout: fixed

  • Com auto, a largura da tabela se ajusta automaticamente de acordo com o conteúdo. Um layout mais dinâmico é possível, mas o desempenho pode piorar com tabelas complexas.
  • Com fixed, as larguras das colunas são fixas, mantendo um layout consistente independentemente do conteúdo da tabela. Embora o desempenho melhore, o conteúdo pode ser truncado se não couber na largura.

A propriedade 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 é uma propriedade CSS que controla como as bordas entre as células da tabela são exibidas. É usada para definir como as bordas entre as células da tabela são exibidas.

  • Com border-collapse: separate, haverá bordas distintas e espaços entre as células. O espaçamento entre as células é ajustado com a propriedade border-spacing. Neste exemplo, um espaço de 10px é definido entre cada célula.

  • Com border-collapse: collapse, as bordas das células adjacentes são mescladas e exibidas como uma única borda. Como resultado, a tabela possui um design mais coeso.

Como neste exemplo, a propriedade border-collapse possui principalmente dois valores: separate e collapse.

  1. separate (valor padrão):

    • Ao especificar separate, cada borda da célula é desenhada separadamente e há espaço entre as células.
    • É usada quando você deseja distinguir claramente as bordas, pois as bordas das células são exibidas separadas.
    • O espaço entre as células pode ser ajustado com a propriedade border-spacing.

  2. collapse:

    • Ao especificar collapse, as bordas das células adjacentes são mescladas e exibidas como uma única borda.
    • Como as bordas se sobrepõem, toda a tabela possui uma aparência unificada.
    • As linhas e colunas da tabela são exibidas de forma organizada, tornando-a adequada para um design mais simples.

A propriedade 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}

A propriedade border-spacing é uma propriedade CSS para especificar o espaçamento entre células em uma tabela HTML. Ela ajuda a ajustar o espaço entre as células da tabela e a controlar a margem visual. Neste exemplo, o espaçamento das células é adicionado como 5px horizontalmente e 20px verticalmente.

A propriedade border-spacing só tem efeito em tabelas onde border-collapse: separate; é especificado. Se border-collapse: collapse; for especificado, esta propriedade será ineficaz.

Uso

Os valores para a propriedade border-spacing são especificados em pixels ou outras unidades de comprimento. Pode ser especificado nos dois formatos a seguir:.

  1. Valor único
1table {
2    border-spacing: 10px;
3}
  • Ao especificar um único valor, o espaçamento entre as linhas (superior e inferior) e as colunas (esquerda e direita) é definido como o mesmo valor.

Neste exemplo, um espaçamento de 10px é adicionado entre todas as células.

  1. Dois valores
1table {
2    border-spacing: 10px 20px;
3}
  • Ao especificar dois valores, o primeiro define o espaçamento horizontal entre as colunas, e o segundo define o espaçamento vertical entre as linhas.

Neste exemplo, o espaçamento entre as colunas é de 10px e o espaçamento entre as linhas é de 20px.

A propriedade 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}

A propriedade caption-side é uma propriedade CSS usada para especificar onde a legenda (elemento <caption>) de uma tabela HTML será exibida.

  • Especificar top exibe a legenda na parte superior da tabela.

    • Esta é a configuração padrão, e as legendas são frequentemente usadas como o título ou descrição da tabela.

  • Especificar bottom exibe a legenda na parte inferior da tabela.

    • Use esta configuração quando quiser colocar explicações abaixo da tabela.

Propriedade 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}

A empty-cells é uma propriedade CSS para controlar se as células vazias em uma tabela HTML serão exibidas. Por padrão, as células vazias em uma tabela também exibem bordas, mas você pode usar esta propriedade para controlar a exibição.

  • Especificar show exibirá também as células vazias. Esse é o comportamento padrão.
  • Especificar hide torna as células vazias invisíveis. As bordas e os fundos das células não serão desenhados.

Você pode acompanhar o artigo acima usando o Visual Studio Code em nosso canal do YouTube. Por favor, confira também o canal do YouTube.

YouTube Video

Propriedades CSS relacionadas a listasPropriedades de CSS relacionadas ao layout