-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathExercicioTabelas.html
111 lines (99 loc) · 3.41 KB
/
ExercicioTabelas.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tabelas & CSS</title>
<style>
/*
1. Faça com que a tabela ocupe 100% da largura da tela.
2. Aplique a propriedade border-collapse com o valor collapse para que as bordas das células da tabela sejam unidas.
3. Aplique a propriedade border com o valor 1px solid #000 para que as bordas das células da tabela sejam exibidas.
4. Aplique a propriedade padding com o valor 2vh para que haja um espaçamento interno entre o conteúdo das células e as bordas das células.
5. Aplique a propriedade text-align para que o texto das células seja centralizado.
6. Aplique a propriedade background-color e a propriedade color para que o cabeçalho da tabela tenha um fundo preto e o texto branco.
7. Aplique a propriedade background-color com o valor #f2f2f2 para que as linhas PARES da tabela tenham um fundo cinza.
8. Aplique a propriedade font-size com o valor 20px para que o texto das células tenha um tamanho de 20 pixels.
9. Aplique a propriedade font-family com o valor 'Arial', sans-serif para que o texto das células seja exibido em uma fonte Arial.
*/
table{
/* 1- fazendo a tabela ocupar 100% */
width: 100%;
/* 2- border collapse */
border-collapse: collapse;
/* 3- adicionando borda */
border:1px solid #000;
/* 8- mudando tamanho da fonte */
font-size:20px ;
/* 9- mundando fonte */
font-family: Arial, sans-serif;
}
th, td{
/* 4- aplicando padding */
padding: 2vh;
border:1px solid #000;
/* 5- centralizando texto */
text-align: center;
}
th{
/* 6- aplicando fundo ao cabeçalho e mundando cor da fonte */
background-color: #000;
color: #fff;
}
/* 7- propriedade para linhas pares */
tbody tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Nome</th>
<th>Idade</th>
<th>Profissão</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>João</td>
<td>25</td>
<td>Programador</td>
<td>Ativo</td>
</tr>
<tr>
<td>Maria</td>
<td>32</td>
<td>Designer</td>
<td>Ativo</td>
</tr>
<tr>
<td>Carlos</td>
<td>41</td>
<td>Engenheiro</td>
<td>Inativo</td>
</tr>
<tr>
<td>Julia</td>
<td>38</td>
<td>Analista</td>
<td>Ativo</td>
</tr>
<tr>
<td>Maria</td>
<td>29</td>
<td>Designer</td>
<td>Ativo</td>
</tr>
<tr>
<td>Elizabete</td>
<td>33</td>
<td>Professora</td>
<td>Inativo</td>
</tr>
</tbody>
</table>
</body>
</html>