Why is my html table taking up more height than necessary?

Question

I have a table with a bunch of the same image in a single row. The image has a height of 21px but the cells of the table have a rendered height of 25px (in Chrome, Safari, and Firefox).

There's nothing else in the table, and from what I can tell, there are no margins, borders, or padding. So why is my table taller than it needs to be?

Here's an example:

http://jsfiddle.net/q6zy17dz/

And here's a simple example of the table:

<table>
    <tbody>
        <tr>
            <td><img src="http://i.imgur.com/b2f5t2B.png"></td>
            <td><img src="http://i.imgur.com/b2f5t2B.png"></td>
            <td><img src="http://i.imgur.com/b2f5t2B.png"></td>
            <td class="datetime"></td>
            <td><img src="http://i.imgur.com/b2f5t2B.png"></td>
            <td><img src="http://i.imgur.com/b2f5t2B.png"></td>
            <td><img src="http://i.imgur.com/b2f5t2B.png"></td>
        </tr>
    </tbody>
</table>

Bonus question: Is there a way to recreate this layout without using a table (and also without using floats)?

Answer 1

By default, an image within a table gets the computed display:table-cell property.

You should set img { display: block; }

Answer 2

You can do it entirely without tables.

body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}

nav {
    background-color: skyblue;
    position: relative;
    text-align: center;
    line-height: 22px;
}

.left, .right {
    font-size: 0;
    position: absolute;
    top: 0;
}

.left { left: 0; }
.right { right: 0; }

<nav>
    <div class="left">
        <img src="http://i.imgur.com/b2f5t2B.png">
        <img src="http://i.imgur.com/b2f5t2B.png">
        <img src="http://i.imgur.com/b2f5t2B.png">
    </div>

    <div class="datetime">foo</div>
    
    <div class="right">
        <img src="http://i.imgur.com/b2f5t2B.png">
        <img src="http://i.imgur.com/b2f5t2B.png">
        <img src="http://i.imgur.com/b2f5t2B.png">
    </div>
</nav>

Answer 3

It is the line-height property that makes the height of <td> to be 25px. In your example setting a value of 11px or less will make the cells have 21px.

td { line-height:11px;}

Here is jsfiddle.