表头单元格
实例
普通的 超文本 表格，包含两行两列：
<网页>
<主体>
<表格 边框=“1“>
<表格行>
<表头单元格>公司</表头单元格>
<表头单元格>地址</表头单元格>
</表格行>
<表格行>
<表格单元格>某某公司</表格单元格>
<表格单元格>中国，湖南省，长沙市。。。。。。</表格单元格>
</表格行>
</表格>
</主体>
</网页>
定义和用法
定义表格内的表头单元格。
超文本 表单中有两种类型的单元格：
- 表头单元格 - 包含表头信息（由 表头单元格 元素创建）
- 标准单元格 - 包含数据（由 表格单元格 元素创建）
表头单元格 元素内部的文本通常会呈现为居中的粗体文本，而 表格单元格 元素内的文本通常是左对齐的普通文本。
浏览器支持
| 元素 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| <表头单元格> | 是 | 是 | 是 | 是 | 是 |
所有浏览器都支持 <表头单元格> 标签。
提示和注释
提示：如果需要将内容横跨多个行或列，请使用 列跨度 和 行跨度 属性。
HTML 与 XHTML 之间的差异
在 HTML 4.01 中，表头单元格 元素的 "背景颜色"、"高度"、"宽度" 以及 "不包裹" 属性是不被推荐使用的。
在 XHTML 1.0 Strict DTD 中，表头单元格 元素的 "背景颜色"、"高度"、"宽度" 以及 "不包裹" 属性是不被支持。
可选的属性
| 属性 | 值 | 描述 |
|---|---|---|
| 缩写 | 文本 | 规定单元格中内容的缩写版本。 |
| 水平对齐 |
左边 右边 中心 行伸展 指定字符 |
规定单元格内容的水平对齐方式。 |
| 单格类 | 类别名字 | 对单元格进行分类。 |
| 背景色 |
红绿蓝(x,x,x) #xxxxxx 颜色名字 |
不推荐使用。请使用样式替代它。 规定表格单元格的背景颜色。 |
| 指定字符 | 字符 | 规定根据哪个字符来进行内容的对齐。 |
| 指定字符偏移量 | 数字 | 规定对齐字符的偏移量。 |
| 列跨度 | 数字 | 设置单元格可横跨的列数。 |
| 头关联 | 参考标识 | 由空格分隔的表头单元格 标识 列表，为数据单元格提供表头信息。 |
| 高度 |
像素 % |
不推荐使用。请使用样式替代它。 规定表格单元格的高度。 |
| 不包裹 | 不包裹 |
不推荐使用。请使用样式取而代之。 规定单元格中的内容是否折行。 |
| 行跨度 | 数字 | 规定单元格可横跨的行数。 |
| 定头 |
列 列组 行 行组 |
定义将表头数据与单元数据相关联的方法。 |
| 垂直对齐 |
顶端 中间 底端 基线 |
规定单元格内容的垂直排列方式。 |
| 宽度 |
像素 % |
不推荐使用。请使用样式取而代之。 规定表格单元格的宽度。 |
全局属性
<表头单元格> 标签支持 超文本 中的全局属性。
事件属性
<表头单元格> 标签支持 超文本 中的事件属性。
实例
- 表格
- 这个例子演示如何在 超文本 文档中创建表格。
-
<网页>
<主体>
<段落>每个表格由 表格 标签开始。</段落>
<段落>每个表格行由 表格行 标签开始。</段落>
<段落>每个表格数据由 表格单元格 标签开始。</段落>
<标题4>一列：</标题4>
<表格 边框=“1“>
<表格行>
<表格单元格>100</表格单元格>
</表格行>
</表格>
<标题4>一行三列：</标题4>
<表格 边框=“1“>
<表格行>
<表格单元格>100</表格单元格>
<表格单元格>200</表格单元格>
<表格单元格>300</表格单元格>
</表格行>
</表格>
<标题4>两行三列：</标题4>
<表格 边框=“1“>
<表格行>
<表格单元格>100</表格单元格>
<表格单元格>200</表格单元格>
<表格单元格>300</表格单元格>
</表格行>
<表格行>
<表格单元格>400</表格单元格>
<表格单元格>500</表格单元格>
<表格单元格>600</表格单元格>
</表格行>
</表格>
</主体>
</网页> - 表格边框
- 本例演示各种类型的表格边框。
-
<网页>
<主体>
<标题4>带有普通的边框：</标题4>
<表格 边框=“1“>
<表格行>
<表格单元格>第一</表格单元格>
<表格单元格>行</表格单元格>
</表格行>
<表格行>
<表格单元格>第二</表格单元格>
<表格单元格>行</表格单元格>
</表格行>
</表格>
<标题4>带有粗的边框：</标题4>
<表格 边框=“8“>
<表格行>
<表格单元格>第一</表格单元格>
<表格单元格>行</表格单元格>
</表格行>
<表格行>
<表格单元格>第二</表格单元格>
<表格单元格>行</表格单元格>
</表格行>
</表格>
<标题4>带有很粗的边框：</标题4>
<表格 边框=“15“>
<表格行>
<表格单元格>第一</表格单元格>
<表格单元格>行</表格单元格>
</表格行>
<表格行>
<表格单元格>第二</表格单元格>
<表格单元格>行</表格单元格>
</表格行>
</表格>
</主体>
</网页> - 没有边框的表格
- 本例演示一个没有边框的表格。
-
<网页>
<主体>
<标题4>这个表格没有边框：</标题4>
<表格>
<表格行>
<表格单元格>100</表格单元格>
<表格单元格>200</表格单元格>
<表格单元格>300</表格单元格>
</表格行>
<表格行>
<表格单元格>400</表格单元格>
<表格单元格>500</表格单元格>
<表格单元格>600</表格单元格>
</表格行>
</表格>
<标题4>这个表格也没有边框：</标题4>
<表格 边框=“0“>
<表格行>
<表格单元格>100</表格单元格>
<表格单元格>200</表格单元格>
<表格单元格>300</表格单元格>
</表格行>
<表格行>
<表格单元格>400</表格单元格>
<表格单元格>500</表格单元格>
<表格单元格>600</表格单元格>
</表格行>
</表格>
</主体>
</网页> - 表格中的标题(表头)
- 本例演示如何显示表格标题。
-
<网页>
<主体>
<标题4>表头：</标题4>
<表格 边框=“1“>
<表格行>
<表头单元格>姓名</表头单元格>
<表头单元格>电话</表头单元格>
<表头单元格>电话</表头单元格>
</表格行>
<表格行>
<表格单元格>张三</表格单元格>
<表格单元格>555 77 854</表格单元格>
<表格单元格>555 77 855</表格单元格>
</表格行>
</表格>
<标题4>垂直的表头：</标题4>
<表格 边框=“1“>
<表格行>
<表头单元格>姓名</表头单元格>
<表格单元格>张三</表格单元格>
</表格行>
<表格行>
<表头单元格>电话</表头单元格>
<表格单元格>555 77 854</表格单元格>
</表格行>
<表格行>
<表头单元格>电话</表头单元格>
<表格单元格>555 77 855</表格单元格>
</表格行>
</表格>
</主体>
</网页> - 空单元格
- 本例展示如何使用" "处理没有内容的单元格。
-
<网页>
<主体>
<表格 边框=“1“>
<表格行>
<表格单元格>一些文本</表格单元格>
<表格单元格>一些文本</表格单元格>
</表格行>
<表格行>
<表格单元格></表格单元格>
<表格单元格>一些文本</表格单元格>
</表格行>
</表格>
<段落>正如您看到的，其中一个单元没有边框。这是因为它是空的。在该单元中插入一个空格后，仍然没有边框。</段落>
<段落>我们的技巧是在单元中插入一个 不间断 空格。</段落>
<段落>不间断 空格是一个字符实体。如果您不清楚什么是字符实体，请阅读关于字符实体的章节。</段落>
<段落>不间断 空格由和号开始 (“&“)，然后是字符“nbsp“，并以分号结尾(“;“)。</段落>
</主体>
</网页> - 带有标题的表格
- 本例演示一个带标题的表格
-
<网页>
<主体>
<标题4>这个表格有一个标题，以及粗边框：</标题4>
<表格 边框=“6“>
<标题>我的标题</标题>
<表格行>
<表格单元格>100</表格单元格>
<表格单元格>200</表格单元格>
<表格单元格>300</表格单元格>
</表格行>
<表格行>
<表格单元格>400</表格单元格>
<表格单元格>500</表格单元格>
<表格单元格>600</表格单元格>
</表格行>
</表格>
</主体>
</网页> - 跨行或跨列的表格单元格
- 本例演示如何定义跨行或跨列的表格单元格。
-
<网页>
<主体>
<标题4>横跨两列的单元格：</标题4>
<表格 边框=“1“>
<表格行>
<表头单元格>姓名</表头单元格>
<表头单元格 列跨度=“2“>电话</表头单元格>
</表格行>
<表格行>
<表格单元格>李四</表格单元格>
<表格单元格>555 77 854</表格单元格>
<表格单元格>555 77 855</表格单元格>
</表格行>
</表格>
<标题4>横跨两行的单元格：</标题4>
<表格 边框=“1“>
<表格行>
<表头单元格>姓名</表头单元格>
<表格单元格>李四</表格单元格>
</表格行>
<表格行>
<表头单元格 行跨度=“2“>电话</表头单元格>
<表格单元格>555 77 854</表格单元格>
</表格行>
<表格行>
<表格单元格>555 77 855</表格单元格>
</表格行>
</表格>
</主体>
</网页> - 表格内的标签
- 本例演示如何显示在不同的元素内显示元素。
-
<网页>
<主体>
<表格 边框=“1“>
<表格行>
<表格单元格>
<段落>这是一个段落。</段落>
<段落>这是另一个段落。</段落>
</表格单元格>
<表格单元格>这个单元包含一个表格：
<表格 边框=“1“>
<表格行>
<表格单元格>a</表格单元格>
<表格单元格>b</表格单元格>
</表格行>
<表格行>
<表格单元格>c</表格单元格>
<表格单元格>d</表格单元格>
</表格行>
</表格>
</表格单元格>
</表格行>
<表格行>
<表格单元格>这个单元包含一个列表：
<无序列表>
<列表项目标记>苹果</列表项目标记>
<列表项目标记>香蕉</列表项目标记>
<列表项目标记>菠萝</列表项目标记>
</无序列表>
</表格单元格>
<表格单元格>你好！</表格单元格>
</表格行>
</表格>
</主体>
</网页> - 单元格填充
- 本例演示如何使用单元格填充来创建单元格内容与其边框之间的空白。
-
<网页>
<主体>
<标题4>没有 单元格填充：</标题4>
<表格 边框=“1“>
<表格行>
<表格单元格>第一</表格单元格>
<表格单元格>行</表格单元格>
</表格行>
<表格行>
<表格单元格>第二</表格单元格>
<表格单元格>行 </表格单元格>
</表格行>
</表格>
<标题4>带有 单元格填充：</标题4>
<表格 边框=“1“
单元格填充=“10“>
<表格行>
<表格单元格>第一</表格单元格>
<表格单元格>行</表格单元格>
</表格行>
<表格行>
<表格单元格>第二</表格单元格>
<表格单元格>行</表格单元格>
</表格行>
</表格>
</主体>
</网页> - 单元格间距
- 本例演示如何使用单元格间距增加单元格之间的距离。
- <网页>
- <主体>
- <标题4>没有 单元格间距：</标题4>
- <表格 边框=“1“>
- <表格行>
- <表格单元格>第一</表格单元格>
- <表格单元格>排</表格单元格>
- </表格行>
- <表格行>
- <表格单元格>第二</表格单元格>
- <表格单元格>排</表格单元格>
- </表格行>
- </表格>
- <标题4>带有 单元格间距：</标题4>
- <表格 边框=“1“
- 单元格间距=“10“>
- <表格行>
- <表格单元格>第一</表格单元格>
- <表格单元格>排</表格单元格>
- </表格行>
- <表格行>
- <表格单元格>第二</表格单元格>
- <表格单元格>排</表格单元格>
- </表格行>
- </表格>
- </主体>
- </网页>
- 向表格添加背景颜色或背景图像
- 本例演示如何向表格添加背景
- <网页>
- <主体>
- <标题4>背景颜色：</标题4>
- <表格 边框=“1“
- 背景颜色=“红色“>
- <表格行>
- <表格单元格>第一</表格单元格>
- <表格单元格>行</表格单元格>
- </表格行>
- <表格行>
- <表格单元格>第二</表格单元格>
- <表格单元格>行</表格单元格>
- </表格行>
- </表格>
- <标题4>背景图像：</标题4>
- <表格 边框=“1“
- 背景=“https://www.w3school.com.cn/i/eg_bg_07.gif“>
- <表格行>
- <表格单元格>第一</表格单元格>
- <表格单元格>行</表格单元格>
- </表格行>
- <表格行>
- <表格单元格>第二</表格单元格>
- <表格单元格>行</表格单元格>
- </表格行>
- </表格>
- </主体>
- </网页>
- 向表格单元添加背景颜色或者背景图像
- 本例演示如何向一个或者更多表格单元添加背景
- <网页>
- <主体>
- <标题4>单元背景：</标题4>
- <表格 边框=“1“>
- <表格行>
- <表格单元格 背景颜色=“红色“>第一</表格单元格>
- <表格单元格>行</表格单元格>
- </表格行>
- <表格行>
- <表格单元格
- 背景=“https://www.w3school.com.cn/i/eg_bg_07.gif“>
- 第二</表格单元格>
- <表格单元格>行</表格单元格>
- </表格行>
- </表格>
- </主体>
- </网页>
- 在表格单元中排列内容
- 本例演示如何使用 "水平对齐" 属性排列单元格内容,以便创建一个美观的表格。
- <网页>
- <主体>
- <表格 宽度=“400“ 边框=“1“>
- <表格行>
- <表头单元格 水平对齐=“左“>消费项目....</表头单元格>
- <表头单元格 水平对齐=“右边“>一月</表头单元格>
- <表头单元格 水平对齐=“右边“>二月</表头单元格>
- </表格行>
- <表格行>
- <表格单元格 水平对齐=“左“>衣服</表格单元格>
- <表格单元格 水平对齐=“右边“>$241.10</表格单元格>
- <表格单元格 水平对齐=“右边“>$50.20</表格单元格>
- </表格行>
- <表格行>
- <表格单元格 水平对齐=“左“>化妆品</表格单元格>
- <表格单元格 水平对齐=“右边“>$30.00</表格单元格>
- <表格单元格 水平对齐=“右边“>$44.45</表格单元格>
- </表格行>
- <表格行>
- <表格单元格 水平对齐=“左“>食物</表格单元格>
- <表格单元格 水平对齐=“右边“>$730.40</表格单元格>
- <表格单元格 水平对齐=“右边“>$650.00</表格单元格>
- </表格行>
- <表格行>
- <表头单元格 水平对齐=“左“>总计</表头单元格>
- <表头单元格 水平对齐=“右边“>$1001.50</表头单元格>
- <表头单元格 水平对齐=“右边“>$744.65</表头单元格>
- </表格行>
- </表格>
- </主体>
- </网页>
- 框架 属性
- 本例演示如何使用 "框架" 属性来控制围绕表格的边框。
-
<网页>
<头部>
<兼容模式 / >
</头部>
<主体>
<段落><粗体>注释：</粗体>框架 属性无法在 internet explorer 中正确地显示。</段落>
<段落>表格框架=“盒子“:</段落>
<表格 框架=“盒子“>
<表格行>
<表头单元格>月份</表头单元格>
<表头单元格>储蓄</表头单元格>
</表格行>
<表格行>
<表格单元格>一月</表格单元格>
<表格单元格>$100</表格单元格>
</表格行>
</表格>
<段落>表格框架=“上外框“:</段落>
<表格 框架=“上外框“>
<表格行>
<表头单元格>月份</表头单元格>
<表头单元格>储蓄</表头单元格>
</表格行>
<表格行>
<表格单元格>一月</表格单元格>
<表格单元格>$100</表格单元格>
</表格行>
</表格>
<段落>表格框架=“下外框“:</段落>
<表格 框架=“下外框“>
<表格行>
<表头单元格>月份</表头单元格>
<表头单元格>储蓄</表头单元格>
</表格行>
<表格行>
<表格单元格>一月</表格单元格>
<表格单元格>$100</表格单元格>
</表格行>
</表格><段落>表格框架=“上下外框“:</段落>
<表格 框架=“上下外框“>
<表格行>
<表头单元格>月份</表头单元格>
<表头单元格>储蓄</表头单元格>
</表格行>
<表格行>
<表格单元格>一月</表格单元格>
<表格单元格>$100</表格单元格>
</表格行>
</表格>
<段落>表格框架=“左右外框“:</段落>
<表格 框架=“左右外框“>
<表格行>
<表头单元格>月份</表头单元格>
<表头单元格>储蓄</表头单元格>
</表格行>
<表格行>
<表格单元格>一月</表格单元格>
<表格单元格>$100</表格单元格>
</表格行>
</表格>
</主体>
</网页>
浙公网安备 33010602011771号