这里我给大家介绍一下在html中如何去建一个表格

1.比如以下这个个人信息简历表格

2.在html中用代码做一个表格,首先我们要给他简历一个整体框架,比如这个表格是几行几列,弄好框架之后再去弄里面的合并列或者合并行这些东西,这里的话,一个表格的结构为以下代码

<style>
	.tbb{
		border-collapse: collapse; 
		width: 500px; 
		height: 900px;
		margin: auto;
	}
	.tbb td{
		border: 1px solid #333;
	}
	.lj{
		height: 120px;
	}
	.lj ol{
		margin-left: px;
		margin-top: -50px;
	}
</style>
<body>
    <table class="tbb">         :这里我们去给表格命名为tbb,方便一会我们在style里面去改样式
    		<caption>个人简历</caption>    这里是表格的名字
    		<thead>     :这里是表头的那一行
    			<tbody>   :表身
    				<tr>    表格为14行6列,这里只需写tr*14>td*6,然后按tab键,tr为行
  					 	<td colspan="4">基本信息:</td> :这里第一行一列的元素独占一行空间,所以在自身标签下合并列为4,然后把它以下3个td都去掉
    				</tr>
    				<tr>
    					<td width="100">姓名:</td>  :姓名的话这里我们在标签上直接设置个width为100就可以
    					<td colspan="2"></td>  这里意思是把第二行的第二列与第三列合并,所以我们把它下面的第三列去掉
    					
    					<td rowspan="2" width="80"></td> :这里要插入照片,所以和自身下面那一列合并,在下一行中把要合并的那个列的块去掉
    				</tr>                   因为里面没有内容所以我们给它设置一个宽度为80、
    				<tr>
    					<td>毕业院校:</td>
    					<td colspan="2"></td>
    				</tr>
    				<tr>
    					<td>性别:</td>
    					<td width="80"></td>
    					<td>生日:</td>   这块我们直接给它随便设置一个宽度
    					<td width="80"></td>
    				</tr>
    				<tr>
    					<td>学历:</td>
    					<td></td>
    					<td>专业:</td>
    					<td></td>
    				</tr>
    				<tr>
    					<td>外语水平:</td>
    					<td></td>
    					<td colspan="2">联系方式:</td>  这里要和它下面的两列合并,合并几列就写几。然后把它下面要合并的
    				</tr>                                几列去掉就好
    				<tr>  
    					<td>籍贯:</td>
    					<td colspan="2">家庭住址:</td>
    					<td>婚姻:</td>
    
    				</tr>
    				<tr>
    					<td colspan="4">职业技能:</td>
    				</tr>
    				<tr>
    					<td colspan="4" class="lj"> 
    						<ol>       这块我们直接给它设置一个有序列表,再来给它设置一个高度。
    							<li></li>
    							<li></li>
    							<li></li>
    						</ol>
    					</td>
    				</tr>
    				<tr>
    					<td colspan="4">项目经验:</td>
    				</tr>
    				<tr>
    					<td colspan="2">智慧校园选课系统</td>   这个块要合并两列,里面比较长所以这个块显得长一点
    					<td colspan="2">2019年1月~2019年6月</td>
    				</tr>
    				<tr>
    					<td colspan="4" rowspan="2" height="30">项目描述:</td>  这里它需要合并4列、2行,再设置一个
    				</tr>              宽度为30,在上面的css中给它设置为文字居中
    				<tr>
    				</tr>
    				<tr>
    					<td colspan="4">预览地址:</td>
    				</tr>
    				<tr>
    					<td>github:</td>
    					<td colspan="3"></td>
    				</tr>
    			</tbody>
    		</thead>
    	</table>

这里还想说的是如果想把表单的表头的内容设置为黑色加粗字体,那么只需把表头里面的td改为th即可。
以上是我为大家总结的表单,内容有很多欠缺之处,还望大家指出毛病,谢谢大家。

更多推荐

如何在html中制作个人简历表单