CSS表格


CSS 表格属性可以帮助您极大地改善表格的外观。

属性 描述
border-collapse 设置是否把表格边框合并为单一的边框。
border-spacing 设置分隔单元格边框的距离。
caption-side 设置表格标题的位置。
empty-cells 设置是否显示表格中的空单元格。
table-layout 设置显示单元、行和列的算法。

案例:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>演示CSS表格属性</title>
<style type="text/css">
	table{
		/*设置表格的边框是否合并    separate : 分开   collapse: 合并*/
		border-collapse:collapse; 
	}
</style>
</head>
<body>
<fieldset>
	<legend>注册用户</legend>
	<form action=""  method="post">
	<table border="1" align="center" width="400px">
		<caption>新用户注册</caption>
		<tr align="center">
			<td>用户名:</td>
			<td><input type="text" name="userName"/></td>
		</tr>
		<tr align="center">
			<td>密码:</td>
			<td><input type="password" name="userPwd"/></td>
		</tr>
		<tr align="center">
			<td>性别:</td>
			<td>
			 <input type="radio" name="gender" value="male"/>男
			<input type="radio" name="gender" value="female"/>女
			</td>
		</tr>
		<tr align="center">
			<td>爱好:</td>
			<td>
			<input type="checkbox" name="hobby" value="eat"/>吃饭
			<input type="checkbox" name="hobby" value="sleep"/>睡觉
			<input type="checkbox" name="hobby" value="play"/>玩游戏
			</td>
		</tr>
		<tr align="center">
			<td>城市:</td>
			<td>
			<select name="city">
				<option value="">请选择城市</option>
				<option value="gd">广州</option>
				<option value="bj">北京</option>
				<option value="sh">上海</option>
			</select>
			</td>
		</tr>
		<tr align="center">
			<td>头像:</td>
			<td>
			<input type="file" name="head">
			</td>
		</tr>
		<tr align="center">
			<td colspan="2" align="center">
			<input type="submit" value="确认"/>
			<input type="reset" value="取消"/>
			</td>
		</tr>
	</table>
	</form>
</fieldset>
</body>
</html>

 效果: