这里我给大家介绍一下在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中制作个人简历表单
发布评论