表格 - 立少 - 博客园

表格

实例

一个简单的超文本（HTML）表格，包含两行两列：

<网页>
<主体>
<表格边框=“1“>
<表格行>
<表头单元格>月份</表头单元格>
<表头单元格>储蓄</表头单元格>
</表格行>
<表格行>
<表格单元格>一月</表格单元格>
<表格单元格>1000</表格单元格>
</表格行>
</表格>
</主体>
</网页>

定义和用法

<表格> 标签定义超文本（HTML ）表格。

简单的超文本（HTML ）表格由表格元素以及一个或多个表格行、表头单元格或表格单元格元素组成。

表格行元素定义表格行，表头单元格元素定义表头，表格单元格元素定义表格单元。

更复杂的超文本（HTML ）表格也可能包括标题、表格列属性值、表格列样式、表头、表脚以及表格主体元素。

浏览器支持

元素	Chrome	IE	Firefox	Safari	Opera
<表格>	是	是	是	是	是

所有浏览器都支持 <表格> 标签。

可选的属性

属性	值	描述
水平对齐	左边中心右边	不赞成使用。请使用样式代替。规定表格相对周围元素的对齐方式。
背景色	红绿蓝(x,x,x) #xxxxxx 颜色名字	不赞成使用。请使用样式代替。规定表格的背景颜色。
边框	像素	规定表格边框的宽度。
单元格填充	像素 %	规定单元边沿与其内容之间的空白。
单元格间距	像素 %	规定单元格之间的空白。
框架	空白上外框下外框上下外框左外框右外框左右外框盒子边框	规定外侧边框的哪个部分是可见的。
内规则	没有组行高列宽全部	规定内侧边框的哪个部分是可见的。
细节标题	文本	规定表格的摘要。
宽度	% 像素	规定表格的宽度。

全局属性

<表格> 标签支持超文本中的全局属性。

事件属性

<表格> 标签支持超文本中的事件属性。

实例

表格: 这个例子演示如何在 HTML 文档中创建表格。; <网页>
<主体>
<段落>每个表格由表格标签开始。</段落>
<段落>每个表格行由表格行标签开始。</段落>
<段落>每个表格数据由表格单元格标签开始。</段落>
<标题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 中正确地显示，但在头部中加兼容模式标签可以正确显示</段落>
<段落>表格的框架=“盒子“:</段落>
<表格框架=“盒子“>
<表格行>
<表头单元格>月份</表头单元格>
<表头单元格>储蓄</表头单元格>
</表格行>
<表格行>
<表格单元格>january</表格单元格>
<表格单元格>$100</表格单元格>
</表格行>
</表格>
<段落>表格的框架=“上外框“:</段落>
<表格框架=“上外框“>
<表格行>
<表头单元格>月份</表头单元格>
<表头单元格>储蓄</表头单元格>
</表格行>
<表格行>
<表格单元格>一月</表格单元格>
<表格单元格>$100</表格单元格>
</表格行>
</表格>
<段落>表格的框架=“下外框“:</段落>
<表格框架=“下外框“>
<表格行>
<表头单元格>月份</表头单元格>
<表头单元格>储蓄</表头单元格>
</表格行>
<表格行>
<表格单元格>一月</表格单元格>
<表格单元格>$100</表格单元格>
</表格行>
</表格>
<段落>表格的框架=“上下外框“:</段落>
<表格框架=“上下外框“>
<表格行>
<表头单元格>月份</表头单元格>
<表头单元格>储蓄</表头单元格>
</表格行>
<表格行>
<表格单元格>一月</表格单元格>
<表格单元格>$100</表格单元格>
</表格行>
</表格>
<段落>表格的框架=“左右外框“:</段落>
<表格框架=“左右外框“>
<表格行>
<表头单元格>月份</表头单元格>
<表头单元格>储蓄</表头单元格>
</表格行>
<表格行>
<表格单元格>一月</表格单元格>
<表格单元格>$100</表格单元格>
</表格行>
</表格>
</主体>
</网页>

posted on 2022-02-01 15:30 立少阅读(148) 评论(0) 收藏举报

刷新页面返回顶部

表格

实例

定义和用法

浏览器支持

可选的属性

全局属性

事件属性

实例

导航

公告