Question

嗨我需要一张如下图所示的表

enter image description here

但我不知道如何安排这样的图像。所以这是当前的代码

 <!DOCTYPE html>
<html>
<body>

<table id="tab" border="1">
<tr>
  <td><img align ="center" border="0" src="/images/cam.jpg"  width="15px" height="15px"></td>
  <td><img align ="center" border="0" src="/images/gal.jpg"  width="15px" height="15px"></td>
  <td><img align ="center" border="0" src="/images/chat.jpg"  width="15px" height="15px"></td>
</tr>

</table>

</body>
</html>

点击此处：http://pastebin.com/HLPdDNyg

Answer 1

尝试这个，

table
{
    border:1;
    width:500px;
}
td
{
     border:0;
    width:150px;
    height:150px;
    text-align:center;
}
td img
{
    vertical-align:middle;
}

http://jsfiddle.net/9AxmR/2/

Answer 2

Live demo

<table id="tab" >
<tr>
  <td><img src=""></td>
  <td><img src=""></td>
  <td><img src=""></td>
</tr>
</table>

CSS：

#tab{
  border-collapse:collapse;
}
#tab td{
  background:#eee;
  width:100px;
  text-align:center;
  padding:0 15px;
}
#tab td img{
  vertical-align:middle;
}

安排在桌行中间的象

2 个答案: