Estilização de tabelas em HTML
Acreditamos que, ao revisar o estilo da tabela HTML usando os exemplos deste artigo, os objetivos de aprendizado serão atendidos.
Importância
Estilizar tabelas em HTML é importante por vários motivos:
- Tabelas bem estilizadas podem ser visualmente atraentes e podem melhorar a aparência geral de um site. Isso pode melhorar a experiência do usuário e tornar o site mais envolvente.
- Ao aplicar o estilo apropriado às tabelas, você pode melhorar a legibilidade do conteúdo. Isso pode ajudar os usuários a entender melhor as informações apresentadas na tabela.
- Ao usar um estilo apropriado, você também pode tornar as tabelas mais acessíveis para usuários com deficiências, como aqueles que usam leitores de tela. Por exemplo, usando o contraste de cores apropriado, você pode garantir que o conteúdo da tabela seja legível para todos os usuários.
- Ao estilizar as tabelas para combinar com a marca e o design do seu site, você pode criar uma aparência consistente em todo o site. Isso pode ajudar a reforçar a identidade da sua marca e tornar seu site mais memorável.
- Ao usar o estilo para diferenciar entre diferentes tipos de dados em uma tabela, você pode tornar a tabela mais funcional e fácil de usar. Por exemplo, usando diferentes cores de fundo para destacar diferentes linhas ou colunas, você pode ajudar os usuários a identificar informações importantes rapidamente.
Por exemplo, a tabela a seguir foi projetada usando CSS, o que a torna bastante atraente e atraente para os usuários:
Example:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
charset="UTF-8"
Mr Example Table
rel="stylesheet" href="css/style.css"
html,
body {
height: 100%;
}
body {
margin: 0;
background: -webkit-linear-gradient(45deg, #49a09d, #5f2c82);
background: linear-gradient(45deg, #49a09d, #5f2c82);
font-family: sans-serif;
font-weight: 100;
}
.container {
position: absolute;
top: 15%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: rgba(84, 18, 18, 0.708);
}
table {
width: 600px;
border-collapse: collapse;
overflow: hidden;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
th,
td {
padding: 15px;
background-color: rgba(255, 255, 255, 0.2);
color: #fff;
}
th {
text-align: left;
}
thead th {
background-color: #55608f;
}
tbody tr:hover {
background-color: rgba(255, 255, 255, 0.3);
}
tbody td {
position: relative;
}
tbody td:hover:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: -9999px;
bottom: -9999px;
background-color: rgba(255, 255, 255, 0.2);
z-index: -1;
}
.w{
text-align: center;
font-size:80px
}
class="container"
class="w"Mr. Examples
Column 1
Column 2
Column 3
Column 4
Column 5
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Índice-
Estilização de tabela HTML – listras de zebra verticais
Você deve estilizar cada coluna no lugar de cada linha, para obter listras de zebra verticais.
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 |
Atribua o atributo :nth-child(even) aos elementos de dados da tabela da seguinte maneira:
Example:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
td:nth-child(even),
th:nth-child(even) {
background-color: #7d3535;
}
Header 1
Header 2
Header 3
Row 1 Column 1
Row 1 Column 2
Row 1 Column 3
Row 2 Column 1
Row 2 Column 2
Row 2 Column 3
IMPORTANTE: Você pode estilizar os cabeçalhos e as células regulares da tabela aplicando o seletor :nth-child() às tags <th> e <td> .
Listras de zebra na vertical e na horizontal
Você pode combinar o CSS dos dois exemplos acima para ter listras em cada coluna e linha de uma tabela HTML.
A sobreposição ocorrerá se você usar uma cor transparente.
A transparência pode ser determinada usando cores rgba() :
Example:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
tr:nth-child(even) {
background-color: rgba(225, 159, 159, 0.6);
}
th:nth-child(even), td:nth-child(even) {
background-color: rgba(220, 133, 141, 0.7);
}
Technology
Description
Artificial Intelligence
The field of computer science that focuses on creating machines that can think and work like humans.
Blockchain
A digital ledger of transactions that is securely stored across a network of computers.
Cloud Computing
The delivery of computing services, including servers, storage, databases, networking, software, analytics, and intelligence, over the Internet to offer faster innovation, flexible resources, and economies of scale.
Estilização de Tabela HTML – Listras Zebra
As tabelas HTML podem ser estilizadas com um efeito de listras de zebra, atribuindo uma cor de fundo a todas as linhas.
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 |
Para estilizar cada linha subseqüente do elemento da tabela, use o seletor :nth-child(even) da seguinte forma:
Example:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
tr:nth-child(even) {
background-color: #8e3b3b;
}
Header 1
Header 2
Header 3
Row 1 Column 1
Row 1 Column 2
Row 1 Column 3
Row 2 Column 1
Row 2 Column 2
Row 2 Column 3
IMPORTANTE: O estilo aparecerá nas linhas 1,3,5 etc. No lugar de 2,4,6 etc. Quando você escolher (ímpar) em vez de (par).
Tabela flutuante
Para realçar as linhas da tabela ao passar o mouse, aplique o seletor :hover em tr:
First Name Last Name Savings David Willey $69 Sam Curran $230 Curran thomas $480
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
Example:
Execute
tr:hover {
background-color: #421b1b;
}
Technology
Description
Artificial Intelligence
The field of computer science that focuses on creating machines that can think and work like humans.
Blockchain
A digital ledger of transactions that is securely stored across a network of computers.
Cloud Computing
The delivery of computing services, including servers, storage, databases, networking, software, analytics, and intelligence, over the Internet to offer faster innovation, flexible resources, and economies of scale.
Importância do Estilo de Tabela Html
Estilizar tabelas HTML é importante por vários motivos:
- Ao aplicar o estilo apropriado às tabelas, você pode torná-las visualmente mais atraentes e atraentes. Isso pode melhorar a aparência geral do seu site e torná-lo mais atraente para os usuários.
- Tabelas bem estilizadas podem ser mais fáceis de ler e entender. Usando cores, fontes e outros elementos de design apropriados, você pode melhorar a legibilidade dos dados da tabela e torná-los mais acessíveis aos usuários.
- Ao estilizar as tabelas para combinar com a marca e o design do seu site, você pode criar uma aparência consistente em todo o site. Isso pode ajudar a reforçar a identidade da sua marca e tornar seu site mais memorável.
- Tabelas de estilo também podem melhorar sua funcionalidade e torná-las mais fáceis de usar. Ao usar cores ou sombreamentos diferentes para diferenciar linhas ou colunas, por exemplo, você pode facilitar a identificação rápida de informações importantes pelos usuários.
- Usando técnicas de estilo apropriadas, você também pode tornar as tabelas mais acessíveis para usuários com deficiências, como aqueles que usam leitores de tela. Por exemplo, usando contraste de cores e tamanhos de fonte apropriados, você pode garantir que o conteúdo da tabela seja legível para todos os usuários.
Assine nosso boletim informativo abaixo para estar em contato com as informações técnicas mais recentes neste site.
Nós valorizamos o seu feedback.
+1
+1
+1
+1
+1
+1
+1
