![零基础HTML+CSS+JavaScript学习笔记](https://wfqqreader-1252317822.image.myqcloud.com/cover/173/36710173/b_36710173.jpg)
4.1 简单表格
表格是用于排列内容的最佳手段。在HTML网页中,很多网页都是使用表格进行排版的。简单的表格是由<table>标签、<tr>标签和<td>标签组成的。通过使用<table>表格标签,可以完成课程表、成绩单等常见表格的制作。
4.1.1 简单表格的制作
![](https://epubservercos.yuewen.com/F8A727/19471983008810206/epubprivate/OEBPS/Images/39950-00-062-01.jpg?sign=1739296722-zGEK0n1zrgbqS0omqxdvqoSvDvxR5Q7U-0-61479f749cd697b87bdba9a4c22cdd98)
表格标签是<table>…</table>,表格的其他标签只有在表格的开始标签<table>和表格的结束标签</table>间才有效。用于制作表格的主要标签如表4.1所示。
表4.1 用于制作表格的主要标签
![](https://epubservercos.yuewen.com/F8A727/19471983008810206/epubprivate/OEBPS/Images/39950-00-062-1.jpg?sign=1739296722-IgA6qYskMEOopo65YAE2v6mRyLlqqe3B-0-cbc5603c66240443140bd0f665a89da8)
<table>标签的语法格式如下:
![](https://epubservercos.yuewen.com/F8A727/19471983008810206/epubprivate/OEBPS/Images/39950-00-062-2.jpg?sign=1739296722-ks1ZYlbbkOG3bcsiJkr5eDjkSFeQF45l-0-6087144803b8470aed858f80c90744a3)
在该语法中,<table>和</table>标签分别标志着一个表格的开始和结束;<tr>和</tr>标签分别标志着表格中一行的开始和结束,在表格中包含几组<tr>…</tr>标签,就表示该表格为几行;<td>和</td>标签标志着一个单元格的开始和结束,即表示一行中包含了几列。
接下来通过一个实例,巧用<table>表格标签、<tr>行标签和<td>单元格标签,实现一个考试成绩单表格的制作。首先通过<table>表格标签,创建一个表格框架,然后通过<tr>行标签,创建表格中的一行,最后使用<td>单元格标签,输入具体的内容。具体代码如下:
![](https://epubservercos.yuewen.com/F8A727/19471983008810206/epubprivate/OEBPS/Images/39950-00-063-2.jpg?sign=1739296722-ExKB41s4pS9Wk4v6k5ZCh0on5IVQ8UIL-0-637fd67454ddd9d53ef42741f261f80a)
![](https://epubservercos.yuewen.com/F8A727/19471983008810206/epubprivate/OEBPS/Images/39950-00-064-1.jpg?sign=1739296722-R0uAH0IFGl16WndwHon1XNN0xKfJe7qV-0-4df7ca8878e9308ac0cb6d69956c1042)
本实例的运行效果如图4.1所示。
![](https://epubservercos.yuewen.com/F8A727/19471983008810206/epubprivate/OEBPS/Images/39950-00-064-2.jpg?sign=1739296722-v64MrXNDXKoGQv3aYktXqQsq1aIKHasj-0-3e2bfd329e8d03de30de41f0340d4e2f)
图4.1 考试成绩表的界面效果
学习笔记
如果开始标签与属性之间漏加空格,如把<table align="center">写成<tablealign="center">,则会导致浏览器无法识别<table>标签,从而导致网页布局错乱。例如,在下面代码的第1行处,<table align="center">就写成了<tablealign="center">。
![](https://epubservercos.yuewen.com/F8A727/19471983008810206/epubprivate/OEBPS/Images/39950-00-064-3.jpg?sign=1739296722-sARjdQyEEvA1opzxloqnHeW776q6hgUa-0-73454908e2b290d1862e787d4640734f)
运行上述代码将出现如图4.2所示的错误界面。
![](https://epubservercos.yuewen.com/F8A727/19471983008810206/epubprivate/OEBPS/Images/39950-00-065-1.jpg?sign=1739296722-tJLT3y0bnUwC6b5i7AvezmmQ7Vcamaja-0-c459c70cea65dacc2ba833b0464f5607)
图4.2 表格标签漏加空格的错误界面
4.1.2 表头的设置
![](https://epubservercos.yuewen.com/F8A727/19471983008810206/epubprivate/OEBPS/Images/39950-00-065-02.jpg?sign=1739296722-d5b8INO7alSvLzHYpbPJ8vDxRiM1l3Ri-0-703c3fe801de31bf262519b925a260c4)
表格中还有一种特殊的单元格,称为表头。表头一般位于表格第一行,用来表明该列的内容类别,用<th>和</th>标签来表示。<th>标签的使用方法与<td>标签的使用方法相同,但是<th>标签中的内容是加粗显示的,其语法格式如下:
![](https://epubservercos.yuewen.com/F8A727/19471983008810206/epubprivate/OEBPS/Images/39950-00-065-2.jpg?sign=1739296722-1NHEBkF4f3TwFp2YsDI4Q9eb7ovLwhvm-0-34163319e75c90528589073966a1843a)
学习笔记
在编写代码的过程中,结束标签不要忘记添加“/”。
下面的实例使用<table>表格标签、<caption>表格标题标签、<th>表头标签、<tr>行标签和<td>单元格标签,实现了一个简单的课程表的制作。首先通过<table>标签,创建一个表格,然后利用<caption>表格标题标签,制作表头文字“简单课程表”,最后使用<tr>行标签和<td>单元格标签,输入课程表的内容。具体代码如下:
![](https://epubservercos.yuewen.com/F8A727/19471983008810206/epubprivate/OEBPS/Images/39950-00-066-1.jpg?sign=1739296722-ixOwQrUIOdKNO4GDNgwEONjkMqDOJfAc-0-8f5f885ce78870f100e3b45309c2ff72)
![](https://epubservercos.yuewen.com/F8A727/19471983008810206/epubprivate/OEBPS/Images/39950-00-067-1.jpg?sign=1739296722-Vs4Li2TFjesuzekMYf0ZajJMHteL8U9S-0-2736b13c28caf717019a59c6762ed782)
本实例的运行效果如图4.3所示。
![](https://epubservercos.yuewen.com/F8A727/19471983008810206/epubprivate/OEBPS/Images/39950-00-067-2.jpg?sign=1739296722-32buQrpB1kaAS9FMWfZtARwJRJ4eVMnm-0-e3fdb6591107cf6e57d3518f57939618)
图4.3 简单课程表的界面效果