Skip to content

Commit a37bda5

Browse files
arielmlimaarielmlima
committedDec 13, 2023
tabelas
1 parent 797e978 commit a37bda5

File tree

4 files changed

+328
-89
lines changed

4 files changed

+328
-89
lines changed
 

‎DESAFIOS/012/desafio.html

+124
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
<!DOCTYPE html>
2+
<html lang="pt-br">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Grupos Tabelas</title>
7+
<style>
8+
body > table {
9+
width: 800px;
10+
border: 1px solid black;
11+
border-collapse: collapse;
12+
}
13+
thead{
14+
background-color: gray;
15+
16+
}
17+
tbody{
18+
padding: 10px;
19+
20+
}
21+
th, td{
22+
border: 1px solid black;
23+
text-align: center;
24+
}
25+
.cinza{
26+
background-color: lightslategray;
27+
}
28+
</style>
29+
</head>
30+
<body>
31+
<h1>Exercicio Guanabas Tabelas</h1>
32+
<table>
33+
<caption>Desafio 2</caption>
34+
<thead >
35+
<tr>
36+
<th scope="col" rowspan="2">Área</th>
37+
<th scope="col" rowspan="2">Discipinas</th>
38+
<th colspan="2">Notas</th>
39+
<th scope="col" rowspan="2">Média </th>
40+
<tr>
41+
<th scope="col">Nota 1</th>
42+
<th scope="col">Nota 2</th>
43+
</tr>
44+
</tr>
45+
</thead>
46+
<tbody>
47+
<tr>
48+
<th scope="row" rowspan="4" >Exatas</th>
49+
50+
<td>Matemática</td>
51+
<td>0</td>
52+
<td>0</td>
53+
<td>0</td>
54+
55+
</tr>
56+
<td>Física</td>
57+
<td>0</td>
58+
<td>0</td>
59+
<td>0</td>
60+
61+
<tr>
62+
<td>Quimica</td>
63+
<td>0</td>
64+
<td>0</td>
65+
<td>0</td>
66+
67+
68+
</tr>
69+
<tr>
70+
<td>Biologia</td>
71+
<td>0</td>
72+
<td>0</td>
73+
<td>0</td>
74+
75+
</tr>
76+
<tr class="cinza">
77+
<th scope="row" colspan="4">Média de exatas</th>
78+
<td>0</td>
79+
80+
81+
</tr>
82+
<tr>
83+
<th scope="row" rowspan="2">Humanas</th>
84+
<td>História</td>
85+
<td>0</td>
86+
<td>0</td>
87+
<td>0</td>
88+
89+
90+
</tr>
91+
<tr>
92+
<td>Geografia</td>
93+
<td>0</td>
94+
<td>0</td>
95+
<td>0</td>
96+
97+
</tr>
98+
<tr class="cinza">
99+
<th scope="row" colspan="4">Média de humanas</th>
100+
<td>0</td>
101+
102+
</tr>
103+
</tbody>
104+
</tr>
105+
</tfoot>
106+
107+
</table>
108+
</body>
109+
</html>
110+
111+
112+
<!--
113+
Todo th tem que ser definido o scope.
114+
115+
O colgroup no scope é usado quando um titulo de coluna abraange mais de uma coluna
116+
117+
O rowgroup é usado quando o titulo da linha é responsavel por mais de uma linha
118+
119+
col/ colgroup <>
120+
row/ rowgroup \/ /\
121+
122+
colspan: vai ocupar mais de uma coluna
123+
rowspan: vai ocupar mais de uma linha
124+
-->

‎EXERCICIOS/EXE023/tabela004.html

