HTML和CSS学习笔记第13章——表格和更多列表

返回主目录

<table>

<table>的结构

<table>
	  <caption>The cities I visited</caption>//标题
      <tr>	//行
        <th>City</th>	//表头
        <th>Date</th>
        <th>Temperature</th>
      </tr>
      <tr>
        <td>Walla Walla, WA</td>	//单元格
        <td>June 15th</td>
        <td>75</td>
      </tr>
      <tr>
        <td>Magic City, ID</td>
        <td>June 25th</td>
        <td>74</td>
      </tr>
</table>

<table>的样式

table{
  margin-left: 20px;
  margin-right: 20px;
  border:thin solid black;	
  caption-side: bottom; 	//把标题移到表格下面
  /*border-spacing:0px;*/	//添加此语句将使表格内边框间距为0，即边框内双虚线变为单线
  /*border-spacing:10px 30px;*///添加此语句将使边框间距不同
}
td,th{
  border:thin dotted grey;
  padding:5px;	
}
caption{
  font-style: italic;
  padding-top: 8px;
}

数据对齐方式

为需要对齐的单元格分配相应的类，并在样式表中为该类指定对齐方式：

.centerInTable{
  text-align: center;
}
.rightInTable{
  text-align: right;
}

使用伪类指定行颜色

除了为每个行元素添加具体类来为行指定颜色外，可以使用更高级的伪类方法来达到效果。

nth-child伪类，状态是一个元素相对于他的兄弟元素的数字顺序（nth）。
加入我想选择偶数段落，则可以：

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

nth-child伪类也可以用于其他，如<p>等。

合并单元格

纵向合并：使用<td>的rowspan属性指定一个单元格占几行。

<tr>
        <td rowspan="2">Walla Walla, WA</td>
        <td class="centerInTable">June 15th</td>
        <td class="centerInTable">75</td>
        <td rowspan="2" class="rightInTable">1,204 ft</td>
        <td rowspan="2" class="rightInTable">29,686</td>
        <td class="centerInTable">4/5</td>
      </tr>
      <tr>
      	//这里被占据
        <td class="centerInTable">June 25th</td>
        <td class="centerInTable">74</td>
		//这里被占据，删除换行也可以
		//这里被占据
        <td class="centerInTable">3/5</td>
      </tr>

横向合并：与纵向合并类似，只需改为colspan属性就可以了。

改变项目符号

列表项属性list-style-type

利用这个属性可以改变列表前面的项目符号（也叫列表标记）：

li{
  list-style-type: circle;
}

默认为disc，实心圆。circle为空心圆。square为实心方块。

使用定制项目符号list-style-image

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