一. 表格标签
表格是实际开发中非常常用的标签。
1. 表格的主要作用
表格主要用于显示、展示数据,因为它可以让数据显示的非常的规整,可读性非常好。特别是后台展示数据的时候,能后熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现的很有条理。
表格不是用来布局页面的,而是用来展示数据的。
图片回家补充。
2. 表格的基本语法
<table>待补充P33 --03:09
(1)<table></table>是用于定义表格的标签。
(2)<tr></tr>标签用于定义表格中的行,必须嵌套在<table></table>标签中。
(3)<td></td>用于定义表格中的行,必须嵌套在<table></table>标签中。
(4)字母td是指表格数据(table data),即数据单元格的内容。
待补充
3. 表头单元格标签
一般表头单元格位于表格的第一行或第一列,表头单元格里面的文本内容加粗居中展示。
<th>标签标示HTML表格的表头部分(table head的缩写)。
待补充--P34 00:11
图片待补充--P34 00:11
总结:表头单元格也是单元格,常用于表格第一行,突出重要性,表头单元格里面的文字会加粗居中显示。
4. 表格属性
表格标签这部分属性实际开发不常用,后面通过CSS来设置。
目的有两个:
(1)记住这些英语单词,后面CSSS会使用。
(2)直观感受表格的外观形态。
属性名 | 属性值 | 描述 |
align | left、center、right | 规定表格相对周围元素的对齐方式。 |
border | 1或"" | 规定表格单元是否拥有边框,默认为"",表示没有边框。 |
cellpadding | 像素值 | 规定单元格边沿与其内容之间的空白,默认1像素。 |
cellspacing | 像素值 | 规定单元格之间的空白,默认2像素。 |
width | 像素值或百分比 | 规定表格的宽度 |
待补充代码和图片--P34 00:11
5. 小说排行榜案例
6. 表格结构标签
使用场景:因为表格可能很长,为了更好的表示表格的语义,可以将表格分割成表格头部和表格主题两大部分,
在表格标签中,分别用:<thead>标签 表格的头部区域、<tbody>标签 表格的主题区域。这样可以更好的分清表格结构。
(1)<thead></thead>:用于定义表格的头部。<thead>内部必须有<tr>标签,一般是位于第一行。
(2)<tbody></tbody>:用于定义表格的体,主要用于放数据本体。
(3)以上标签都是放在<table></table>标签中。
7. 合并单元格
特殊情况下,可以把多个单元格合并为一个单元格,这里学会最简单的合并单元格即可。
(1)合并单元格方式
a. 跨行合并:rowspan="合并单元格的个数"
b. 跨列合并:rcolspan="合并单元格的个数"
待补充代码和图片--P38 02:22
(2)目标单元格
a. 跨行:最上侧单元格为目标单元格,写合并代码
b. 跨列:最左侧单元格为目标单元格,写合并代码
(3)合并单元格的步骤
合并单元格三部曲:
a. 先确定跨行还是跨列合并。
b. 找到目标单元格,写上合并方式 = 合并单元格数量。比如<td colspan="2"></td>
c. 删除多余的单元格。
待补充代码和图片--P38 06:22
待补充总结图片--P39 02:03