+77-51
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Tabela desafio</title>
6+
<title>Grupos Tabelas</title>
77
<style>
88
body > table {
99
width: 500px;
@@ -22,60 +22,86 @@
2222
border: 1px solid black;
2323
text-align: center;
2424
}
25+
#responsividade{
26+
overflow-x: auto;
27+
}
2528
</style>
2629
</head>
2730
<body>
2831
<h1>Exercicio Filmes</h1>
29-
<table>
30-
<caption>Filmes Favoritos</caption>
31-
<thead>
32-
<tr>
33-
<th scope="col">Grupos</th>
34-
<th scope="col">Nomes</th>
35-
<th colspan="4" scope="col">Filmes</th>
36-
</tr>
37-
</thead>
38-
<tbody>
39-
<tr>
40-
<th rowspan="3">Mulheres</th>
41-
<td>Ana Maria Santos</td>
42-
<td>Alien</td>
43-
<td>Rambo</td>
44-
<td colspan="3">Vingadores</td>
45-
</tr>
46-
<tr>
47-
<td>Beatriz Souza</td>
48-
<td>Hulk</td>
49-
<td>Inception</td>
50-
<td colspan="3">Batman</td>
51-
</tr>
52-
<tr>
53-
<td>Cláudia Melo</td>
54-
<td>Oblivion</td>
55-
<td>Matrix</td>
56-
<td>Big Hero</td>
57-
</tr>
32+
<div id="responsividade">
33+
<table>
34+
<caption>Filmes Favoritos</caption>
35+
<thead>
5836
<tr>
59-
<th rowspan="3">Homens</th>
60-
<td>Bruno Mendonça</td>
61-
<td>Intocaveis</td>
62-
<td>Amnésia</td>
63-
<td>Gladiador</td>
37+
<th scope="col">Grupos</th>
38+
<th scope="col">Nomes</th>
39+
<th colspan="4" scope="colgroup">Filmes</th>
6440
</tr>
65-
<tr>
66-
<td>Daniel Lourenço</td>
67-
<td>Wall-e</td>
68-
<td>Oldboy</td>
69-
<td colspan="3">Dangal</td>
70-
</tr>
71-
<tr>
72-
<td>Fabiano Mota</td>
73-
<td>StarWars</td>
74-
<td>Taxi Driver</td>
75-
<td>Toy Story</td>
76-
</tr>
77-
</tbody>
78-
79-
</table>
41+
</thead>
42+
<tbody>
43+
<tr>
44+
<th rowspan="3" scope="rowgroup">Mulheres</th>
45+
<td>Ana Maria Santos</td>
46+
<td>Alien</td>
47+
<td>Rambo</td>
48+
<td colspan="3">Vingadores</td>
49+
</tr>
50+
<tr>
51+
<td>Beatriz Souza</td>
52+
<td>Hulk</td>
53+
<td>Inception</td>
54+
<td colspan="3">Batman</td>
55+
</tr>
56+
<tr>
57+
<td>Cláudia Melo</td>
58+
<td>Oblivion</td>
59+
<td>Matrix</td>
60+
<td>Big Hero</td>
61+
</tr>
62+
<tr>
63+
<th rowspan="3" scope="rowgroup">Homens</th>
64+
<td>Bruno Mendonça</td>
65+
<td>Intocaveis</td>
66+
<td>Amnésia</td>
67+
<td>Gladiador</td>
68+
</tr>
69+
<tr>
70+
<td>Daniel Lourenço</td>
71+
<td>Wall-e</td>
72+
<td>Oldboy</td>
73+
<td colspan="3">Dangal</td>
74+
</tr>
75+
<tr>
76+
<td>Fabiano Mota</td>
77+
<td>StarWars</td>
78+
<td>Taxi Driver</td>
79+
<td>Toy Story</td>
80+
</tr>
81+
</tbody>
82+
<tfoot>
83+
<tr>
84+
<th colspan="4" scope="row">Total</th>
85+
<td>1000</td>
86+
</tr>
87+
</tfoot>
88+
89+
</table>
90+
</div>
8091
</body>
81-
</html>
92+
</html>
93+
94+
95+
<!--
96+
Todo th tem que ser definido o scope.
97+
98+
O colgroup no scope é usado quando um titulo de coluna abraange mais de uma coluna
99+
100+
O rowgroup é usado quando o titulo da linha é responsavel por mais de uma linha
101+
102+
col/ colgroup <>
103+
row/ rowgroup \/ /\
104+
105+
colspan: vai ocupar mais de uma coluna
106+
rowspan: vai ocupar mais de uma linha
107+
-->

‎EXERCICIOS/EXE023/tabela005.html

