表格行

实例

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

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

定义和用法

<表格行> 标签定义超文本表格中的行。

表格行元素包含一个或多个表头单元格或表格单元格元素。

浏览器支持

元素	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</表格单元格>
</表格行>
</表格>
<段落>表格框架=“above“:</段落>
<表格框架=“上外框“>
<表格行>
<表头单元格>月份</表头单元格>
<表头单元格>储蓄</表头单元格>
</表格行>
<表格行>
<表格单元格>一月</表格单元格>
<表格单元格>$100</表格单元格>
</表格行>
</表格>
<段落>表格框架=“下外框“:</段落>
<表格框架=“下外框“>
<表格行>
<表头单元格>月份</表头单元格>
<表头单元格>储蓄</表头单元格>
</表格行>
<表格行>
<表格单元格>一月</表格单元格>
<表格单元格>$100</表格单元格>
</表格行>
</表格>
<段落>表格框架=“上下外框“:</段落>
<表格框架=“上下外框“>
<表格行>
<表头单元格>月份</表头单元格>
<表头单元格>储蓄</表头单元格>
</表格行>
<表格行>
<表格单元格>一月</表格单元格>
<表格单元格>$100</表格单元格>
</表格行>
</表格>
<段落>表格框架=“左右外框“:</段落>
<表格框架=“左右外框“>
<表格行>
<表头单元格>月份</表头单元格>
<表头单元格>储蓄</表头单元格>
</表格行>
<表格行>
<表格单元格>一月</表格单元格>
<表格单元格>$100</表格单元格>
</表格行>
</表格>
</主体>
</网页>

posted on 2022-02-19 16:35 立少阅读(108) 评论(0) 收藏举报

刷新页面返回顶部

表格行

实例