HTML <HTML> Como sobrepor tabelas

LeaandrooR · 4 de abril de 2018

Eae pessoal, estou montando um trabalho para uma disciplina na escola que consiste em montar o design de um site, mas estou com problemas em uma parte. Como vocês podem verna imagem o texto fica a baixo, gostaria que ele ficasse em cima na mesma reta do "Fale com a Gente" mas não estou conseguindo, Alguém tem uma sugestão do que tags utilizar para isso. Os escritos no canto esquerdo estão em uma tabela e a barra horizontal do lado direito usei uma tabela e fui configurando o alinhamento. Em baixo o código do site inteiro. Caso tenha alguns erros bobos peço desculpa pois estou iniciando. (o texto foi somente para teste)

<html>
 <head>
   <title> Master RACE </title>
  </head>
  <style type="text/css">
a:link {
text-decoration:none;
}
a:visited {
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
</style>
  <body bgcolor="#0000" link="FFFFFF" alink="#FFFFFF" vlink="#FFFFFF">
            <div><link rel="shortcut icon" href="D:\1 Bimestre\DDW\Site1Bim\favicon.ico" />
         <center>
         <img src="D:\1 Bimestre\DDW\Site1Bim\bannertop.jpg">
         </center>
         <br>
         <hr color="fede00" align="center" width="90%">
         <br><br>
            <table border="0" bgcolor="0000" align="left" style="width:1%">
                <tr>
                <th>
            <hr size="340" width="1" color="#FFFFFF" align="left">
                </th>
                </tr>
            </table>
            <table border="0" bgcolor="0000" align="right" style="width:87%">
                <tr>
                <th>
            <hr size="340" width="1" color="#FFFFFF" align="left">
                </th>
                </tr>
            </table>
           <table border="0" bgcolor="#0000" align="left" style="width:12%">
                <tr>
                <th>
             <p align="left"><font face="Gotham" size="3" color="FFFFFF">Fale com a gente :D</font></p>
               <hr color="FFFFFF" align="left" width="220">
             <p align="left"><font face="Gotham" size="3" color="FFFFFF"><a href="https://www.reddit.com/r/pcmasterrace/">Entre no nosso forum XD!!</a></font>
               <hr color="FFFFFF" align="left" width="220">
             <p align="center"><font face="Gotham" size="4" color="fede00">Sigam-me os bons :D</font>
               <hr color="FFFFFF" align="left" width="220">
             <p align="left"><font face="Gotham" size="3" color="#FFFFFF"><a href="https://www.facebook.com/OfficialPCMasterRace/">Facebook :)</a></font>  
                 <hr color="FFFFFF" align="left" width="220">
             <p align="left"><font face="Gotham" size="3" color="#FFFFFF"><a href="https://www.youtube.com/user/Flashgitzanimation">YouTube :)</a></font> 
                 <hr color="FFFFFF" align="left" width="220">
                 <p align="left"><font face="Gotham" size="3" color="#FFFFFF"><a href="https://twitter.com/officialpcmr">Twitter :)</a></font> 
                      <hr color="FFFFFF" align="left" width="220">
                     <p align="left"><font face="Gotham" size="3" color="#FFFFFF"><a href="https://www.twitch.tv/officialpcmasterrace">Twitch :)</a></font>
                     <hr color="FFFFFF" align="left" width="220">  
                 </th>
                 </tr>
            </table>
            <div>
                       <table border="0" bgcolor="#FFFFFF" align="center" style="width:20%">
                <tr>
                <th>
                    A Square Enix estava avaliando os problemas com Chrono Trigger na Steam e prometeu que iria resolvê-los através de uma série de patches. Agora, em uma atualização da Steam, a Square Enix revelou que o primeiro patch virá no início deste mês e permitirá que os jogadores troquem os gráficos atuais pelos gráficos originais do Super NES. Essa troca será opcional.

Link Chrono Trigger Steam

Quando lançado para Steam, o filtro de suavização do jogo tinha objetivo de dar ao RPG uma aparência de alta resolução, mas o resultado não foi muito bem aceito pelos fãs, o que levou o jogo à uma série de reclamações. O port do jogo foi criticado porque a Square Enix usou como base o aplicativo móvel do game para adaptá-lo ao PC.

"Estamos trabalhando para solucionar os problemas lançando vários patches nos próximos meses, enquanto continuamos a oferecer suporte ao Chrono Trigger na Steam", diz a empresa na atualização. A Square Enix também está aumentando o tempo da Limited Edition na Steam, que vai permanecer até 30 de abril. Dessa forma, a edição limitada ainda pode ser oferecida após a primeira atualização ser lançada. 

                 </th>
                 </tr>
            </table>
  </body>
  </html>

DiF · 5 de abril de 2018

@LeaandrooR Olá, Não sei qual é exercício proposto e nem as condições. Mas o elemento TH não é para ser usado assim. Ele é o header da tabela. É mais indicado para nome de colunas em uma tabela.

Não que a técnica de construção de sites com tabelas seja errado, mas nos padrões atuais, o melhor é você fazer com a técnica tableless. Ou seja, não usar tabelas para estruturar o site.

No seu caso,
Bastaria criar um elemento DIV para ser o container do site,

Dentro dele teria outro elemento DIV para conter o header(a imagem amarela)
Um menu posicionado ao lado esquerdo usando os elementos UL e LI, e o um elemento DIV para o conteúdo.
Em prática o exemplo de estrutura fica assim:

<div class="container">
   <!-- aqui fica o banner com a imagem amarela -->
   <div class="header"> </div>
  
   <div class="menu">
    <!-- aqui dentro você coloca o menu com UL e LI -->
   </div> 

   <div class="conteudo">
     <!--  aqui dentro você coloca o conteúdo do site-->
   </div>

</div>

Aí basta você criar as regras de CSS.

Por recomendação, diria que você poderia já tentar se familiarizar com os elementos do HTML5, como por exemplo <section> para estrutura interna, <header> para cabeçalho de de um <section> enfim, deixo as dicas.

Falando sobre a sua última imagem, nota-se que o espaço entre o conteúdo e o topo, é causado porque você incluiu uma outra tabela dentro da tabela. A estrutura está errada.

LeaandrooR · 7 de abril de 2018

@DiF desculpa pela demora, estava em semana de provas, então quer dizer que todo o codigo que eu fiz pode ser trocada por essas poucas linhas? Nossa muito obrigado pela ajuda

DiF · 7 de abril de 2018

@LeaandrooR Sim! você pode usar aquele exemplo de estrutura. Bastando estilizar com o CSS e claro, colocando o conteúdo dentro de cada.

A técnica tableless, é uma baita mão na roda e reduz bastante o código.

Como eu disse anteriormente, usar tabelas para a estrutura não é errado, até porque era usado antes de existir a técnica tableless(sem tabelas).

Como hj existe esta técnica, porque não usar e deixar a estrutura mais "clean"

PS: evite de usar os atributos CSS inline. Ou seja, declarado na linha do elemento. Por que? Porque o grau de precedência conta. Vamos a um exemplo para você entender do que falo.

.vermelho{
  color: red;
}

<p class="vermelho" style="color: blue;">Olá Mundo!</p>

Qual será a cor da frase "Olá mundo!" ?

Azul. Porque o CSS inline tem grau de precedência maior. Em outras palavras, ele sobrescreve uma regra existente. Só use quando não há possibilidade de definir em um CSS incorporado.