HTML里，怎么给table做一个外面的标题框
2016-01-06 · 做真实的自己 用良心做教育
千锋教育
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/html; charset=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>
效果：
如果没有用任何框架，自己做的话也简单：
<fieldset style="width:300px">
<legend>Individual Checkboxes</legend>
Argument Text： <input type="text" name="name" size="20">
</fieldset>
只不过没有 extjs 做得好看。
