![Web前端学习笔记:HTML5+CSS3+JavaScript](https://wfqqreader-1252317822.image.myqcloud.com/cover/365/31304365/b_31304365.jpg)
3.3 行和列的属性
了解了用于表格的各种属性,接下来继续学习作用于行<tr>、列<td>的属性。
3.3.1 width/height:单元格宽度/高度属性
width/height属性主要用于调整表格中单元格的宽和高。
基本语法如下:
![](https://epubservercos.yuewen.com/B78585/16948916704924306/epubprivate/OEBPS/Images/978-7-111-60090-9-Part01-81.jpg?sign=1739136179-Ly7Cd52nwgnWBBcm92Vl0IpatSuk5IKL-0-974d9de801549783cf0b246e095a01ab)
执行代码,修改第一个单元格的宽度、高度为100px、50px,显示效果如图3-15所示。
![](https://epubservercos.yuewen.com/B78585/16948916704924306/epubprivate/OEBPS/Images/978-7-111-60090-9-Part01-82.jpg?sign=1739136179-jDD4MtyHpODdTsxjNE89uS4sLc3H1YPL-0-df27d60bcaaf1127eaf9d957f8e582a3)
图3-15 修改第一个单元格的宽度和高度的显示效果
注意:当表格属性与行列属性冲突时,以行列属性为准。
3.3.2 bgcolor:单元格背景色属性
bgcolor属性主要是修改单元格的背景色。
基本语法如下:
![](https://epubservercos.yuewen.com/B78585/16948916704924306/epubprivate/OEBPS/Images/978-7-111-60090-9-Part01-83.jpg?sign=1739136179-dzwDTMuwngZe8hwPFzS14Crm7LXRAN7P-0-af0c55015dbaffcf2acd60fbc99d0531)
执行代码,修改第一个单元格的背景色为蓝色,显示效果如图3-16所示。
![](https://epubservercos.yuewen.com/B78585/16948916704924306/epubprivate/OEBPS/Images/978-7-111-60090-9-Part01-84.jpg?sign=1739136179-j1gq9mYSSRQgLK55048jVoqQr9aGd1Ai-0-6f5498fb16289a5a2a7c470343d25260)
图3-16 修改第一个单元格的背景色的显示效果
3.3.3 align:单元格内容水平对齐属性
align属性控制单元格中内容的水平位置。基本语法如下:
![](https://epubservercos.yuewen.com/B78585/16948916704924306/epubprivate/OEBPS/Images/978-7-111-60090-9-Part01-85.jpg?sign=1739136179-pnrRbyKK2WWxj7IpNkQTE6jcHG7bIw9n-0-213bceda5b05a4c0bd72bf1d123f9f13)
执行代码,三个单元格中的文字分别为相对于单元格水平方向居左、居中、居右。显示效果如图3-17所示。
![](https://epubservercos.yuewen.com/B78585/16948916704924306/epubprivate/OEBPS/Images/978-7-111-60090-9-Part01-86.jpg?sign=1739136179-yiEnXxOcY4sW3tHI4PoEVG3y8nt8OtLz-0-308454f897489ceaca9c5be6b2488f7b)
图3-17 三个单元格中文字的align属性的显示效果
注意:
表格的align属性是控制表格自身在浏览器中的显示位置,而行列的align属性是控制单元格中文字在单元格中的对齐方式。
表格的align属性并不影响表格内文字的水平方式,<tr>标签的align属性可以控制一行中所有单元格的水平对其方式。
3.3.4 valign:单元格内容垂直对齐属性
valign属性控制单元格中内容的垂直位置。基本语法如下:
![](https://epubservercos.yuewen.com/B78585/16948916704924306/epubprivate/OEBPS/Images/978-7-111-60090-9-Part01-87.jpg?sign=1739136179-bwvFnsWjMqLS0t4suf1FWSWPI7xNpfNP-0-c22f01cb2737a217eb2209c5c4f65083)
执行代码,三个单元格中的文字分别为相对于单元格垂直方向居上、居中、居下。显示效果如图3-18所示。
![](https://epubservercos.yuewen.com/B78585/16948916704924306/epubprivate/OEBPS/Images/978-7-111-60090-9-Part01-88.jpg?sign=1739136179-L1C5jA2u6ccE6Ld6pHUIK93KLmOYu51E-0-bf36bc8c68c32436e9914e62bc39a345)
图3-18 三个单元格中文字的valign属性的显示效果
注意:当表格属性与行列属性冲突时,以行列属性为准(近者优先)。
3.3.5 colspan/rowspan:表格的跨行与跨列
在实际见到的表格中,很多都是组合类表格。例如图3-19所示的表格,单元格“学生成绩”属于跨三列,单元格“张三”、单元格“李四”属于跨两行。为了实现这类的表格需求,就需要掌握表格单元格合并属性,通常也叫跨行或者跨列合并属性。
![](https://epubservercos.yuewen.com/B78585/16948916704924306/epubprivate/OEBPS/Images/978-7-111-60090-9-Part01-89.jpg?sign=1739136179-i0jvOWwLpWlx1zh9pM6dFGQ4nLbxoXC6-0-d1cb352e91f9aa0e615003808d7a86a8)
图3-19 跨行跨列的表格
注意:
colspan属性表示跨列,当某个格跨N列时,其右边N-1个单元格需删除。
rowspan属性表示跨行,当某个格跨N行时,其下方N-1个单元格需删除。
图3-19的实现代码如下:
![](https://epubservercos.yuewen.com/B78585/16948916704924306/epubprivate/OEBPS/Images/978-7-111-60090-9-Part01-90.jpg?sign=1739136179-1hOISSNrtusOBryMiJQp4bhhSBWFfHyF-0-02a2943eefe41528f0bdab93129a784b)
![](https://epubservercos.yuewen.com/B78585/16948916704924306/epubprivate/OEBPS/Images/978-7-111-60090-9-Part01-91.jpg?sign=1739136179-e9GCUi3BgR9NME36HOszoBMAWIM6kIw1-0-18b195250b939e9a0d2db69c946e9d82)