Images do not line up in the table

Asked

Viewed 295 times

1

I have this code:

<!DOCTYPE html>
<html>
<head>
    <title>Figuras em tabelas</title>
</head>
<body>

    <h1 align="center">Montando figuras com tabelas - 1</h1>
    <table border="0" cellspacing="0" cellpadding="0" align="center">
        <tr>
            <td rowspan="3"><img src="img/verde.gif"></td>
            <td colspan="2"><img src="img/amarelo.gif"></td>
            <td rowspan="2"><img src="img/azul.gif"></td>
        </tr>
        <tr>
            <td rowspan="2"><img src="img/azul.gif"></td>
            <td><img src="img/vermelho.gif"></td>
        </tr>
        <tr>
            <td><img src="img/vermelho.gif"></td>
            <td><img src="img/cinza.gif"></td>
        </tr>
    </table>
</body>
</html>

that is generating this layout:

inserir a descrição da imagem aqui

Is it possible to remove these spaces between images?. I have tried resizing them but it is no use.

The separate images:

inserir a descrição da imagem aquiinserir a descrição da imagem aquiinserir a descrição da imagem aquiinserir a descrição da imagem aquiinserir a descrição da imagem aqui

html table

1 answer

1


is probably image margin, try a img{margin:0} your code has not css, you have tested on others browsers? tries to provide more information. follows example only to enlighten you:

            <html>
            <head>
                <title>Figuras em tabelas</title>
            </head>
            <body>

                <h1 align="center">Montando figuras com tabelas - 1</h1>
                <table border="0" cellspacing="0" cellpadding="0" align="center">
                    <tr>
                        <td rowspan="3"><img src="verde.gif" style="height: 153px;">  </td>
                        <td colspan="2"><img src="amarelo.gif"    ></td>
                        <td rowspan="2"><img src="azul.gif"  style="height: 102px;"></td>
                    </tr>
                    <tr>
                        <td rowspan="2"><img src="azul.gif"  style="height: 102px;"></td>
                        <td><img src="vermelho.gif"  style="height: 51px;"></td>
                    </tr>
                    <tr>
                        <td><img src="vermelho.gif"  style="height: 51px;"></td>
                        <td><img src="cinza.gif"  style="height: 51px;"></td>
                    </tr>
                </table>
            </body>
            </html>

  • It did not help the margin, I have tried in all browsers, even so they do not align, if I join them in an image editor, they align correctly, but not in the code.

  • Wouldn’t the size of the images interfere with the resize of the columns? for example if the blue image on the right is greater q the height of the red and yellow together, or the blue segment is greater than the red two, the table probably fits. Try to put the complete code with images and everything else. The green image is much bigger than blue+yellow or yellow+red+red. Have you thought about using divs with float left?

  • I added the separate images to the topic. I have to use only table, can’t use div;

  • That’s right, man! It’s the size of the pictures... Ex: if yellow and red are 51px high ("lying down"), the ideal is that green is 153px, which would be 3x51. and the rest keep 102px, to equal 2x51. Forehead ai.

  • It’s no use, it only gets worse. One thing I realized is that the td are bigger than the img, but if I set a height to the td, its size remains larger than the image.

  • The table is "stretching" because of the larger images. copies the code q posted ai and Voce will understand. the height I used in the image, but the ideal is that I resize them.

  • 1

    It worked, I fixed the size of the images and everything was ok, Thank you!

Show 2 more comments

Browser other questions tagged html table

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