表格与列表 - zilongxuan001/LearnFreecode GitHub Wiki
表格内放数据的每一个区域，被称为单元格。
我们将每一个数据称为单元格，有时直接称为表格数据。
来源：《Head First HTML 与 CSS》(中文第二版)P603
表格提供一种什么方法？ 表格由什么组成？ 表格的列数是什么？ 表头在表格左侧怎么弄？
表格提供了一种在HTML中制定表格数据的方法。
来源：《Head First HTML 与 CSS》(中文第二版)P607
表格由行中的数据单元格组成。列隐含地定义在行中。
来源：《Head First HTML 与 CSS》(中文第二版)P607
表格的列数是看每个<tr>中'
<td>，就是有几列。
表格中的列数就是行中数据单元格的个数
来源：《Head First HTML 与 CSS》(中文第二版)P607
将每个<tr>的第一行写为“
把表头元素放在各行中，而不是都放在第一行中。如果是
<th>元素是各行中的第一项，那么第一列就会包含所有表格表头。
来源：《Head First HTML 与 CSS》(中文第二版)P607
表格相关元素有哪些，英文全称是什么？有什么作用？
表格相关元素
-
<table></table>，表示是表格区域。
<table>表格开始整个表格，如果要一个表格，就要从<table>开始。
-
<th></th>，即table heading，说明是表头。
<th>元素包含在表格表头中的一个单元格。必须包含在一个表行中。
-
<tr></tr>，即table row，说明是表行。
每个
<tr>元素指定一个表行。所以，放在一行中的所有表格数据都要嵌套在<tr>中。
-
<td></td>，即table data，说明是单元格。
<td>元素包含表格中的一个数据单元格，它必须嵌套在一个表行中。
来源：《Head First HTML 与 CSS》(中文第二版)P604 《Head First HTML and CSS》(2nd)P604，606
表格标题用什么元素表示？形式如何？
表格标题用<caption></caption>表示，形式如下
<table>
<caption></caption>
<tr></tr>
<tr></tr>
<tr></tr>
</table>
标题默认显示在表格上方，如果要显示在下方，可以用CSS调节。
来源：《Head First HTML 与 CSS》(中文第二版)P609
表格常见的样式都有哪些？
来源：《Head First HTML 与 CSS》(中文第二版)P612
表格有外边距吗？ 边框间距使用什么属性表示？ 如何把单元格边框的双线编变成单线？ 表格间距的行距和列距如何分开调节？ 如何折叠单元格边框？
表格有内边距和边框，但没有外边距，只有边框间距。
来源：《Head First HTML 与 CSS》(中文第二版)P615
border-spacing，可以为整个表格设置边框间距。
来源：《Head First HTML 与 CSS》(中文第二版)P614
在CSS中
table{
border-spacing: 0px;
}
来源：《Head First HTML 与 CSS》(中文第二版)P615
border-spacing: 10px 30px;
则水平边框边距为10px，垂直边框边距为30px。
来源：《Head First HTML 与 CSS》(中文第二版)P615
table {
border-collapse: collapse;
}
来源：《Head First HTML 与 CSS》(中文第二版)P616
如何给表头加颜色？(P618)
如何给表格加入交替出现的颜色？(P618)
如何使用nth-child为表格增加交替颜色？（P619）
th {
background-color: white;
}
来源：《Head First HTML 与 CSS》(中文第二版)P618
-
在CSS中定义两种不同类，代表两种不同颜色。
-
在HTML文档中，插入交替插入两种不同的类。
来源：《Head First HTML 与 CSS》(中文第二版)P618
举例，在CSS中 ，设置偶数段落为红色，奇数段落为绿色。
nth-child(even){
background-color: red;
}
nth-child(odd) {
background-color: green;
}
则偶数段落为红色，奇数段落为绿色。 或者
nth-child(2n){
background-color: red;
}
nth-child(2n+1){
background-color: green;
}
来源：《Head First HTML 与 CSS》(中文第二版)P619
如何对齐表格文字？（P634）
使用text-align或者vertical-align
举例，CSS中，让文字居中，靠右
.center {
text-align: center;
}
.right {
text-align: right;
}
来源：《Head First HTML 与 CSS》(中文第二版)P634
什么是表格跨行跨列？
如何实现表格跨行？
如何实现表格跨列？
同一个<td>，可以同时跨行跨列吗?
表格跨行跨列，即合并多个单元格为一个单元格。
来源：《Head First HTML 与 CSS》(中文第二版)P622
rowspan:2;，即跨两行，上下合并单元格为跨行。
<tr>
<td rowspan="2"></td>
<td></td>
</tr>
来源：《Head First HTML 与 CSS》(中文第二版)P622
colspan: 2;，即跨2列，左右合并单元格为跨列。
跨多列时，要删除同一行中的表格数据元素。
来源：《Head First HTML 与 CSS》(中文第二版)P624
可以同时有colspan和rowspan，实现跨行跨列。
来源：《Head First HTML 与 CSS》(中文第二版)P624
什么是表格嵌套？ 如何实现表格嵌套？
表格嵌套，就是表格里嵌套表格。
<table>
<tr>
<td></td>
<td></td>
<table>
<tr>
<th></th>
<td></td>
</tr>
<tr>
<th></th>
<td></td>
</tr>
</table>
</tr>
</table>
来源：《Head First HTML 与 CSS》(中文第二版)P625
列表样式的主要属性是哪个？值有哪些？（P631） 如何定制列表样式的标记？(P632) 如何定制有序列表的样式？（P633） 如何控制列表上的文本回绕？（P633）
列表的主要样式为
list-style-type
这是默认的实心黑圆项目标记：
li {
list-style-type: disc
}
这是空心圆圈项目标记
li {
list-style-type: circle;
}
这是方块项目标记:
li {
list-style-type: square;
}
这是无标记
li {
list-style-type: none;
}
来源：《Head First HTML 与 CSS》(中文第二版)P625
可以使用
<list-style-image>，为列表设置标记图像。
li {
list-style-image: url(images/bacpack.gif);
padding-top: 5px;
margin-left: 20px;
}
注意，要为列表项增加一些外边距和和内边距，为图像标记增加空间。
这是十进制数的标记
li {
list-style-type: decimal;
}
这是大写字母的标记
li {
list-style-type: upper-alpha;
}
这是小写字母的标记
li {
list-style-type: lower-alpha;
}
这是大写罗马数字的标记
li {
list-style-type: upper-roman;
}
这是小写罗马数字的标记
li {
list-style-type: lower-roman;
}
来源：《Head First HTML 与 CSS》(中文第二版)P633
设置文本在标记下回绕，标记（项目符号）在列表项里面。
"在列表项里面"是指在列表项盒子的边框里面。
li {
list-style-position: inside;
}
设置文本本身回绕，标记（项目符号）在列表项外面。
li {
list-style-position: outside;
}
来源：《Head First HTML 与 CSS》(中文第二版)P633
20180702整理到wiki