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