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