标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 HTML 表格的基本结构: :定义表格
… | :定义表格的标题栏(文字加粗)
… :定义表格的行
… | :定义表格的列
表格实例
实例
row 1, cell 1 | row 1, cell 2 | row 2, cell 1 | row 2, cell 2 |
尝试一下 » 在浏览器显示如下:
row 1, cell 1 | row 1, cell 2 | row 2, cell 1 | row 2, cell 2 | HTML 表格和边框属性
如果不定义边框属性,表格将不显示边框。有时这很有用,但是大多数时候,我们希望显示边框。 使用边框属性border 来显示一个带有边框的表格: 实例
Row 1, cell 1 | Row 1, cell 2 |
尝试一下 » HTML 表格表头单元格
表格的表头单元格使用标签进行定义。 表格的表头单元格属性主要是一些公共属性,如:align 、dir 、width 、height 。 大多数浏览器会把表头显示为粗体居中的文本: 实例
Header 1 | Header 2 |
---|
row 1, cell 1 | row 1, cell 2 | row 2, cell 1 | row 2, cell 2 |
尝试一下 » 在浏览器显示如下:
Header 1 |
Header 2 |
---|
row 1, cell 1 | row 1, cell 2 | row 2, cell 1 | row 2, cell 2 | 表格标题
在标签中我们可以使用 ... caption> 标签作为标题,并在表的顶部显示出来。
注:此标签在较新版本的HTML / XHTML中已弃用
实例
这是标题row 1, column 1 | row 1, columnn 2 | row 2, column 1 | row 2, columnn 2 | 尝试一下 » HTML 表格高度和宽度
在标签中您可以使用width (宽)和height (高)属性设置表格宽度和高度。您可以按像素或可用屏幕区域的百分比来指定表格宽度或高度。实例
Row 1, Column 1 | Row 1, Column 2 | Row 2, Column 1 | Row 2, Column 2 |
尝试一下 » HTML 表格背景
您可以使用以下方法之一设置 HTML 表格的背景
bgcolor 属性 - 可以为整个表格或仅为一个单元格设置背景颜色。
background 属性 - 可以为整个表设置背景图像或仅为一个单元设置背景图像。
bordercolor 属性 - 可以设置边框颜色。
注:HTML5 中不推荐使用bgcolor ,background 和bordercolor 属性。不要使用这些属性。
实例
尝试一下 » 使用background 属性需要提供图像 URL 地址: 实例
尝试一下 » HTML 表格空间
有以下两个属性,用于调整 HTML 表格中单元格的空间:
cellspacing 属性-定义表格单元格之间的空间
cellpadding 属性-表示单元格边框与单元格内容之间的距离
实例
尝试一下 »
HTML 合并单元格
- 如果要将两个或多个列合并为一个列,将使用
colspan 属性
- 如果要合并两行或更多行,则将使用
rowspan 属性。
实例
Column 1 | Column 2 | Column 3 |
---|
Row 1 Cell 1 | Row 1 Cell 2 | Row 1 Cell 3 | Row 2 Cell 2 | Row 2 Cell 3 | Row 3 Cell 1 |
尝试一下 » 效果如下:
Column 1 |
Column 2 |
Column 3 |
---|
Row 1 Cell 1 | Row 1 Cell 2 | Row 1 Cell 3 | Row 2 Cell 2 | Row 2 Cell 3 | Row 3 Cell 1 | HTML 表格头部、主体、页脚
表格可以分为三个部分 - 头部,主体和页脚,如同word 文档中页面的页眉、正文、页脚。每个页面保持相同,而正文是表格的主要内容持有者。 头部,主体和页脚的对应的三个标签是:
- 创建单独的表头。
- 表示表格的主体。
- 创建一个单独的表页脚。
表可以包含多个元素以指示不同的页面。 但值得注意的是和标签应出现在之前:实例
This is the head of the table |
This is the foot of the table | Cell 1 | Cell 2 | Cell 3 | Cell 4 |
尝试一下 »
HTML 表格的嵌套
您可以在另一个表中使用一个表。可以使用内的几乎所有标签。实例
尝试一下 » 更多实例
没有边框的表格 本例演示一个没有边框的表格。 表格中的表头 ( Heading ) 本例演示如何显示表格表头。 带有标题的表格 本例演示一个带标题 ( caption ) 的表格 跨行或跨列的表格单元格 本例演示如何定义跨行或跨列的表格单元格。 表格内的标签 本例演示如何显示在不同的元素内显示元素。 单元格边距 ( Cell padding ) 本例演示如何使用 Cell padding 来创建单元格内容与其边框之间的空白。 单元格间距 ( Cell spacing ) 本例演示如何使用 Cell spacing 增加单元格之间的距离。 HTML 表格标签
标签 |
描述 |
---|
定义表格 | | | 定义表格的表头 |
---|
| 定义表格的行 | | | 定义表格单元 | | 定义表格标题 | | 定义表格列的组 | | 定义用于表格列的属性 | 定义表格的页眉 | | | 定义表格的主体 | | 定义表格的页脚 |
名称栏目:创新互联HTML教程:HTML表格
本文路径:http://www.csdahua.cn/qtweb/news34/354484.html
网站建设、网络推广公司-快上网,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等
广告
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源:
快上网
|
|
|