首先看代码如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <html> <body style="cellspacing:0;cellpadding:0;margin:0;border:0;"> <table border="0" bgcolor="#276e51" width=100%> <tr > <td></td> <td width="400px"> <img src="http://202.115.196.10/uploads/logo/15513192595074.png" width="400px"/> </td> <td width="250px"></td> <td width="230px"> <input type="text" style="height:30px;width:200px;background-color:#3d7c62;color:white;border:none;border-radius:20px;" placeholder="请输入搜索内容...";> </td> <td width="80px"><a href="http://news.baidu.com/"style="color:white;font-size:15;">信息公开</a></td> <td width="80px"><a href="http://news.baidu.com/"style="color:white;font-size:15;">招标采购</a></td> <td width="80px"><a href="http://news.baidu.com/"style="color:white;font-size:15;">内网入口</a></td> <td width="80px"><a href="http://news.baidu.com/"style="color:white;font-size:15;">ENGLISH</a></td> <td></td> </tr> </table> </body> </html> |
上述代码中的知识点：
1）table中应该写的属性有两个，背景颜色，和总宽度为100%浏览器宽度。还有一个属性就是border，这个属性调整为1的时候是用来观察表格布局中是否存在问题，非常有用，完成调整后再设置为0.
2）为了内容居中，两边留白，中间的内容格子必须带有宽度尺寸的设置，除去两边两个格子，其他格子宽度的总和应当等于1200px。如果不设置尺寸，第二格的logo会顶到最左边去。
3）两边的两个格子没有内容。但是必须写。不设置宽度的原因是可以跟随浏览器的宽度而实时变化。
