- 第1节:HTML 导读
- 第2节:HTML 简介
- 第3节:HTML 基础
- 第4节:HTML 元素
- 第5节:HTML 属性
- 第6节:HTML 标题
- 第7节:HTML 段落
- 第8节:HTML 格式化
- 第9节:HTML 链接
- 第10节:HTML 引用
- 第11节:HTML 注释
- 第12节:HTML 头部
- 第13节:HTML ID
- 第14节:HTML CSS
- 第15节:HTML 符号
- 第16节:HTML 图像
- 第17节:HTML 表格
- 第18节:HTML 列表
- 第19节:HTML 区块
- 第20节:HTML 布局
- 第21节:HTML 表单
- 第22节:HTML 框架
- 第23节:HTML 颜色
- 第24节:HTML 颜色名
- 第25节:HTML 颜色值
- 第26节:HTML 脚本
- 第27节:HTML 字符实体
- 第28节:HTML URL
- 第29节:HTML 文件路径
- 第30节:HTML 表情符号
- 第31节:HTML 字符集
- 第32节:HTML 背景
- 第33节:HTML URL字符编码
- 第34节:HTML 文档类型
- 第35节:HTML 媒体(Media)
- 第36节:HTML 插件(Object和Embed)
- 第37节:HTML 音频(Audio)
- 第38节:HTML 视频(Videos)播放
- 第39节:HTML 常用标签
- 第40节:HTML 常用代码
- 第41节:HTML 滚动条样式
- 第42节:HTML版权符号写法及美化
HTML 表格
HTML 表格实例
表格由<table>
标签来定义。每个表格均有若干行(由<tr>
标签定义),每行被分割为若干单元格(由<td>
标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
HTML 表格的基本结构:
<table>…</table>
:定义表格
<th>…</th>
:定义表格的标题栏(文字加粗)
<tr>…</tr>
:定义表格的行
<td>…</td>
:定义表格的列
表格实例
实例
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
在浏览器显示如下:
row 1, cell 1 | row 1, cell 2 |
row 2, cell 1 | row 2, cell 2 |
HTML 表格和边框属性
如果不定义边框属性,表格将不显示边框。有时这很有用,但是大多数时候,我们希望显示边框。
使用边框属性border
来显示一个带有边框的表格:
实例
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
HTML 表格表头单元格
表格的表头单元格使用<th>
标签进行定义。
表格的表头单元格属性主要是一些公共属性,如:align
、dir
、width
、height
。
大多数浏览器会把表头显示为粗体居中的文本:
实例
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
在浏览器显示如下:
Header 1 | Header 2 |
---|---|
row 1, cell 1 | row 1, cell 2 |
row 2, cell 1 | row 2, cell 2 |
表格标题 <caption>
在<table>
标签中我们可以使用<caption> ... </ caption>
标签作为标题,并在表的顶部显示出来。
注:此标签在较新版本的HTML / XHTML中已弃用
实例
<table border = "1">
<caption>这是标题</caption>
<tr>
<td>row 1, column 1</td><td>row 1, columnn 2</td>
</tr>
<tr>
<td>row 2, column 1</td><td>row 2, columnn 2</td>
</tr>
</table>
HTML 表格高度和宽度
在<table>
标签中您可以使用width
(宽)和height
(高)属性设置表格宽度和高度。您可以按像素或可用屏幕区域的百分比来指定表格宽度或高度。
实例
<table border = "1" width = "400" height = "150">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
HTML 表格背景
您可以使用以下方法之一设置 HTML 表格的背景
bgcolor
属性 - 可以为整个表格或仅为一个单元格设置背景颜色。background
属性 - 可以为整个表设置背景图像或仅为一个单元设置背景图像。bordercolor
属性 - 可以设置边框颜色。
注:HTML5 中不推荐使用bgcolor
,background
和bordercolor
属性。不要使用这些属性。
实例
<body>
<table border = "1" bordercolor = "green" bgcolor = "yellow">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</table>
</body>
使用background
属性需要提供图像 URL 地址:
实例
<table border = "1" bordercolor = "green" background = "/images/test.png">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</table>
HTML 表格空间
有以下两个属性,用于调整 HTML 表格中单元格的空间:
cellspacing
属性-定义表格单元格之间的空间cellpadding
属性-表示单元格边框与单元格内容之间的距离
实例
<table border = "1" cellpadding = "5" cellspacing = "5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>其琛</td>
<td>5000</td>
</tr>
<tr>
<td>曼迪</td>
<td>7000</td>
</tr>
</table>
HTML 合并单元格
- 如果要将两个或多个列合并为一个列,将使用
colspan
属性 - 如果要合并两行或更多行,则将使用
rowspan
属性。
实例
<table border = "1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
效果如下:
HTML 表格头部、主体、页脚
表格可以分为三个部分 - 头部,主体和页脚,如同word 文档中页面的页眉、正文、页脚。每个页面保持相同,而正文是表格的主要内容持有者。
头部,主体和页脚的对应的三个标签是:
<thead>
- 创建单独的表头。<tbody>
- 表示表格的主体。<tfoot>
- 创建一个单独的表页脚。
表可以包含多个<tbody>
元素以指示不同的页面。
但值得注意的是<thead>
和<tfoot>
标签应出现在<tbody>
之前:
实例
<table border = "1" width = "100%">
<thead>
<tr>
<td colspan = "4">This is the head of the table</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan = "4">This is the foot of the table</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
HTML 表格的嵌套
您可以在另一个表中使用一个表。可以使用<table>
内的几乎所有标签。
实例
<table border = "1" width = "100%">
<tr>
<td>
<table border = "1" width = "100%">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>其琛</td>
<td>5000</td>
</tr>
<tr>
<td>曼迪</td>
<td>7000</td>
</tr>
</table>
</td>
</tr>
</table>
更多实例
没有边框的表格
本例演示一个没有边框的表格。
表格中的表头 ( Heading )
本例演示如何显示表格表头。
带有标题的表格
本例演示一个带标题 ( caption ) 的表格
跨行或跨列的表格单元格
本例演示如何定义跨行或跨列的表格单元格。
表格内的标签
本例演示如何显示在不同的元素内显示元素。
单元格边距 ( Cell padding )
本例演示如何使用 Cell padding 来创建单元格内容与其边框之间的空白。
单元格间距 ( Cell spacing )
本例演示如何使用 Cell spacing 增加单元格之间的距离。
HTML 表格标签