07.CSS表格
2017-06-02 本文已影响0人
Lv_0
-
表格常用属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
caption{
caption-side: bottom;
}
table,th,td{
border-width: 1px;
border-color: darkgreen;
border-style: solid;
border-collapse: collapse;
empty-cells: show;
text-align: left;
vertical-align: top;
}
th,td{
width: 10%;
height: 50px;
}
</style>
</head>
<body>
<table>
<caption>标题</caption>
<th>列1</th>
<th>列2</th>
<th>列3</th>
<tr class="tr01">
<td>行1</td>
<td>行2</td>
<td />
</tr>
</table>
</body>
</html>
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
01.caption-side:标题位置,默认为top;
02.border-width:边线宽度,默认0;
03.border-color:边线颜色,默认透明;
04.border-style:边线风格,默认none;
05.border-collapse:边线合并,默认separate;
因table,th,td均有边线,故分离则展示两条边框;
06.empty-cells:空白单元格,默认不显示hide;
07.text-align:文本x方向对齐方式,th默认center,td默认left;
08.vertical-align:文本y方向对齐方式,默认center;
09.width:宽度,默认auto;
10.height:高度,默认auto.
运行图片
-
表格示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
#table01,#table01 th,#table01 td{
font-family: "微软雅黑" sans-serif;
border: 1.2px solid #98bf21;
border-collapse: collapse;
empty-cells: show;
}
#table01 th{
background-color: #A7C942;
color: white;
font-size: 1.2em;
width: 120px;
height: 40px;
text-align: left;
padding-left: 5px;
}
#table01 td{
height: 30px;
padding-left: 5px;
}
.tr02{
background-color: #EAF2D3;
}
</style>
</head>
<body>
<table id="table01">
<th>列1</th>
<th>列2</th>
<th>列3</th>
<tr class="tr01">
<td>行1</td>
<td>12</td>
<td>13</td>
</tr>
<tr class="tr02">
<td>行2</td>
<td>22</td>
<td>23</td>
</tr>
<tr class="tr01">
<td>行3</td>
<td>32</td>
<td>33</td>
</tr>
<tr class="tr02">
<td>行4</td>
<td>42</td>
<td>43</td>
</tr>
<tr class="tr01">
<td>行5</td>
<td>52</td>
<td>53</td>
</tr>
<tr class="tr02">
<td>行6</td>
<td>62</td>
<td>63</td>
</tr>
</table>
</body>
</html>
运行图片
