阿里笔试题（六）

题目：

根据下图，编写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;
	}

最后得到的效果是