How to arrange the table so that photo and information are on the same line?

Question

How to arrange the table so that photo and information are on the same line?

Asked 8 years, 8 months ago

Viewed 1,070 times

2

I need the image and property information contained in the table to be at the same time, but I don’t know how to fix.

They follow the pictures of how it is and how I wanted:

Follows the code:

@charset "UTF-8";
@font-face {
    font-family: 'FonteLogo';
	src: url("../fonts/GLCBaskerville.ttf");
}

/*******************************CSS DAS MEDIDAS PRINCIPAIS DO SITE*/

@media (min-width: 1200px) {
    .container{
        max-width: 790px;
    }
}

@media (min-width: 992px) {
    .container{
        max-width: 790px;
    }
}

body {
    margin-top: 10px;
    font-family: Verdana;
    font-size: 12px;
    color: #727E55;   
}

.container, .container-fluid {
    background-color: #fFF;   
}

.row {
    margin-top: 0;
    margin-bottom: 3px;
}

[class*="col-"], header, footer, aside, section, div[role="main"] {
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 3px;
    padding-right: 3px;
    background-color: #f5f5f5;
    background-color: rgba(86,61,124,.15);
    border: 1px solid #ddd;
    border: 1px solid rgba(86,61,124,.2);
}

div[role="main"], footer {
    background-color: #fff;
    height: auto;
}

header, .masthead, .img-rolante {
    margin-bottom: 0;
}

/*******************************CSS DA TABELA*/

.bloco {
    align-items: center;
    border-collapse: collapse;
}

.info {
	font-family: Verdana;
	color: #829951;
	font-size: 2;
   	font-weight: 700;
    text-align: left;
    height: auto; /*25px*/
}

.info a,
.info a:hover,
.info a:active,
.info a:focus {
	text-decoration: none;
	font-family: Verdana;
	color: #829951;
	font-size: 2;
   	font-weight: 700;
}

.descricao {
    height: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    margin-right: 10px;
    font-family: Verdana;
    font-size: 2;
    color: #697052;
    text-align: justify;
}

<!DOCTYPE html>
<html lang="pt-br">
    
<head>
    <title>LoremIpsum</title>
    <meta charset="utf-8">    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" type="text/css" rel="stylesheet">
    <!-- CSS do Index -->
    <link href="css/imoveis.css" type="text/css" rel="stylesheet">
    <link href="css/geral.css" type="text/css" rel="stylesheet">   
</head> 

