Tabela com html5, com a semântica.
Não importa a cor,pode ser qualquer uma
Gabriel Roch...
Super Participante
Registrado
359 Mensagens
31 Curtidas
- Home
- >
- Fórum
- >
- Profissional
- >
- Programação, Sc...
- >
- Como criar tabela em HTML...
herbertbahia
Novo Membro
Registrado
9 Mensagens
3 Curtidas
<table>
<tr>
<td>Cidade</td>
<td>Nome</td>
<td>Idade</td>
<td>Time</td>
</tr>
<tr>
<td style="color: red;">São Paulo</td>
<td style="background-color: white;">João</td>
<td style="background-color: white;">35 anos</td>
<td style="background-color: white;">São Paulo FC</td>
</tr>
<tr>
<td style="color: blue;">Rio de Janeiro</td>
<td style="background-color: white;">Maria</td>
<td style="background-color: white;">40 anos</td>
<td style="background-color: white;">Flamengo</td>
</tr>
</table>
esquiloesper...
Cyber Highlander
Moderador
7.1K Mensagens
2.2K Curtidas
herbertbahia
Novo Membro
Registrado
9 Mensagens
3 Curtidas
Gabriel Roch...
Super Participante
Registrado
359 Mensagens
31 Curtidas
exemplo que fiz com a semântica correta e do jeito que eu queria que ficasse a segunda tabela, mas acho que com th na lateral eu não consegui usar a semântica correta...
exemplo correto código abaixo:
segue o código com semântica certinho e logo abaixo o segundo código do jeito que fiz a tabela que preciso e tc...
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: #bcd6c7;
text-transform: uppercase;
}
table thead {
background-color: rgb(20, 20, 119);
color: white;
}
h1 {
font-size-removed: 60px;
}
h2 {
font-size-removed: 30px;
color: rgb(83, 81, 81);
}
h1,
h2,
table {
text-align: center;
}
table,
th,
td,
caption {
margin: auto;
font-size-removed: 25px;
border-collapse: collapse;
border: 2px solid black;
padding: 12px;
text-align: center;
}
tfoot {
font-weight: bolder;
background-color: rgb(151, 151, 199);
border-bottom: 10px solid rgb(64, 64, 131);
}
</style>
</head>
<body>
<div class="center">
<table>
<h1>TABELAS</h1>
<h2>tabela normal</h2>
<caption> titulo da tabela</caption>
<thead>
<tr>
<th>nome</th>
<th>idade</th>
<th>telefone</th>
</tr>
</thead>
<tbody>
<tr>
<td>joão</td>
<td>29</td>
<td>(48) 1234-5678</td>
</tr>
<tr>
<td>patricia</td>
<td>45</td>
<td>(48)98855-9944)</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Gabriel Ramos Rochadel</td>
</tr>
</tfoot>
</table>
</div>
</body>
</html>O jeito que consegui fazer sem ser semanticamente com thead e tbody, mas queria que se possível eu pudesse colocar thead e tbody, não sei se é possível se sim me diga como ?
<!DOCTYPE html>
<html lang="PT-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table {
width: 80%;
margin: 30px auto;
max-width: 700px;
text-transform: uppercase;
text-align: center;
box-shadow: 5px 3px 8px black;
}
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
padding: 10px;
}
th[rowspan="3"] {
background-color: rgb(80, 196, 234);
box-shadow: 3px 0px 8px black;
border-top: 2px solid black;
}
td{
box-shadow: 3px 1px 6px black;
}
tr:nth-last-child(4) th {
background-color: rgba(99, 103, 78, 0.896);
box-shadow: 3px 0px 8px black;
}
tr:nth-last-child(2) th {
background-color: rgba(97, 201, 123, 0.896);
box-shadow: 3px 0px 8px black;
}
tr:nth-child(3) td, tr:nth-child(5) td{
border-bottom: 4px solid black;
box-shadow: 3px 3px 7px black;
}
tr:first-child, table{
border-top: 4px solid black;
border-left: 3px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th rowspan="3">Florianópolis</th>
<td>Josiane</td>
<td>22</td>
<td>flamengo</td>
</tr>
<tr>
<td>Daniel</td>
<td>25</td>
<td>São Paulo</td>
</tr>
<tr>
<td>Felipe</td>
<td>18</td>
<td>Palmeiras</td>
</tr>
<tr>
<th rowspan="2">Biguaçu</th>
<td>Marcos</td>
<td>26</td>
<td>Fluminense</td>
</tr>
<tr>
<td>Henrique</td>
<td>28</td>
<td>Flamengo</td>
</tr>
<tr>
<th rowspan="2">São José</th>
<td>Jonatas</td>
<td>24</td>
<td>Corinthians</td>
</tr>
<tr>
<td>Julia</td>
<td>21</td>
<td>Santos</td>
</tr>
</table>
</body>
</html>
esquiloesper...
Cyber Highlander
Moderador
7.1K Mensagens
2.2K Curtidas
Gabriel Rochadel disse:O jeito que consegui fazer sem ser semanticamente com thead e tbody, mas queria que se possível eu pudesse colocar thead e tbody, não sei se é possível se sim me diga como ?
Eu aproveitei a (thead) para incluir o cabeçalho que ficou faltando no código:
<!DOCTYPE html>
<html lang="PT-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
caption {
color: blue;
padding:10px 0;
caption-side: bottom;
text-transform: none;
font-variant: small-caps !important;
font: italic bold 1em arial,sans-serif;
}
caption span {
color: #3f8f3f;
font: oblique 0.9em times,serif;
}
table {
width: 80%;
max-width: 700px;
margin: 30px auto;
text-align: center;
text-transform: uppercase;
box-shadow: 5px 3px 8px black;
font-family-removed: arial, sans-serif;
}
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
padding: 10px;
}
th[rowspan="3"] {
background-color: rgb(80, 196, 234);
box-shadow: 3px 0px 8px black;
border-top: 2px solid black;
}
th,td {
box-shadow: 3px 1px 6px black;
}
thead {
background-color: red;
}
tbody:last-child th {
background-color: rgba(99, 103, 78, 0.896);
box-shadow: 3px 0px 8px black;
}
tbody:nth-last-child(2) th {
background-color: rgba(97, 201, 123, 0.896);
box-shadow: 3px 0px 8px black;
}
tbody:nth-child(3) td {
border-bottom: 4px solid black;
box-shadow: 3px 3px 7px black;
}
tr:first-child, table {
border-top: 4px solid black;
border-left: 3px solid black;
}
</style>
</head>
<body>
<table>
<caption>
Autor: Gabriel Rochadel – <span>Feat: Esquiloesperto</span>
</caption>
<thead>
<tr>
<th></th>
<th scope="col">Pessoas</th>
<th scope="col">Idade</th>
<th scope="col">Time</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="rowgroup" rowspan="3">Florianópolis</th>
<td>Josiane</td>
<td>22</td>
<td>flamengo</td>
</tr>
<tr>
<td>Daniel</td>
<td>25</td>
<td>São Paulo</td>
</tr>
<tr>
<td>Felipe</td>
<td>18</td>
<td>Palmeiras</td>
</tr>
</tbody>
<tbody>
<tr>
<th scope="rowgroup" rowspan="2">Biguaçu</th>
<td>Marcos</td>
<td>26</td>
<td>Fluminense</td>
</tr>
<tr>
<td>Henrique</td>
<td>28</td>
<td>Flamengo</td>
</tr>
</tbody>
<tbody>
<tr>
<th scope="rowgroup" rowspan="2">São José</th>
<td>Jonatas</td>
<td>24</td>
<td>Corinthians</td>
</tr>
<tr>
<td>Julia</td>
<td>21</td>
<td>Santos</td>
</tr>
</tbody>
</table>
</body>
</html>
Gabriel Roch...
Super Participante
Registrado
359 Mensagens
31 Curtidas
esquiloesperto disse:
Eu aproveitei a (thead) para incluir o cabeçalho que ficou faltando no código:
<!DOCTYPE html>
<html lang="PT-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
caption {
color: blue;
padding:10px 0;
caption-side: bottom;
text-transform: none;
font-variant: small-caps !important;
font: italic bold 1em arial,sans-serif;
}
caption span {
color: #3f8f3f;
font: oblique 0.9em times,serif;
}
table {
width: 80%;
max-width: 700px;
margin: 30px auto;
text-align: center;
text-transform: uppercase;
box-shadow: 5px 3px 8px black;
font-family-removed: arial, sans-serif;
}
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
padding: 10px;
}
th[rowspan="3"] {
background-color: rgb(80, 196, 234);
box-shadow: 3px 0px 8px black;
border-top: 2px solid black;
}
th,td {
box-shadow: 3px 1px 6px black;
}
thead {
background-color: red;
}
tbody:last-child th {
background-color: rgba(99, 103, 78, 0.896);
box-shadow: 3px 0px 8px black;
}
tbody:nth-last-child(2) th {
background-color: rgba(97, 201, 123, 0.896);
box-shadow: 3px 0px 8px black;
}
tbody:nth-child(3) td {
border-bottom: 4px solid black;
box-shadow: 3px 3px 7px black;
}
tr:first-child, table {
border-top: 4px solid black;
border-left: 3px solid black;
}
</style>
</head>
<body>
<table>
<caption>
Autor: Gabriel Rochadel – <span>Feat: Esquiloesperto</span>
</caption>
<thead>
<tr>
<th></th>
<th scope="col">Pessoas</th>
<th scope="col">Idade</th>
<th scope="col">Time</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="rowgroup" rowspan="3">Florianópolis</th>
<td>Josiane</td>
<td>22</td>
<td>flamengo</td>
</tr>
<tr>
<td>Daniel</td>
<td>25</td>
<td>São Paulo</td>
</tr>
<tr>
<td>Felipe</td>
<td>18</td>
<td>Palmeiras</td>
</tr>
</tbody>
<tbody>
<tr>
<th scope="rowgroup" rowspan="2">Biguaçu</th>
<td>Marcos</td>
<td>26</td>
<td>Fluminense</td>
</tr>
<tr>
<td>Henrique</td>
<td>28</td>
<td>Flamengo</td>
</tr>
</tbody>
<tbody>
<tr>
<th scope="rowgroup" rowspan="2">São José</th>
<td>Jonatas</td>
<td>24</td>
<td>Corinthians</td>
</tr>
<tr>
<td>Julia</td>
<td>21</td>
<td>Santos</td>
</tr>
</tbody>
</table>
</body>
</html>
Fantástico... ficou perfeito! Coloquei cidades kk no lugar vazio em vermelho
