Text leaving the table after adding images

Asked

Viewed 34 times

1

I have a table composed of 5 rows and 3 columns in which the first and third columns are being filled by gifs, and the second column is being filled by text. My problem is this: when I add the attribute rowspan for gifs to occupy the entire column, the text simply pops out of the table. Someone knows how to solve?

Code:

<body>
    <table style="border: 1px solid #FF0000; background-color: #FF6347; color: white;"> 
        <tr style="border: 1px solid #FF0000;"> 
            <td rowspan="5" style="border: 1px solid #FF0000;"> <img src="Personagens/Benga/benga_sprites/benga_sprites_imagens/benga_gif.gif"></td>
            <td>NOME</td>
            <td rowspan="5" style="border: 1px solid #FF0000;"> <img src="Personagens/Benga/benga_pokemons/benga_pokemons_sprites/benga_charizard.gif"></td>
        </tr>

        <tr style="border: 1px solid #FF0000;"> 
            <td> </td>
            <td>NOME</td>
            <td> </td>
        </tr>

        <tr style="border: 1px solid #FF0000;">
            <td> </td>
            <td>NOME</td>
            <td> </td>
        </tr>

        <tr style="border: 1px solid #FF0000;">
            <td> </td>
            <td>NOME</td>
            <td> </td>
        </tr>

        <tr style="border: 1px solid #FF0000;">
            <td>  </td>
            <td>NOME</td>
            <td> </td>
        </tr>

    </table>
</body>

Upshot:

Captura de tela mostrando o problema

html css

  • There’s nothing coming out table there.

  • I talk coming out as if the words went to another place without being programmed, because for me they should be in the center (column2), but it’s like they went to a 4° column that I didn’t even create

1 answer

0


Friend your problem are these <td> empty. If you used rowspan you don’t have to leave empty, you have to simply remove them

    <table style="border: 1px solid #FF0000; background-color: #FF6347; color: white;"> 
        <tr style="border: 1px solid #FF0000;"> 
            <td rowspan="5" style="border: 1px solid #FF0000;"> <img src="Personagens/Benga/benga_sprites/benga_sprites_imagens/benga_gif.gif"></td>
            <td>NOME</td>
            <td rowspan="5" style="border: 1px solid #FF0000;"> <img src="Personagens/Benga/benga_pokemons/benga_pokemons_sprites/benga_charizard.gif"></td>
        </tr>

        <tr style="border: 1px solid #FF0000;"> 
            
            <td>NOME</td>
            
        </tr>

        <tr style="border: 1px solid #FF0000;">
            
            <td>NOME</td>
            
        </tr>

        <tr style="border: 1px solid #FF0000;">
            
            <td>NOME</td>
            
        </tr>

        <tr style="border: 1px solid #FF0000;">
           
            <td>NOME</td>
            
        </tr>

    </table>

  • Ata, I thought it was only possible to use rowspan if you had the columns to occupy

  • @Lucassouza both rowspan and colspan is for you to precisely not need to put empty Tds, because even an empty TD takes up space, an empty cell is still a cell.

Browser other questions tagged html css

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