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

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.

Answer 4

Because the <img> tag is rendered like an inline element, similarly to letters. There is space below it is for the descenders.
There are few ways to get rid of that space.
Adjust the vertical alignment:
img {vertical-align:top;} /*or*/ img {vertical-align:middle;}
Or, set it as a block element:
img {display:block;}
Or, float it (works in this case, but not recommended):
img {float:left;}

Answer 5

<style type="text/css">
td { border:solid 1px black; margin:0px; padding:0px; }
</style>
<div>
<table>
<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">foo</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>
</table>
</div>
<br>
<div>
<span style="float:left;"><img src="http://i.imgur.com/b2f5t2B.png"></span>
<span style="float:left;"><img src="http://i.imgur.com/b2f5t2B.png"></span>
<span style="float:left;"><img src="http://i.imgur.com/b2f5t2B.png"></span>
<span class="datetime" style="float:left;">foo</span>
<span style="float:left;"><img src="http://i.imgur.com/b2f5t2B.png"></span>
<span style="float:left;"><img src="http://i.imgur.com/b2f5t2B.png"></span>
<span style="float:left;"><img src="http://i.imgur.com/b2f5t2B.png"></span>
</div>