CODEWITHSUNDEEP
csshtmlhtml-table
Brian Meek
Brian Meek

Reputation: 33

HTML5 Table Spacing Issues

I'm trying to get all of these images to line up in a table. For some reason it is adding extra space at the bottom of the cells. I've tried all of the different solutions that is suppose to fix this spacing issues.

What it's supposed to look like

What I'm Getting

Here's a look at my HTML5 code as well:

<!DOCTYPE html> <html>
<head>
    <title></title>
    <meta charset = "utf 8">
    <style>
        table{
            border-collapse : collapse;
            border-spacing : 0;
            border:0;
        }
        tr,td{ 
            border-collapse:collapse; 
            padding : 0; 
            border : 0;}
    </style>
</head>
<body>
    <table>
        <tr>
            <td><img src="tableImages\ul.gif" alt ="1,1"></td>
            <td colspan = "2"><img src ="tableImages\top.gif" alt = "1,2"></td>
            <td><img src="tableImages\ur.gif"alt="2,2"></td>
        </tr>

        <tr>
            <td rowspan = "2"><img src="tableImages\left.gif"alt="2,1"></td>
            <td><img src="tableImages\1.gif"alt="2,1"></td>
            <td><img src="tableImages\2.gif"alt="2,1"></td>
            <td rowspan = "2"><img src="tableImages\right.gif"alt="2,1"></td>
        </tr>

        <tr>
            <td><img src="tableImages\3.gif"alt="2,1"></td>
            <td><img src="tableImages\4.gif"alt="2,1"></td>
        </tr>

        <tr>
            <td><img src="tableImages\ll.gif" alt ="1,1"></td>
            <td colspan = "2"><img src ="tableImages\bottom.gif" alt = "1,2"></td>
            <td><img src="tableImages\lr.gif"alt="2,2"></td>
        </tr>
    </table>
</body> </html>

I've come to the realization that the problem lies within HTML5, because if I remove <!DOCTYPE html> (meaning that the browser won't read it in 5) I don't have this problem.

If anyone could help me, Thank you very much!

Upvotes: 3

Views: 404

Answers (1)

nkmol
nkmol

Reputation: 8091

So after some fiddling around to reproduce the problem, i found what is wrong (here a JSFiddle of the problem).

an image is by default displayed as a inline-block, this means that the height is calculated according to the font-size. It is expecting a font, so it has a font-size by default (see this answer for more info). There 2 ways of fixing this.

Make the image display as a block-element

Simply change the property display to block

img {
   display: block;
}

JSFiddle

Explicity note that there is no font inside the cell

Simply change the font-size to 0

td {
   font-size: 0;
}

JSFiddle

Note that i used the first <td> only as example, this should work with all of them

Upvotes: 1

Related Questions