题目:
根据下图,编写HTML结构。要求:符合xHTML 1.0规范
吐槽:本来以为自己的html已经没有问题了。。。。唉,可是还是有问题啊!!!!!表格的处理还没有掌握!
答:
这里表格处理主要有两个点:合并单元格和表格边框样式,接下来,我们一步一步的来分析:
合并单元格:
对于行(tr)通常是合并列,用到colspan属性。对于列来说则是合并行,用到rowspan属性。从图中可以看出,表格中的美国占据两行。而“美国”可以看作是一个题头(th),因此,html代码如下:
<table>
<strong><thead></strong>
<span style="color:#cc0000;"><strong><tr></strong></span>
<th>国家</th><th>网站名</th><th>URL</th><th>Alexa排名</th>
</tr>
</thead>
<strong><tbody></strong>
<tr>
<th>中国</th><td>淘宝网</td><td>www.taobao.com</td><td>38</td>
</tr>
<tr>
<th rowspan="2">美国</th><td>Ebay</td><td>www.ebay.com</td><td>22</td>
</tr>
<strong><span style="color:#cc0000;"><tr><td>Amazon</td><td>www.amazon.com</td><td>27</td></tr></span></strong>
</tbdoy>
<strong><tfoot></strong>
<span style="color:#cc0000;"><strong><tr><td colspan="4"></strong></span>Alexa。com提供数据</td></tr>
</tfoot>
</table>
代码要注意细节,上述代码中,标红的为细节部分,(因为,我手写的时候,总是没有写。。。。。)
好了,现在运行的结果如下:
看到什么了!!! 对!和原来相比没有边框,而且每一列的字体很紧凑并且左对齐,加上“中国”和“美国”两个字为黑体。所以我们需要添加样式!! 对于后两项来说,是比较简单的,添加如下代码:
thead th,thead td, tbody th, tbody td{
width:100px;
text-align:center;
}
tfoot td{
text-align:right;
}
tr>th:<strong>only-of-type</strong>{
<strong>font-weight:normal;</strong>
}
得到表格如下:
现在看看边框了!! 表格边框处理,个人认为应该是一个知识点
先介绍下表格属性:
border-collapse: 两个值:collapse和separate。
border-spacing: 设置相邻单元格边框的间距
caption-side: top和bottom:表示标题位置
empty-cells; hide和show,设置空单元格的处理方式
table-layout: auto和fixed,指定表格的布局样式。
我们先添加如下css
table,tr,td,th{
border:1px solid black;
}
得到表格如下:
之所以看到双边框,是因为,css中,为table添加了一个大边框后,又为每个单元格添加边框。如果去掉css中的table后,得到下面的表格样式。
上面两个表格均和题目中给的表格不一样。那是因为border-collapse是用来控制table元素相邻单元格边框的样式,默认处理样式是separate。因此,我们只需修改border-collapse为collapse即可。
tr,td,th{
border:1px solid black;
}
table{
border-collapse:collapse;
}
最后得到的效果是