第18章 CSS表格与列表-优快云博客

index.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8">
	<title>CSS表格与列表</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<table border="1">
	<caption>人员档案</caption>
	<tr>
		<th>姓名</th>
		<th>性别</th>
		<th>年龄</th>
	</tr>
	<tr>
		<td>张三</td>
		<td class="sex">男</td>
		<td></td>	
	</tr>
	<tr>
		<td>李四</td>
		<td>女</td>
		<td>28</td>	
	</tr>
	<tr>
		<td>王五</td>
		<td>男</td>
		<td>32</td>	
	</tr>
</table>


<ul>
	<li>张三，是一个非常好的青年</li>
	<li>李四</li>
	<li>王五<b>2</b></li>
	<li>马六</li>
</ul>

<div><span>我是HTML5</span></div>

<em>内容简介：</em><textarea rows="10"></textarea>

</body>
</html>

style.css

@charset "utf-8";

table {
	width: 400px;
	height: 300px;
	text-align: center;

	/*border-collapse: separate;*/
	/*border-collapse: collapse;*/

	/*border-spacing: 10px;*/

	/*caption-side: bottom;*/

	/*empty-cells: hide;*/


	/*table-layout: fixed;*/

	border: 1px solid red;
}

table tr th, table tr td {
	border: 1px solid red;
}

ul {
	width: 120px;
/*	list-style-type: square;
	list-style-position: inside;
	list-style-image: url(bullet.png);*/
	list-style: square inside url(bullet.png);
}

.sex {
	/*vertical-align: bottom;*/
	/*vertical-align: baseline;*/
	/*vertical-align: middle;*/
}

b {
	/*vertical-align: sub;*/
	vertical-align: super;
}

div {
	width: 300px;
	height: 300px;
	background: silver;
	text-align: center;
}
div span {
	background: green;
	/*vertical-align: -50px;*/
	/*vertical-align: -200%;*/
}
em {
	vertical-align: 80px;
}