Ao pratica html e css eu consigui fazer uma tabela com dadas, mas agora eu preciso inserir alguns mapas nas casses sd, sa , st, sz.
mais eu não sei como para melhor entender melhor vou inserir dados.
<!DOCTYPE html>
<html>
<head>
<title>Tabelas do Brasil</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css"> </head>
<body>
<h1>Tabelas do Brasil</h1>
<h2>Estados Brasileiros</h2>
<table>
<thead>
<tr>
<th>Estado</th>
<th>Sigla</th>
<th>Capital</th>
</tr>
</thead>
<tbody>
<tr>
<td>Acre</td>
<td>AC</td>
<td>Rio Branco</td>
</tr>
<tr>
<td>Alagoas</td>
<td>AL</td>
<td>Maceió</td>
</tr>
<tr>
<td>Amapá</td>
<td>AP</td>
<td>Macapá</td>
</tr>
<tr>
<td>Amazonas</td>
<td>AM</td>
<td>Manaus</td>
</tr>
<tr>
<td>Bahia</td>
<td>BA</td>
<td>Salvador</td>
</tr>
<tr>
<td>Ceará</td>
<td>CE</td>
<td>Fortaleza</td>
</tr>
<tr>
<td>Espírito Santo</td>
<td>ES</td>
<td>Vitória</td>
</tr>
<tr>
<td>Goiás</td>
<td>GO</td>
<td>Goiânia</td>
</tr>
<tr>
<td>Maranhão</td>
<td>MA</td>
<td>São Luís</td>
</tr>
<tr>
<td>Mato Grosso</td>
<td>MT</td>
<td>Cuiabá</td>
</tr>
<tr>
<td>Mato Grosso do Sul</td>
<td>MS</td>
<td>Campo Grande</td>
</tr>
<tr>
<td>Minas Gerais</td>
<td>MG</td>
<td>Belo Horizonte</td>
</tr>
<tr>
<td>Pará</td>
<td>PA</td>
<td>Belém</td>
</tr>
<tr>
<td>Paraíba</td>
<td>PB</td>
<td>João Pessoa</td>
</tr>
<tr>
<td>Paraná</td>
<td>PR</td>
<td>Curitiba</td>
</tr>
<tr>
<td>Pernambuco</td>
<td>PE</td>
<td>Recife</td>
</tr>
<tr>
<td>Piauí</td>
<td>PI</td>
<td>Teresina</td>
</tr>
<tr>
<td>Rio de Janeiro</td>
<td>RJ</td>
<td>Rio de Janeiro</td>
</tr>
<tr>
<td>Rio Grande do Norte</td>
<td>RN</td>
<td>Natal</td>
</tr>
<tr>
<td>Rio Grande do Sul</td>
<td>RS</td>
<td>Porto Alegre</td>
</tr>
<tr>
<td>Rondônia</td>
<td>RO</td>
<td>Porto Velho</td>
</tr>
<tr>
<td>Roraima</td>
<td>RR</td>
<td>Boa Vista</td>
</tr>
<tr>
<td>Santa Catarina</td>
<td>SC</td>
<td>Florianópolis</td>
</tr>
<tr>
<td>São Paulo</td>
<td>SP</td>
<td>São Paulo</td>
</tr>
<tr>
<td>Sergipe</td>
<td>SE</td>
<td>Aracaju</td>
</tr>
<tr>
<td>Tocantins</td>
<td>TO</td>
<td>Palmas</td>
</tr>
</tbody>
</table>
<h2 class="sd">Mapa do Brasil</h2>
<h2 class="sa">Relevo do Brasil</h2>
<h2 class="st">Biomas do Brasil</h2>
<h2 class="sz">População do Brasil</h2>
</body>
</html>
body {
background: black;
color: white;
}
h1 {
text-align: center;
font-style: italic;
color: gray;
}
table {
width: 80%;
margin: 20px auto;
border-collapse: collapse;
color: white;
}
th, td {
border: 1px solid gray;
padding: 8px;
text-align: left; /* Aqui basicamente alinha o texto à esquerda */
}
th {
background-color: #333; /* Escolhe a que quiser */
}
