使用webstorm制作网页文件的时候，难免会遇到制作表格的情况，而且关键的布局方式一般都是使用表格完成的。
工具/原料
电脑
webstorm
方法/步骤
1、制作表格我们需要使用标签table在html中输入table标签，然后设置行和列，，tr代表行,td代表列，然后在行和列中输入相关的内容。
2、预览网页我们发现，网页显示格式看起来不像是表格，因为没有框线，这时候我们需要给table标签设置边框，border，如图所示，在table标签中，定义border的值，这样再预览网页我们就可以看到表格样式。
3、图中的表格表头和文本内容显示格式一致，我们可以使用th标签代替td标签作为表格的表头，系统自动将表头内部的文本内容加粗居中显示，这样表头格式就被着重定义出来。
4、可以使用caption标签给表格添加标题，caption是table标签的子标签需要写在table标签内部，将需要定义的标题文本输入到caption中。
5、两行数值一样的话可以设置为rowspan值，如图所示，两行数据一致，直接设置rowspan值为2，下一行的这个数值就不必单独定义了，如果是三行数值一致，那么可以直接设置为3。
6、将多列相同数据一起显示可以使用colspan来进行设置，如图所示，第三列所有的内容都全部显示一致，我们可以设置像表格中的合并效果然后一起显示，这样就不必每一列都输入内容。
html中给table增加外面的标题框可以用div嵌套表格的方式来实现：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf8">
<title>Untitled Document</title>
<script language="JavaScript" src="js/prototype.js"></script>
<script language="JavaScript">
function changeStyle(){
if(document.getElementById('test').style.display=='none'){
alert("show")
document.getElementById('test').style.display='block'
}else{
alert("hide")
document.getElementById('test').style.display='none'
}
}
</script>
</head>
<body>
<input value="测试" type="button" onclick="changeStyle()">
<select type="button" value="测试" onchange="changeStyle()">
<option>1</option>
<option>2</option>
</select>
<table>
<tr>
<td><!--在table中嵌套div时，必须将div放在td中，否则达不到预期效果-->
<div id="test" style="display:none">
<table>
<tr>
<td>
<input type="text" value="1"/>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
效果：
<table class="cusTable">
<thead>
<tr>
<th data-colspan="50" data-align="center">就业情况</th>
</tr>
<tr>
<th data-colspan="5" data-align="center">就业</th>
<th data-colspan="5" data-align="center">就业</th>
<th data-colspan="5" data-align="center">就业</th>
</tr>
<tr>
<th data-field="ceshi">1</th>
<th data-field="ceshi">2</th>
<th data-field="ceshi">2</th>
<th data-field="ceshi">2</th>
<th data-field="ceshi">2</th>
<th data-field="ceshi">水平</th>
<th data-field="ceshi">水平</th>
<th data-field="ceshi">水平</th>
<th data-field="ceshi">水平</th>
<th data-field="ceshi">水平</th>
<th data-field="ceshi">测试</th>
<th data-field="ceshi">测试</th>
<th data-field="ceshi">测试</th>
<th data-field="ceshi">测试</th>
<th data-field="ceshi">测试</th>
</tr>
</thead>
</table>
引入bootstrap的js做出来是这样的，
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）