您现在的位置是: 文字教程> 前端教程> HTML教程>

HTML教程第12课,HTML表格-

2019-03-21 15:00:581
HTML表格在我们日常生活中很常见,但是怎么在我们网页中输出表格呢?table标签定义 HTML表格。简单的 HTML表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。

HTML表格

HTML表格在我们日常生活中很常见,但是怎么在我们网页中输出表格呢?

table标签定义 HTML表格

简单的 HTML表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。

tr 元素定义表格行,th 元素定义表头,td 元素定义表格单元。

让我们做个最简单的表格

最简单的表格

程序运行结果:

程序运行结果

cellspacing,单元格之间的距离

cellpadding,文字和单元格边框的距离 都是以像素为单位

border  给文本加边框   将border设置成 border=0 表格将不显示边框

上面的三个属性值是可以自己设的,根据自己的要求来设置


HTML表格表头

表格的表头使用 th标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本:


实例

实例

程序运行结果:

程序运行结果

colspan和rowspan

通过给<td>标签增加colspan和rowspan两个属性,可以在横向和纵向合并单元格


实例

没合并之前

没合并之前

程序运行结果:

程序运行结果

合并之后

合并之后

合并之后

合并之后

找找规律吧

更多实例

本例演示一个没有边框的表格

没有边框的表格

程序运行结果:

程序运行结果

实例

本例演示如何显示在不同的元素内显示元素。

在不同的元素内显示元素

在不同的元素内显示元素

代码运行结果:

代码运行结果


HTML表格标签

标签描述
table定义表格
th定义表格的表头
tr定义表格的行
td定义表格单元
caption定义表格标题
colgroup定义表格列的组
col定义用于表格列的属性
thead定义表格的页眉
tfoot定义表格的页脚


本网站免费提供学习前端、HTML教程、免费SEO学习,喜欢就记得关注我们


文章评论