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?

Navigation

#1 by (0 votes)
#2 by (0 votes)

1

I need the image and property information contained in the table to be at the same height, but I do not know how to fix it.

Here are the photos of how you are and how I wanted to:

FollowtheHTMLcode:

<!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="imagem/tm22600/tm22600.jpg"></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="imagem/Index/informacao.gif" /> <!--<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><scriptsrc="js/bootstrap.min.js"></script>
</body>
</html>

And the css code, if needed:

@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;
}

Thanks for the help right away!

html html5 css tabela table

asked by anonymous 19.03.2016 / 16:46

2 answers

Application closing when I receive receive connection / change of screen Can Python be used for heavy work? [closed]

score 0 · Answer 1

So, your question is quite simple, if I understood correctly what you need.

All you have to do is put the td that contains your text, in the same tr that contains the td in which your image is.

So:

<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 later

score 0 · Answer 2

Instead of table, I would recommend using flexbox (here's a good reference link

You put a container with the image on the left and the whole on 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 div with the content would look something like:

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