Ir para conteúdo
Ruy Hoffmann

Http Tabelas ou ... ?

Recommended Posts

Bom dia pessoal,

 

Sou novato e estou montando meu primeiro site em html.  Cheguei na parte de dispor as imagens dos produtos, legendas e um botão "alugar". A disposição da tela quero algo igual ao site da americanas, extra, ml, ou seja, pequena figura do produto em linha uma ao lado da outra, abaixo de cada figura uma legenda em texto, abaixo de cada legenda  um botão "alugar". Formando um bloco de 4 a 5 produtos começa tudo de novo logo abaixo num novo bloco horizontal de produtos..

 

Olhando esses sites me parece uma Tabela sem bordas sendo utilizada.

 

Então a pergunta é devo utilizar Tabela no Html ou devo seguir por outro caminho?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Ruy, tudo bem?

Ao conjunto que você ver nesses sites, é que é utilizado HTML e CSS para fazer a manipulação,

N caso do site Americanas eles não utiliza Tabela e sim utilizam o CSS para manipular a DIV a responder de acordo com a formatação.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Oi Francklyn, tudo bem sim,

 

Primeiro obrigado pela sua ajuda!!! :) tentei dar um "like" na sua mensagem mas dá erro.

 

Entendi, sem Tabelas. Eu estou fazendo "aulas online" e já fechou a parte de CSS. Consegui fazer o código abaixo que resulta em 3 figuras lado-a-lado na horizontal e duas linhas de textos abaixo das figuras, mas achei trabalhoso, imagine eu ter 300 produtos e ter que fazer o mesmo linha a linha.... bem como nem finalizei, ainda quero botar um botão "Alugar" abaixo dos textos... enfim... acho que estou fazendo pelo caminho mais trabalhoso.

 

Bom, se você ou algum outro colega esbarrar em algum tutorial, video-aula ou coisa assim que exemplifique justamente isso posta aqui o link por favor.

Veja o que fiz de teste, até deu certo, mas dezenas de códigos digitados só para colocar 3 produtos apenas, tenho mais 297 para colocar!!!:

 

HTML

<section id="capas"> <!--INI: Essa seção adiciona as capas dos jogos, lado a lado - Ruy Hoffmann 03/02/2019-->
    <div class="capas">
    <img src="file:///D:/Ruy/2019/Locadora/HTML/_jogos/PS4Spide-man.jpg" title="Spider-Man" hspace="25">
    <p>Homem Aranha</p>
    <p>Disponível</p>
    </div>
    <!--figcaption>
    <p>Homem Aranha</p>
    </figcaption-->
    <div class="capas">
    <img src="file:///D:/Ruy/2019/Locadora/HTML/_jogos/PS4TheLastOfUs.jpg" title="The Last of Us" hspace="25">
    <p>The Last of Us</p>
    <p>Disponível</p>
    </div>
    <!--figcaption>
    <p>The Last Of Us</p>
    </figcaption-->
    <div class="capas">
    <img src="file:///D:/Ruy/2019/Locadora/HTML/_jogos/PS4ResidentEvil2.jpg" title="Resident Evil 2" hspace="25">
    <p>Resident Evil 2</p>
    <p>Disponível</p>
    <!--figcaption>
    <p>Resident Evil 2</p>
    </figcaption-->    
    </div>
</section>

 

CSS

/*CAPAS - Ruy Hoffmann 06/02/2019 */
div.capas
{
    width:150px;
    display: inline-block;
    margin:0px 25px 0px 0px;
    padding-bottom:0px;
    padding-top:0px;
}
div.capas p
{
    padding-bottom:0px;
    padding-top:0px;
    margin:0px 0px 0px 25px;
    font-size:12pt;
    font-weight:bold;
}

/* RODAPÉ */
footer
{
    background-color:black;
}
footer h6
{
    padding:5px;
}
 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por Incompetech
      Olá a todos. Então.. eu estava praticando um pouco de HTML / CSS e no fim cheguei a um resultado bem legal e simples claro disto aqui:
       
      Eu sei que alguns vão reconhecer isto.. Mas para quem não conhece é algo relacionado ao game MU ONLINE.
      Enfim. Como podem ver eu inventei alguns adicionais que no caso são as características dessa armadura, porém eu gostaria de aplicar um efeito em que esses adicionais apareçam quando eu passar o mouse por cima da imagem da armadura.. como se fosse dentro do game.
      Abaixo vão alguns exemplos:
      Efeito aplicado em um projeto HTML: 

      O mesmo efeito In Game:
       
      Sei que pode parecer algo meio trivial mas gostaria muito de aprender como eu faço para criar algo igual, se puderem me ajudar eu agradeço de coração.
    • Por Eduardo S. B. de Oliveira
      Senhores, preciso de uma ajuda, estou criando um formulário onde o checkbox fique "checked" quando clicar em cima, mas o detalhe e que quando atualizar a pagina o checkbox permaneça marcado. É possível? 
    • Por joaon77@yahoo.com.br
      Olá pessoal!
      Criei um menu usando listas não ordenadas (ul, li) com as imagens dispostas horizontalmente. São quatro imagens. O problema é que uma das imagens aparece duplicada no layout. Não entendi. Segue o código:
      ... <span class="menuRedesSociais"> <ul> <li id="img1"><a href="#"</a></li> <li id="img2"><a href="#"></a></li> <li id="img3"><a href="#"></a></li> <li id="img4"><a href="#"></a></li> </ul> </span> span ul { margin: 0; padding: 0; } span li { list-style: none; display: inline-block; } span a:link, a:visited { padding: 15px; } li#img1 a{ background-image: url("#img1"); background-repeat: no-repeat; } li#img2 a{ background-image: url("#img2"); background-repeat: no-repeat; } li#img3 a{ background-image: url("#img3"); background-repeat: no-repeat; } li#img4 a{ background-image: url("#img4"); background-repeat: no-repeat; } A imagem que aparece duplicada é a img2. Obs. Já fiz o teste trocando a posição das imagens, só que o problema continua.
       
      Agradeço muito se alguém puder me ajudar.
       
    • Por rodrigoalgeri
      BOA NOITE
      OLHA ISSO onde esta escrito isso aqui "Health star ratings Kellogg reveals the cereal Rodrigo Algeri", tem uma pequena imagem em cima se voce perceber ela e uma imagem redonda so que nao aparece inteira voce sabe algum jeito pra aparecer ? tipo ela tem que ficar 75px altura e largura a altura fica, so que ela corta, EU GOSTARIA QUE FICASSE UM QUADRADO TIPO 75PX X
      75PX E ISSO E PRA FICAR EM TODAS ESSAS IMAGENS AI QUE TEM 

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.