HTML中表格显示细黑线和合并单元格

时间：2022-11-20 11:00:50

最近在公司画一些页面的HTML元素，由于原来较少画前段页面，所以表格画的有点费劲。尤其是表格的边框更是难搞，总是凸起的双层粗线，类似下面的样子：

HTML中表格显示细黑线和合并单元格

但是我们想要的是细黑线，这样的样子：

HTML中表格显示细黑线和合并单元格

而通过网上的资料，发现CSS代码控制表格样式可以达到目的，其代码如下，在我们的HTML头标签加入以下代码：

<head>
<style type="text/css">
         table.tb1{
                   border-collapse:collapse;
         }
        
         table.tb1tr{
                   width:700px;
                   text-align:center;
                   border:1pxsolid #000000;
         }
        
         table.tb1td{
                   border:1pxsolid;
         }
        
         table.tb1th{
                   margin:0auto;
                   text-align:center;
                   border:1pxsolid;
         }
</style>
 
</head>


然后，为每个<table>标签加入class属性，其值为"tb1"，即上面的CSS定义的table.tb1，代码示范如下：

<table class="tb1" >
	<caption align="top"><h2>§2  基金产品概况</h2></caption>
	<tr>
	        <td style="width:350px">基金简称</td>
	        <td style="width:350px"><input type="text" data-dojo-type="dijit/form/ValidationTextBox" style="width:300px;"/></td>
	</tr>
	<tr>
		<td style="width:350px">场内简称</td>
		<td style="width:350px"><input type="text" data-dojo-type="dijit/form/ValidationTextBox" style="width:300px;"/></td>
	</tr>
	<tr>
		<td style="width:350px">基金主代码</td>
		<td style="width:350px"><input type="text" data-dojo-type="dijit/form/ValidationTextBox" style="width:300px;"/></td>
	</tr>
</table>

如此我们页面显示的表格就如同word文档中的表格的样子一样了。需求实现了。

解决了这个问题，再来看下一个问题，我们所需要的表格不是所有时候都是横竖成行的，比方说下面这个样子，中间部分如何画呢？

HTML中表格显示细黑线和合并单元格

这时我们首先要从行和列的数量来看，这样的表格不是拆分出来的是合并出来的，那么它就应该看做是4行6列的表，注意这点非常重要！而不是3行5列。接着我们来看合并的方法，姓名的单元格可以看做是第一列中第一行和第二行的首个单元格合并形成，<table>标签的属性rowSpan实现了这样的功能。设其值为2，即可使先上下两个格合并，而colSpan属性实现了同行中左右两个单元格的合并，上面的表格代码如下：

<table class="tb1">
	<caption align="left"><h3>4.1 基金经理（或基金经理小组）简介 </h3></caption>
	<tr>
		<td rowspan="2" style="width:116px">姓名</td>
		<td rowspan="2" style="width:116px">职务</td>
		<td colspan="2" style="width:232px">任本基金的基金经理期限</td>
		<td rowspan="2" style="width:116px">证券从业年限</td>
		<td rowspan="2" style="width:120px">说明</td>
	</tr>
	<tr>
		<td>任职日期</td>
		<td>离任日期</td>
	</tr>
	<tr>
		<td><input type="text" align="right" 	style="width:90%;"/></td>
		<td><input type="text" align="right"	style="width:90%;"/></td>
		<td><input type="text" align="right" 	style="width:90%;"/></td>
		<td><input type="text" align="right" 	style="width:90%;"/></td>
		<td><input type="text" align="right" 	style="width:90%;"/></td>
		<td><input type="text" align="right" 	style="width:90%;"/></td>
	</tr>
	<tr>
		<td><input type="text" align="right" 	style="width:90%;"/></td>
		<td><input type="text" align="right" 	style="width:90%;"/></td>
		<td><input type="text" align="right" 	style="width:90%;"/></td>
		<td><input type="text" align="right" 	style="width:90%;"/></td>
		<td><input type="text" align="right"	style="width:90%;"/></td>
		<td><input type="text" align="right" 	style="width:90%;"/></td>
	</tr>
</table>

看到代码我想广大程序猿同胞就知道了，想要合并几个就设置colspan和rowspan的值为几即可。而下面的行或列只要补剩下的就好了。

 

至此，合并单元格和细实线的样式全部实现，我们就在HTML页面画出了一个类似word文档中表格的table了

标签：

相关文章