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;
}