+89
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<!DOCTYPE html>
2+
<html lang="pt-br">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Tabela exercicios com responsatividade e </title>
7+
<style>
8+
body th, td{
9+
width: 400px;
10+
padding: 10px;
11+
border: 1px solid black;
12+
text-align: center;
13+
14+
}
15+
table{
16+
border-collapse: collapse;
17+
}
18+
.destaque{
19+
background-color: yellowgreen;
20+
}
21+
22+
col.cnome{
23+
background-color: yellow;
24+
}
25+
.csexo{
26+
background-color: red
27+
28+
}
29+
.cidade{
30+
background-color: rgba(128, 0, 128, 0.281)
31+
}
32+
#container {
33+
overflow-x: auto;
34+
}
35+
36+
</style>
37+
</head>
38+
<body>
39+
<div id="container">
40+
<table>
41+
<colgroup> <!-- Colgroup serve para podermos trabalhar com as colunas coletivamente, adicionando variaveis css a cada uma, segue a ordem das colunas as declarações. -->
42+
<col class="cnome">
43+
<col class="csexo">
44+
<col class="cidade" span="2"> <!-- O span fez a cor servir para duas colunas como definido, apenas span -->
45+
46+
</colgroup>
47+
<caption>Cadastro</caption>
48+
49+
<tr>
50+
<th scope="col">Nome</th>
51+
<th scope="col">Sexo</th>
52+
<th scope="col">Idade</th>
53+
<th scope="col">Profissão</th>
54+
</tr>
55+
<tr class="destaque"> <!-- Aqui podemos modificar a linha inteira, adicionando a class css ao tr -->
56+
<td>Ana Maria</td>
57+
<td>F</td>
58+
<td>25</td>
59+
<td>Jornalista</td>
60+
</tr>
61+
<tr>
62+
<td>Jorge</td>
63+
<td>M</td>
64+
<td>23</td>
65+
<td>Programador</td>
66+
</tr>
67+
<tr>
68+
<td>Ana</td>
69+
<td>F</td>
70+
<td>30</td>
71+
<td>Médica</td>
72+
</tr>
73+
<tr>
74+
<td>Paulo</td>
75+
<td>M</td>
76+
<td>33</td>
77+
<td>Design</td>
78+
</tr>
79+
</table>
80+
</div>
81+
82+
</body>
83+
</html>
84+
85+
<!-- Para tornar responsiva envelopamos tudo que estava no table, e botamos dentro de uma div que demos um id, no css criamos a id e nela definimos:
86+
overflow-x: auto;
87+
88+
Overflow conteudo que transborda
89+
Que faz com que a rolagem x horizontal ou rolagem vertical y, ou as duas. -->

‎EXERCICIOS/EXE023/tabeladesafio.html

+38-38
Original file line numberDiff line numberDiff line change
@@ -22,50 +22,50 @@
2222
border: 1px solid black;
2323
text-align: center;
2424
}
25+
2526
</style>
2627
</head>
2728
<body>
2829
<h1>Mesclagem de Células</h1>
29-
<table>
30-
<caption>Mesclando Células</caption>
31-
<thead>
32-
<tr>
33-
<th scope="col">A</th>
34-
<th scope="col">B</th>
35-
<th scope="col">C</th>
36-
<th scope="col">D</th>
37-
38-
</tr>
39-
</thead>
40-
<tbody>
41-
<tr>
42-
<td>1</td>
43-
<td>2</td>
44-
<td rowspan="2">3</td>
45-
<td>4</td>
46-
</tr>
47-
<tr>
48-
<td>5</td>
49-
<td>6</td>
50-
<td>7</td>
51-
</tr>
52-
<tr>
53-
<td colspan="3">8</td>
54-
<td>9</td>
55-
</tr>
56-
<tr>
57-
<td rowspan="2">10</td>
58-
<td colspan="2">11</td>
59-
<td>12</td>
60-
</tr>
30+
<table>
31+
<caption>Mesclando Células</caption>
32+
<thead>
6133
<tr>
62-
<td>13</td>
63-
<td>14</td>
64-
<td>15</td>
34+
<th scope="col">A</th>
35+
<th scope="col">B</th>
36+
<th scope="col">C</th>
37+
<th scope="col">D</th>
6538
</tr>
66-
</tbody>
67-
68-
</table>
39+
</thead>
40+
<tbody>
41+
<tr>
42+
<td>1</td>
43+
<td>2</td>
44+
<td rowspan="2">3</td>
45+
<td>4</td>
46+
</tr>
47+
<tr>
48+
<td>5</td>
49+
<td>6</td>
50+
<td>7</td>
51+
</tr>
52+
<tr>
53+
<td colspan="3">8</td>
54+
<td>9</td>
55+
</tr>
56+
<tr>
57+
<td rowspan="2">10</td>
58+
<td colspan="2">11</td>
59+
<td>12</td>
60+
</tr>
61+
<tr>
62+
<td>13</td>
63+
<td>14</td>
64+
<td>15</td>
65+
</tr>
66+
</tbody>
67+
68+
</table>
6969
</body>
7070
</html>
7171

0 commit comments

Comments
 (0)
Please sign in to comment.