<body>    
    <div class="container">         
        
        <header class="row"> 
            <div class="masthead">
                <div class="img-header">
                    <a class="logo" href="#">LoremIpsum.Com</a> <span class="icones"><a href="#"><span class="glyphicon glyphicon-home"></span></a> <a href="#"><span class="glyphicon glyphicon-envelope"></span></a></span>
                </div>                 
            </div>
        </header>    

        <div class="row">           

            <div role="main" class="col-md-12">    
                <div class="separador" style="margin-bottom: 5px"></div>
                
                <div class="table-responsive">
                    <tbody class="bloco" align="center">
                        <tr><td style="height:140px; width:170px">
                            <table style="border:1px solid #B0C088" border="0" cellpadding="0" cellspacing="0">
                                <tbody>
                                    <tr><td align="center"><a name="tm226" href="#"><img src="https://img.r7.com/external_images?dimensions=348x196&url=https://vtb.r7.com/396768/2019/12/08/5ded5b634b495564c400008e/9fef53c01c1c4926839c729d6dc1288b__CR7_FA_0812_RODRIGOCUIDADASOVELHAS_thumb_thumb.jpg" width="200"></a></td>
                                    </tr>
                                </tbody>
                            </table>
                            </td>
                            
                            <td style="width:600px">
                                <table style="width:585px">
                                    <tbody>
                                        <tr>
                                        <td class="info" width="135">ID: XXYYY</td>
                                            
                                        <td class="info" width="200">Área: XX hectares</td>
                                            
                                        <td class="info" width="250"><a href="mapatm226.htm"><span class="glyphicon glyphicon-search"></span> XXXXXXXXXXXXXXXXXXX - XX</a>
                                        </td>
                                        </tr>
                                        
                                        <tr>
                                            <td class="descricao" colspan="3" height="90" width="585"><p><span style="font-weight:700; color:#FF6600">ATENÇÃO!</span> <span style="font-weight:700; color:#829951">Oportunidade!</span> Sitio com 32 hectares (320.000 m²) a Venda em São Bento do Sapucaí, região da Serra da Mantiqueira, em local de rara beleza e total privacidade sem estar isolada, lindos recantos e vista (360º) panorâmica para a Pedra do Baú, são os cartões postais desta propriedade. Terreno com ótima topografia, muitos platôs, terras de cultura, pastos bem formados e rico em água. Ótima localização e fácil acesso, fica apenas 3 km da cidade. Oportunidade única para investir em uma área de beleza cinematográfica, com alto potencial para empreendimentos voltados ao lazer e ao turismo.</p></td>
                                        </tr>
                                        
                                        <tr><td align="center" colspan="3" height="25" width="585">
                                                <table style="border-collapse: collapse" width="585">
                                                    <tbody>
                                                        <tr><td width="585">
                                                            <table width="585">
                                                                <tbody>
                                                                    <tr><td class="info" width="135">R$0.000.000,00</td>
                                                                        
                                                                    <td class="info" width="200"><a href="mailto:[email protected]?subject=TMXXX - XX hectares - XXXXXXXXXXXXXXXXX-XX - LoremIpsum.Com"><span class="glyphicon glyphicon-envelope"></span> Clique Aqui</a></td>
                                                                        
                                                                    <td class="info" width="250"><span class=" 	glyphicon glyphicon-phone-alt"></span> (XX) XXXX.XXXX</td>
                                                                    </tr>
                                                                </tbody>
                                                            </table>
                                                            </td></tr>
                                                    </tbody>
                                                </table>
                                            </td></tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                    </tbody>
                </div>
                
                <div class="separador"></div>
                
            </div>
            
        </div>
        
        <footer class="row">
            
                        
            <div class="img-footer">
            </div>
            
            <p style="font-size: 8px; margin-top: 5px; margin-bottom:2px"> <img style="margin-left: 10px; margin-right: 10px" src="https://img.r7.com/external_images?dimensions=348x196&url=https://vtb.r7.com/396768/2019/12/08/5ded5b634b495564c400008e/9fef53c01c1c4926839c729d6dc1288b__CR7_FA_0812_RODRIGOCUIDADASOVELHAS_thumb_thumb.jpg" width="200" /> <!--<span class="glyphicon glyphicon-earphone" style="margin-left: 10px; margin-right: 10px"></span> +55 12 3971.1150 --> <span class="linkt1">TERMOS DE USO</span> Web Design &amp; Development by <a class="linkt1" href="mailto:[email protected]">LoremIpsum.Com</a> © 2003 | All 
      rights reserved | <span class="linkt1">CRECI SP XXXXX 
      - CRECI MG XXXXX</span> </p>
            
            <p style="font-size: 11px; margin-bottom:3px"> Encontre seu Imóvel na <a class="linkt2" href="terrasdamantiqueira.com">LoremIpsum.Com</a>
            </p>
            
            <p style="font-size:8px; margin-bottom:1px">
                <a href="#" class="linkt1">CASAS A VENDA</a> | 
                <a href="#" class="linkt1">CHÁCARAS A VENDA</a> |
                <a href="#" class="linkt1">SÍTIOS A VENDA</a> |
                <a href="#" class="linkt1">FAZENDAS A VENDA</a> |
                <a href="#" class="linkt1">POUSADAS A VENDA</a> |
                <a href="#" class="linkt1">TERRENOS A VENDA</a>
            </p>
            
            <p style="font-size:11px"><a href="#" class="link3">CLIQUE AQUI</a> e Cadastre seu Imóvel a Venda conosco</p>
            
        </footer>  
        
    </div>    

    <!-- jQuery (necessario para os plugins Javascript Bootstrap) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

Thanks for your help!

2 answers

Browser other questions tagged html css html5 table table

You are not signed in. Login or sign up in order to post.

by evandrobm • **372** points · Answer 1 · 2018-10-10T18:37:48+00:00

Instead of table, I would recommend you use flexbox (here is a very good reference https://css-tricks.com/snippets/css/a-guide-to-flexbox/)

You put a container with the image on the left and the whole in a div on the right

<div class="container">
    <img src="...">
    <div class="content">
        ...
    </div>
</div

The container would have something like:

.container {
    width: X; //conforme o teu layout, ou 100%...
    display:flex;
    align-items: flex-start;
}

Then the image and the div with the content would have something like:

img {
    width: Y; //Tamanho da imagem
}
div.content {
    flex: 1; //Usará o restante da largura do container pra si
}

by user42676 · Answer 2 · 2016-03-19T17:37:45+00:00

So your doubt is pretty simple, if I understand what you need.

All you need to do is put the td that contains your text on the same tr that contains the td that your image is on.

Thus:

<tr>
   <td align="center">
      <a name="tm226" href="#">
        <img src="imagem/tm22600/tm22600.jpg">
      </a>
   </td>
   <td class="descricao" colspan="3" height="90" width="585">
      <p>
         <span style="font-weight:700; color:#FF6600">ATENÇÃO!</span> <span style="font-weight:700; color:#829951">Oportunidade!</span> Sitio com 32 hectares (320.000 m²) a Venda em São Bento do Sapucaí, região da Serra da Mantiqueira, em local de rara beleza e total privacidade sem estar isolada, lindos recantos e vista (360º) panorâmica para a Pedra do Baú, são os cartões postais desta propriedade. Terreno com ótima topografia, muitos platôs, terras de cultura, pastos bem formados e rico em água. Ótima localização e fácil acesso, fica apenas 3 km da cidade. Oportunidade única para investir em uma área de beleza cinematográfica, com alto potencial para empreendimentos voltados ao lazer e ao turismo.
      </p>
   </td>
</tr>

See you around the/