Entrar Ainda não tem acesso?
2
respostas

mais duvidas 5

por Jorge Henrique Nicolau da Silva
| 61.2k xp | 86 posts

Praticando o que eu aprendi no curso eu decidi usar o html e css para mostra os dados inseridos, no entanto eu estou com dificuldade de criar a tabela mesmo inserido os dados da classe sc do html. para melhor compreensão irei mostra os dados , que estão ainda em forma então não ligue se tiver coisas faltando pois esta mesmo. 

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="UTF-8">
  </head>
  <body class="ss">
    <h1 class="sc">Tabelas do Brasil</h1>
    <h2 class="sx">Estados Brasileiro<uL>Estado 	Sigla 	Capital
Acre 	AC 	Rio Branco
Alagoas 	AL 	Maceió
Amapá 	AP 	Macapá
Amazonas 	AM 	Manaus
Bahia 	BA 	Salvador
Ceará 	CE 	Fortaleza
Espírito Santo 	ES 	Vitória
Goiás 	GO 	Goiânia
Maranhão 	MA 	São Luís
Mato Grosso 	MT 	Cuiabá
Mato Grosso do Sul 	MS 	Campo Grande
Minas Gerais 	MG 	Belo Horizonte
Pará 	PA 	Belém
Paraíba 	PB 	João Pessoa
Paraná 	PR 	Curitiba
Pernambuco 	PE 	Recife
Piauí 	PI 	Teresina
Rio de Janeiro 	RJ 	Rio de Janeiro
Rio Grande do Norte 	RN 	Natal
Rio Grande do Sul 	RS 	Porto Alegre
Rondônia 	RO 	Porto Velho
Roraima 	RR 	Boa Vista
Santa Catarina 	SC 	Florianópolis
São Paulo 	SP 	São Paulo
Sergipe 	SE 	Aracaju
Tocantins 	TO 	Palmas</ul></h2>
    <h2 class="sd">Capitas do Brasil<uL></ul></h2>
    <h2 class="sa">Capitas do Brasil<uL></ul></h2>
    <h2 class="st">Capitas do Brasil<uL></ul></h2>
    <h2 class="sz">Polução do Brasil<uL></ul></h2>
  </body>
</html>

.ss {
 background: black;
 color: white;
}

.sc {
 text-align: center;
 font-style: italic;
 color: gray;
}
2 respostas
por Victor Costa Santos
| 2366.8k xp | 4731 posts
Alura Scuba Team

Olá Jorge! Tudo bem?

Jorge, eu não sei ao certo qual o curso ou atividade em que você se encontra, mas eu entendi que você quer transformar aquela lista de estados e capitais em uma tabela bem organizada. O que observo é que a dificuldade em criar a tabela pode estar na estrutura HTML que está sendo usada para os dados.

Atualmente, o texto dos estados e capitais está dentro de uma tag <h2> e uma <ul>, que não são as tags ideais para criar uma tabela no HTML. No HTML já tem recursos para isso, dai vamos precisar usar as tags <table>, <thead>, <tbody>, <tr>, <th> e <td>.

Aqui está o HTML e o CSS separados para que você possa estruturar essa tabela corretamente:

HTML:

<!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">Capitais do Brasil</h2>
    <h2 class="sa">Capitais do Brasil</h2>
    <h2 class="st">Capitais do Brasil</h2>
    <h2 class="sz">População do Brasil</h2>
  </body>
</html>
por Victor Costa Santos
| 2366.8k xp | 4731 posts
Alura Scuba Team

Continuando, pois o tópico anterior deu o limite:

CSS

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 */
}

A explicação das mudanças é a seguinte: você usará <table> como a tag principal para criar a tabela. Dentro dela, <thead> conterá o cabeçalho da tabela, e <tbody> o corpo da tabela, onde ficam os dados. Para cada linha da tabela, você utilizará <tr>, e dentro de cada linha, <th> será para as células de cabeçalho (como "Estado", "Sigla", "Capital"), e <td> será para as células de dados. O CSS foi separado em um arquivo style.css e linkado no HTML para uma melhor organização.

Espero ter ajudado! Bons estudos!

Sucesso ✨

Imagem da comunidade