<HeadFirst_HTML与CSS> O'REILLY_Chap.13_表格与更多列表

<HeadFirst_HTML与CSS> O’REILLY_Chap.13_表格与更多列表

本博客的FollowMeReading系列初衷是在线的读书笔记. 为方便后期查阅, 故写成博客形式, 使用关键字查询便可以快读的找到相关的内容.

FollowMeReading系列所选的书籍一般选自O’REILLY或Apress出版社, 尽量保证笔记内容的权威性.

FollowMeReading系列的博客标题格式为: <书名> 出版社章节数章节名, 方便大家在纸质版书籍中查找.

FollowMeReading系列博文中的内容大部分是原文, 非原文部分前面将有’博主’字样提醒.

感谢<HeadFirst_HTML与CSS>作者 Eric Freeman & Elisabeth Robson
感谢<HeadFirst_HTML与CSS>翻译 徐阳 丁小峰

本博客由@scott编写. 若转载此文章, 请注明出处和作者

正文

原文

BULLTE POINTS(要点):

• HTMl表格用来建立表格数据结构.

• HTML表格元素 <table> , <tr> , <th> , <td> 一起用来创建一个表格.

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

• 表格使用 <tr> 元素按行定义.

• 每行包含一个或多个数据单元格, 分别用 <td> 元素定义.

• 使用 <th> 元素表示作为行或列表头的数据单元格.

• 表格采用格状布局. 每行对应HTML中的一个<tr>......</tr> 行, 每列对应行中的<td>.....</td> 内容.

• 可以用 <caption> 元素提供关于表格的额外信息.

• 表格有边框间距, 也就是单元格之间的间距.

• 表格数据单元格还可以有内边距和边框.

• 就像能够控制元素的内边距, 边框和外边距一样, 可以用CSS控制表格单元格的内边距, 边框和边框间距.

• border-collapse 是针对表格的一个特殊的CSS属性, 允许将单元格边框合并为一个边框, 让外观更简洁.

• 可以用 text-align 和 vertical-align CSS属性改变表格单元格中数据的对齐方式.

• 可以用 background-color 属性为表格增加颜色. 可以为整个表格, 各行或者单个的数据单元格增加背景颜色.

• 使用CSS nth-child 伪类可以为表格隔行增加背景颜色.

• 如果一个数据单元格没有数据, <td> 元素中不放置任何内容. 不过, 需要使用一个 <td>......</td> 元素维持表格的对齐.

• 如果你的数据单元格需要跨多行或多列, 可以使用 <td> 元素的 rowspan 或 colspan 属性.

• 可以在表格中嵌套表格, 将 <table> 元素及其所有内容放在一个数据单元格中.

• 表格应当用于表示表格数据, 而不是建立页面布局. 另一方面, 可以使用CSS表格显示创建多栏页面布局.

• 与所有其他元素一样, 可以用CSS指定列表的样式. 有几个特定于列表的CSS属性, 如 list-style-type 和 list-style-image.

• list-style-type 允许改变列表中使用的列表标记类型.

• list-style-image 允许指定列表标记图像.