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

来源：互联网发布：黄一琳网络直播的看法编辑：程序博客网时间：2024/05/22 02:05

表格

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

0 0