![Web前端开发技术](https://wfqqreader-1252317822.image.myqcloud.com/cover/759/42637759/b_42637759.jpg)
上QQ阅读APP看书,第一时间看更新
1.5 HTML表格
表格由<table>标签来定义。每个表格均有若干行,由<tr>标签定义,每行被分割为若干单元格。字母td指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等。
例1-13:
![](https://epubservercos.yuewen.com/6DD77C/22139294709122706/epubprivate/OEBPS/Images/978-7-111-61820-1_17_02.jpg?sign=1738881481-tZmx4nXLiHJ1dRdCrH6Ehdfip2ub3xVb-0-2e0350cf0d7240db9b39d5ace7564910)
在浏览器中显示如下:
![](https://epubservercos.yuewen.com/6DD77C/22139294709122706/epubprivate/OEBPS/Images/978-7-111-61820-1_17_03.jpg?sign=1738881481-5pEfc8rdawIZCzPGNPhSUJfPQ5paFQC7-0-ac870a61bce3ab0023eb3cb658bbbe8b)
1.5.1 表格和边框属性
如果不定义边框属性,表格将不显示边框,但是大多数时候还是希望显示边框的。以下代码使用边框属性来显示一个带有边框的表格:
![](https://epubservercos.yuewen.com/6DD77C/22139294709122706/epubprivate/OEBPS/Images/978-7-111-61820-1_17_04.jpg?sign=1738881481-DUkHm9vfa6iZIivQSeqJYuBpJek1vWCo-0-1e019295631508e01599b90168796b36)
1.5.2 表格的表头
使用<th>标签定义表头。大多数浏览器会把表头显示为粗体居中的文本。
例1-14:
![](https://epubservercos.yuewen.com/6DD77C/22139294709122706/epubprivate/OEBPS/Images/978-7-111-61820-1_17_05.jpg?sign=1738881481-VZgVDGephmWOhTMUDDhPZu13IA3BJ4XI-0-9dea57a57578fef6189a432567cf7eab)
![](https://epubservercos.yuewen.com/6DD77C/22139294709122706/epubprivate/OEBPS/Images/978-7-111-61820-1_18_01.jpg?sign=1738881481-6fXxSHYG9x5kZqwFdWa6ymZFQzmkxXb9-0-2b14972dc05d0006c7b74e5992409eed)
在浏览器中显示如下:
![](https://epubservercos.yuewen.com/6DD77C/22139294709122706/epubprivate/OEBPS/Images/978-7-111-61820-1_18_02.jpg?sign=1738881481-7SAdr7B0On9dhtUcSd1tzaKldMCXX2YE-0-dd05ee70fb502755ba1f3742b40cf6a2)
1.5.3 跨行或跨列的表格单元格
colspan和rowspan这两个属性用于创建特殊的表格。colspan是“column span(跨列)”的缩写,它用在td标签中,用来指定单元格横向跨越的列数。rowspan属性也用在td标签中,指定单元格纵向跨越的行数。
例1-15:
![](https://epubservercos.yuewen.com/6DD77C/22139294709122706/epubprivate/OEBPS/Images/978-7-111-61820-1_18_03.jpg?sign=1738881481-uiKojyRc5F19ljnbltLykH2X5AZzHrlB-0-40c8184884c1b8c64ca9018ca61d42d4)
![](https://epubservercos.yuewen.com/6DD77C/22139294709122706/epubprivate/OEBPS/Images/978-7-111-61820-1_19_01.jpg?sign=1738881481-Ccb836Rk5Hw7cXwxQ4pCM9AX6D0hmNio-0-ea0f8a7d92ab41e363f8a774ae49869a)