Problemas com Tabela no CSS
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
/monthly_2018_03/5a9870906b812_tabela.jpg.d839a1b82d38bc72a8318f7f63c2c3d2.jpg" /> <<< Como deveria ser
/monthly_2018_03/tabelanapratica.png.48f7e7c0f2bc7e969e120e6617c1f85a.png" /> <<< Como está
/monthly_2018_03/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ção</a></li>
<li><a href="Peças.html">Peç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;
}Discussão (1)
Carregando comentários...