以下是我们这个影像图库的代码：
<div class=”grid”>
<div class=”row”>
<div class=”image”><img src=”images/photo1.jpg” alt=”A Lily” />
A lily in the gardens of The Vyne Country House</div>
<div class=”image”><img src=”images/photo3.jpg” alt=”A Fuchsia plant” />
Fuchsia plant in my garden</div>
</div>
<div class=”row”>
<div class=”image”><img src=”images/photo2.jpg” alt=”A crazy looking Allium flower” />
A crazy looking flower</div>
<div class=”image”><img src=”images/photo4.jpg” alt=”A Robin sitting on a fence” />
This robin has been visiting our garden over the summer.
He is very friendly and doesn’t seem to be too worried about sharing the garden with us.</div>
</div>
</div>
每张图片被一个img标签引用，它的标题包含在P元素中，它们均被包含在一个类名为“image”的div元素中。同一行的div被一个类名为“row”的div元素包含，整个影像图库被一个类名为“grid”的div元素包含。
实现这个布局的CSS代码十分简单：
.grid {
display: table;
border-spacing: 4px;
}
.row {
display: table-row;
}
.image {
display: table-cell;
width: 240px;
background-color: #000;
border: 8px solid #000;
vertical-align: top;
text-align: center;
}
.image p {
color: #fff;
font-size: 85%;
text-align: left;
padding-top: 8px;
}
以上CSS代码简明易懂，可能你还注意到了我们是怎样通过border-spacing属性来控制单元格图像之间的距离的。制作一张栅格布局变得再简单不过了，同时我们还可以避免那些使用float元素实现等高布局所带来的麻烦。
将理论运用于实战
本文展示了CSS display属性中表格相关属性值的基础用法，开发者不断努力通过CSS来实现可靠的基础栅格布局，而这种方法最终会使其变得更简单。我们已经对CSS表格布局做了一个简明易懂的介绍，研究了display属性中各种表格相关的属性值，找出了匿名表格元素的本质，另外还发现了一些其它有用的CSS表格属性。
接下来的一步就看你了，你已经了解到使用CSS表格制作栅格布局的潜力，带着好奇心去自己尝试下吧！运用从本文学到的知识，你可以开始实践你自己的CSS表格布局并发明一些新的技术。
