Jump to content
wlutchyano

Problemas com Tabela no CSS

Recommended Posts

Então gente, desculpa a invasão, sou novo com html, e também novo aqui no forum, ainda não sei estruturar bem uma publicação.

No meu curso recebi a tarefa de reproduzir um site usando certas instruções que me foram dadas

Uma das tarefas era fazer essa tabela das imagens em anexo, foi onde fiquei travado.

 

 

Algumas configurações do css não estão funcionando bem na prática. Ex: 

 

.linTH {
 color: #FFFFFF;
 vertical-align: middle;
 text-align: center 
 background-color: #22AA55;

 

Com as definições pro cabeçalho da tabela

 

Não sei como prosseguir, se puderem me orientar de alguma forma.

 

Deixarei em anexo também o print com as instruções de estilo da pagina                                      

 

5a9870906b812_tabela.jpg.d839a1b82d38bc72a8318f7f63c2c3d2.jpg  <<< Como deveria ser         

 

 

tabelanapratica.png.48f7e7c0f2bc7e969e120e6617c1f85a.png  <<< Como está

 

5a9874b70c055_tabelainst.png.969c011069f64609054b944da8454257.png <<<< Instruções 

 

<!DOCTYPE html>
<html>
<head>
<title>Pedalarte</title>
<base target="_blank"/>
<link rel="stylesheet" type="text/css" href="pedalarteste.css"/>
</head>
<body>
<header>
<address class="ender">
 Av Touer France, 1903<br/>
 Tel: (21) 8765-4321<br/>
 <a href="mailto:contato@pedalarte.com.br">
 contato@pedalarte.com.br</a></address>
<img class="imgLogo" src="PedalarTopo.png"/>
</header>
<nav>
<ul>
<li><a href="Pedalarte.html">Apresenta&ccedil;&atilde;o</a></li>
<li><a href="Peças.html">Pe&ccedil;as</a></li>
<li><a href="Bicicletas.html">Bicicletas</a></li>
<li><a href="Cadastro.html">Cadastro</a></li>
<li><a href="Compras.html">Compras</a></li>
</ul>
</nav>
<section>
<table class="tabBike">
<caption class="titulo">Bicicletas</caption>
<thead>
<tr><th class="linTH">Tipo</th>
 <th class="linTH">Modelo</th>
 <th class="linTH">Foto</th>
 <th class="linTH">Preço</th></tr>
</thead>
<tbody>
<tr><th rowspan="2" class="colTH">ARO 16</th>
 <td>MTB VOLT 1.6 PT/AM</td>
 <td><img class="imgBike" src="Bike_MTB_ARO16.jpg"/></td>
 <td class="preco">R$ 490,00</td></tr>
 <tr><td>CALOI CECI BRANCA</td>
 <td><img class="imgBike" src="Bike_Caloi_ARO16.jpg"/></td>
 <td class="preco">R$ 469,00</td></tr>
<tr><th rowspan="2" class="colTH">ARO 26</th>
 <td>POTY Branca/Vermelho</td>
 <td><img class="imgBike" src="Bike_Poty_ARO26.jpg"/></td>
 <td class="preco">R$ 489,00</td></tr>
 <tr><td>CALOI Sport T19 V21 Marchas</td>
 <td><img class="imgBike" src="Bike_Caloi_ARO26.jpg"/></td>

 <td class="preco">R$ 880,00</td></tr>
</tbody>
</table>
</section>
</body>
</html>
/*
* Estilo Geral
*/
body {
 color: #DD0000;
 font-size: 16px;
 background-color: #EEEE33;
 font-family: verdana;
}
a:link { color:#DD0000; text-decoration:none; }
a:visited { color:#CC0000; text-decoration:none; }
ul { list-style-image: url('Engrenagem.png')}
/*
* Estilo Seções
*/
header {
 display:block;
 margin-bottom: 1px;
}
nav {
 display:block;
 width: 20%;
 float: left;
}
section {
 display:block;
 width: 77%;
 float: right;
}
/*
* Estilo Header
*/
.ender {
 float: right;
 text-align: right;
 font-size: 15px;
 line-height: 140%;
}
img.imgLogo {
 padding-bottom: 15px;
 border-bottom: 3px solid;
 margin-bottom: 6px;
}
/*
* Estilo Nav
*/
nav ul {
line-height: 230%;
margin-top: 40px;
}

/***************************************
* Estilo Seção Estoque
*/
.tabBike {
 color: #000066;
 text-align: left;
 background-color: #FFCC44;
 border: solid thin;
 border-collapse: collapse;
 border-top: 6px;
 font-family: arial;
}
.tabBike td , .tabBike th {
 border:3px solid #226699
 padding: 6px 12px 6px 12px;
}
.titulo {
 font-size: 24px;
 font-weight: bold;
 color: #FFFF00;
 text-align: center;
 background-color: #228855;
}
.linTH {
 color: #FFFFFF;
 vertical-align: middle;
 text-align: center 
 background-color: #22AA55;
}
.colTH {
 color: #FFFFFF;
 text-align: left;
 background-color: #2299DD;
}
.preco {
 color: #EE0000;
 font-weight: bold;
 vertical-align: middle;
}
.imgBike {
 width: 70px;
 height: 70px; 
}

 

Share this post


Link to post
Share on other sites

.tabBike {
 color: #000066;
 text-align: left;
 background-color: #FFCC44;
 border: solid thin;
 border-collapse: collapse;
 border-top: 6px;
 font-family: arial;
 border-color:  blue;
}

.tabBike td , .tabBike th {
 border:3px solid #226699;
 padding: 6px 12px 6px 12px;
}

.linTH {
 color: #FFFFFF;
 vertical-align: middle;
 text-align: center; 
 background-color: #22AA55;
}

  • Obrigado! 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Vinicius Bazan
      Bom dia, Boa tarde e Boa noite!
       
        Estava eu aqui brincando um pouco com JS para entender um pouco melhor essa linguagem, pois eu preciso fazer um relógio em uma pagina HTML e um contador que aumente seu número em +1 de tempos em tempos ( no caso eu estava testando em aumentar a cada 5 segundos, considerando que esse número não vai começar do 0, pois ele teria que pegar todos os segundos que já se passaram nesse dia e dividir por 5, assim seu resultado inteiro seria exibido).
        O relógio com bastante esforço e pesquisa eu consegui fazer e está funcionando, até aqui sem dificuldades, o real problema está no contador, eu fui testar sem colocar um setInterval só para ver se o número aparece na tela e... NADA!
       Então como eu não manjo de JS e tentei fazer a partir do que eu usei pra fazer o relógio eu devo ter errado feio em muita coisa.
       
      <!DOCTYPE html> <html> <head> <title>javascript</title> <meta charset="utf-8"> <script type="text/javascript"> function relogio() { var data = new Date(); var horas = data.getHours(); var minutos = data.getMinutes(); var segundos = data.getSeconds(); if (horas < 10) { horas = "0"+horas; } if (minutos < 10) { segundos = "0"+minutos; } if (segundos < 10) { segundos = "0"+segundos; } document.getElementById("relogio").innerHTML=horas+":"+minutos+":"+segundos; } window.setInterval("relogio()",1000); // Aqui começa a função que eu tentei fazer para o contador function contador() { var data = new Date(); var horas = data.getHours(); var minutos = data.getMinutes(); var segundos = data.getSeconds(); var cont = ((minutos + (horas * 60))*60) + segundos ; document.getElementById("contador").innerHTML= Math.floor(cont/5); } </script> <style type="text/css"> #relogio { font:bold 28pt arial; display: block; margin: 100px auto; padding: 30px; background-color: #FFFF00; width: 150px; border-radius: 6px; box-shadow: 0px 0px 5px rgba(0, 0, 0, .5); } #contador { font:bold 28pt arial; display: block; margin: 100px auto; padding: 30px; background-color: #FFFF00; width: 150px; border-radius: 6px; box-shadow: 0px 0px 5px rgba(0, 0, 0, .5); } </style> </head> <body onload="relogio();"> <div id="relogio"> </div> <hr> <div id="contador"> </div> </body> </html>  
       Se alguém puder me ajudar eu agradeço!
    • By egalauber
      Tenho o seguinte trecho de código:
       
      #anima {
              width:600px;
              height:300px;
              margin:auto;
              
              animation: banner 10s infinite;
          }
       
      @keyframes banner {
              0%, 33% {
                      background:#009;
                  }
              34%, 66% {
                      background:#C00;
                  }
              67%, 100% {
                      background:#390;
                  }
          }
       
      No HTML tenho uma div com id=anima.
      Esse código faz a cada 3 segundos mudar a cor dessa div, tipo como se fosse um slide show.
       
      O que eu preciso fazer, é colocar 3 botões, cada botão mudando pra uma cor. Cada botão mudando pra um pedaço da execução do @keyframes banner.
       
      Botão1 - pula para-> 0%, 33% { background:#009; }
      Botão2 - pula para-> 34%, 66% { background:#C00; }
      Botão3 - pula para-> 67%, 100% { background:#390; }
       
      Como?
    • By Carlos Web Soluções Web
      Olá pessoal !!
      Estou desenvolvendo um menu em CSS, e eu gostaria de colocá-lo no CSS Responsive:
       
      @media screen and (max-width: 800px) {
      }
       
      O link do menu de como está atual se encontra em:
      MENU Link

      e o que eu desejo alcançar é:
      MENU RESPONSIVE

      Por favor me ajudem.....abraço !!
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.