chapter13: 表格与列表

zilongxuan001 commented 6 years ago

术语: 单元格

表格内放数据的每一个区域，被称为单元格。

我们将每一个数据称为单元格，有时直接称为表格数据。

来源：《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

zilongxuan001 commented 6 years ago

表格相关元素

表格相关元素有哪些，英文全称是什么？有什么作用？

表格相关元素

<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

zilongxuan001 commented 6 years ago

表格标题

表格标题用什么元素表示？形式如何？

表格标题用<caption></caption>表示，形式如下

<table>
     <caption></caption>
     <tr></tr>
     <tr></tr>
     <tr></tr>
</table>

标题默认显示在表格上方，如果要显示在下方，可以用CSS调节。

来源：《Head First HTML 与 CSS》(中文第二版)P609

zilongxuan001 commented 6 years ago

表格样式

表格常见的样式都有哪些？

来源：《Head First HTML 与 CSS》(中文第二版)P612

zilongxuan001 commented 6 years ago

表格边框间距

表格有外边距吗？边框间距使用什么属性表示？如何把单元格边框的双线编变成单线？表格间距的行距和列距如何分开调节？如何折叠单元格边框？

表格有外边距吗？

表格有内边距和边框，但没有外边距，只有边框间距。

来源：《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

zilongxuan001 commented 6 years ago

表格颜色

如何给表头加颜色？(P618) 如何给表格加入交替出现的颜色？(P618) 如何使用nth-child为表格增加交替颜色？（P619）

表头加颜色

th {
    background-color: white;
}

来源：《Head First HTML 与 CSS》(中文第二版)P618

表格交替出现的颜色

在CSS中定义两种不同类，代表两种不同颜色。
在HTML文档中，插入交替插入两种不同的类。

来源：《Head First HTML 与 CSS》(中文第二版)P618

使用`nth-child`为表格增加交替颜色

举例，在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

zilongxuan001 commented 6 years ago

表格文字对齐

如何对齐表格文字？（P634）

使用text-align或者vertical-align

举例，CSS中，让文字居中，靠右

.center {
        text-align: center;
}

.right {
        text-align: right;
}

来源：《Head First HTML 与 CSS》(中文第二版)P634

zilongxuan001 commented 6 years ago

表格跨行跨列

什么是表格跨行跨列？如何实现表格跨行？如何实现表格跨列？同一个<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

同一个`<td>`，可以同时跨行跨列吗?

可以同时有colspan和rowspan，实现跨行跨列。

来源：《Head First HTML 与 CSS》(中文第二版)P624

zilongxuan001 commented 6 years ago

表格嵌套

什么是表格嵌套？如何实现表格嵌套？

表格嵌套，就是表格里嵌套表格。

<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

zilongxuan001 commented 6 years ago

列表样式

列表样式的主要属性是哪个？值有哪些？（P631）如何定制列表样式的标记？(P632) 如何定制有序列表的样式？（P633）如何控制列表上的文本回绕？（P633）

列表样式的主要属性是哪个？值有哪些？（P631）

列表的主要样式为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

如何定制列表样式的标记？(P632)

可以使用<list-style-image>，为列表设置标记图像。

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

注意，要为列表项增加一些外边距和和内边距，为图像标记增加空间。

如何定制有序列表的样式？（P633）

这是十进制数的标记

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

如何控制列表上的文本回绕？（P633）

设置文本在标记下回绕，标记（项目符号）在列表项里面。

"在列表项里面"是指在列表项盒子的边框里面。
li {
list-style-position:  inside;
}
设置文本本身回绕，标记（项目符号）在列表项外面。
li {
list-style-position:  outside;
}

来源：《Head First HTML 与 CSS》(中文第二版)P633

zilongxuan001 / LearnFreecode