[HeadFirst-HTMLCSS学习笔记][第十三章表格]

表格

-

table

块

tr

行 table row

th

表头 table head

td

表数据 table data;

caption

表格标题

<table>
<caption>
The cities I visited on my Segway'n USA travels
</caption>
<tr>
<th>City</th>
<th>Date</th>
<th>Temperature</th>
<th>Altitude</th>
<th>Population</th>
<th>Diner Rating</th>
</tr>
<tr>
<td>Walla Walla, WA</td>
<td>June 15th</td>
<td>75</td>
<td>1,204 ft</td>
<td>29,686</td>
<td>4/5</td>
</tr>
<tr>
<td>Magic City, ID</td>
<td>June 25th</td>
<td>74</td>
<td>5,312 ft</td>
<td>50</td>
<td>3/5</td>
</tr>
</table>

像表现成行开头的话。每个tr放一个th

合并行

rowspan

<tr>
<td rowspan="2">Truth or Consequences,NM</td>
<td class="Center">August 9th</td>
<td class="Center">93</td>
<td rowspan="2" class="Right">4,242ft</td>
<td rowspan="2" class="Right">7,289</td>
<td class="Center">5/5</td>
</tr>
<tr>
<td class="Center">August 27th</td>
<td class="Center">98</td>
<td class="Center">4/5</td>
</tr>

合并列

colspan

表格CSS

caption-side

表格标题的放置方式

caption-side: bottom; 表格下方

不用外边距，而是用

border-spacing

格距

，可分为垂直方向和水平方向

border-collapsa

折叠边框

border-collapsa: collapse;

列表CSS

list-style-type

属性

disc 实心圆

circle 空心圆

square 方格

none 什么都没有

定制标记

li {
list-style-image: url(images/backpack.gif);
padding-top: 5px;
margin-left: 20px;
}

标记位置 list-style-position

nth-child伪类

能嵌套

奇 偶段落

p:nth-child(even){
background-color :red;
}
p:nth-child(odd) {
background-color :green;
}

跟n有关

p:nth-child(2n){
background-color :red;
}
p:nth-child(2n+1){
backgroud-color:green;
}

tr,隔层染色

tr:nth-child(2n+1){
background-color: #fcba7a;
}