《Head first HTML与CSS 第二版》读书笔记 第十三章 表格和列表

一、表格

HTML表格元素<table><tr><th><td>一块儿用来建立一个表格。

<table>元素定义并包围整个表格。

<tr>表示一行。

<td>表示一个单元格。

<th>用来表示行或列表头的单元格。

<caption>元素提供表格的额外信息（至关于表格的标题）。默认的，表头在表格的上方。table的CSS属性caption-side指定caption的位置，下面的代码将caption移动的表格下部：

table {
	caption-side:	bottom;
}

对于表格的每一个单元格，有内边距和边框，可是没有外边距。相对的table有一个border-spacing的CSS属性定义整个表格每一个单元格共同的外边距。

也能够定义垂直和水平方向上的外边距，例如：

border-spacing: 10px 30px;

将border-collapse的CSS属性设置为collapse，能够使单元格之间没有边框间距。浏览器会忽略表格上设置的全部边框间距。另外还会把两个边框合并成一个边框。

 

为表格设置间隔颜色的两种实现方法：

（1）定义一个类，为其设置背景颜色，在须要的表格行<tr>指定其归属这个类；

（2）使用伪类nth-child，表示一个元素相对于它兄弟元素的数字顺序：

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

这段代码指定奇数tr的背景颜色。能够使用n指定简单的表达式。还能够使用odd或even表示奇数或偶数元素。

 

使用td的rowspan属性能够指定一个单元格占多少行，colspan指定一个单元格占多少列。相应的要删除其占据位置的行或列。

 

二、列表

li的list-style-type的CSS属性控制项目符号，默认的值是disc，可选的有circle、square、none。

对于有序列表能够控制项目序号：decimal十进制数，upper-alpha大写字母，lower-alpha小写字母，upper-roman大写罗马数字，lower-roman小写罗马数字。

list-style-image属性将项目符号变为图像。

list-style-position属性控制文本回绕。值为inside表示文本会在标记下回绕，outside表示文本自己回绕。