HTML 表格
-
HTML表格
每个网站或许都需要一个表格来直观的展现数据,HTML用<table>元素来表示表格,每个表行都使用<tr>标记定义。使用<th>标记定义表头。默认情况下,表格标题为粗体并居中。使用<td>标签定义表数据/单元 。城市 国家 大洲 北京 中国 亚洲 上海 中国 亚洲 巴黎 法国 欧洲 伦敦 英国 欧洲 悉尼 澳大利亚 北美洲 柏林 德国 欧洲 布宜诺斯艾利斯 阿根廷 南美洲
尝试一下<table> <tr> <th>城市</th> <th>国家</th> <th>大洲</th> </tr> <tr> <td>北京</td> <td>中国</td> <td>亚洲</td> </tr> <tr> <td>上海</td> <td>中国</td> <td>亚洲</td> </tr> <tr> <td>巴黎</td> <td>法国</td> <td>欧洲</td> </tr> <tr> <td>伦敦</td> <td>英国</td> <td>欧洲</td> </tr> <tr> <td>悉尼</td> <td>澳大利亚</td> <td>北美洲</td> </tr> <tr> <td>柏林</td> <td>德国</td> <td>欧洲</td> </tr> <tr> <td>布宜诺斯艾利斯</td> <td>阿根廷</td> <td>南美洲</td> </tr> </table>
注:该<td>元素是表的数据容器。它们可以包含各种HTML元素; 文字,图像,清单,其他表格等
-
-
HTML表格 | 折叠边框
如果希望边框折叠为一个边框,请添加CSS border-collapse 属性:
尝试一下<style type="text/css"> table, th, td { border: 1px solid black; border-collapse: collapse; } </style> <table> <tr> <th>城市</th> <th>国家</th> <th>大洲</th> </tr> <tr> <td>北京</td> <td>中国</td> <td>亚洲</td> </tr> <tr> <td>巴黎</td> <td>法国</td> <td>欧洲</td> </tr> </table>
-
HTML表格 | 添加单元格填充
单元格填充指定单元格内容与其边框之间的空间。如果未指定填充,则将显示表格单元格而不填充。要设置填充,请使用CSS padding属性:
尝试一下<style type="text/css"> th, td { padding: 15px; } </style> <table> <tr> <th>城市</th> <th>国家</th> <th>大洲</th> </tr> <tr> <td>北京</td> <td>中国</td> <td>亚洲</td> </tr> <tr> <td>巴黎</td> <td>法国</td> <td>欧洲</td> </tr> </table>
-
HTML表格 | 左对齐
默认情况下,表格标题为粗体且居中。要左对齐表格标题,请使用CSS text-align属性:
尝试一下<style type="text/css"> th { text-align: left; } </style> <table> <tr> <th>城市</th> <th>国家</th> <th>大洲</th> </tr> <tr> <td>北京</td> <td>中国</td> <td>亚洲</td> </tr> <tr> <td>巴黎</td> <td>法国</td> <td>欧洲</td> </tr> </table>
-
HTML表格 | 添加边框间距
边框间距指定单元格之间的间距。要设置表的边框间距,请使用CSS border-spacing属性:
尝试一下<style type="text/css"> table { border-spacing: 5px; } </style> <table> <tr> <th>城市</th> <th>国家</th> <th>大洲</th> </tr> <tr> <td>北京</td> <td>中国</td> <td>亚洲</td> </tr> <tr> <td>巴黎</td> <td>法国</td> <td>欧洲</td> </tr> </table>
注意:如果表格有折叠边框,border-spacing则无效。
-
-
-
-
HTML表格 | 特别风格
要为特殊表定义特殊样式,请向表中添加id 属性:
尝试一下<style type="text/css"> table#t1 { width: 100%; background-color: #f1f1c1; } table#t1 tr:nth-child(even) { background-color: #eee; } table#t01 tr:nth-child(odd) { background-color: #fff; } table#t01 th { color: white; background-color: black; } </style> <table id="t1"> <caption>世界名都</caption> <tr> <th>城市</th> <th> 国家</th> </tr> <tr> <td>上海</td> <td>中国</td> </tr> <tr> <td>北京</td> <td>中国</td> </tr> <tr> <td>巴黎</td> <td>法国</td> </tr> </table>
-
章节总结
- 使用HTML <table>元素定义表
- 使用HTML <tr>元素定义表行
- 使用HTML <td>元素定义表数据
- 使用HTML <th>元素定义表标题
- 使用HTML <caption>元素定义表格标题
- 使用CSS border属性定义边框
- 使用CSS border-collapse属性折叠单元格边框
- 使用CSS padding属性向单元格添加填充
- 使用CSS text-align属性对齐单元格文本
- 使用CSS border-spacing属性设置单元格之间的间距
- 使用colspan属性可使单元格跨越多列
- 使用rowspan属性可使单元格跨越多行
- 使用id属性唯一地定义一个表的样式