html中table表格的属性的使用

人气:489 ℃/2023-07-28 09:46:38

html中table表格的属性是怎么使用的?其实很简单,下面我们以几个典型的属性来说明一下。

操作方法

首先是colspan属性,这是合并单元格的,一般一个表格的每一行的单元格数目都是一致的,但可以使用这个属性来为任意一行合并某些单元格,下方的代码就是为第一行合并3个单元格,从而让这一行只有一个单元格的。

另一个是bgcolor属性,这是设置每一行或,每一个单元格的背景颜色的,如果要设置漂亮的表格,我们可以使用这个背景属性来让表格更有色彩。

align属性可以让我们的单元格内容进行对齐,有左对齐,居中对齐和右对齐。这个可以让文本显示更加有条理。

看下应用的效果,可以看到现在的表格显示有条有理了,灵活应用这些表格属性,可以让我们做出各式各样的表格来。

html怎么添加数据到table表格里

使用HTML添加表格1(基本元素)——零基础自学网页制作

表格元素详解与练习

提到表格,大家最先想到的就是EXCEL这款软件,实际上在对表格的操作上,html与EXCEL非常相似。

在展示数据,统计数据方面,表格比文字描述更具表达优势,在网页中,表格也经常被用来展示数据、计划日常安排等内容。如图所示:

今天我们就来学习一下如何向页面中添加表格元素。

首先来介绍一下表格元素中的基本标签。

NO.1:<table></table>

这个标签是书写表格的第一个标签,它本身在页面上看不出什么内容,但是它的属性可以控制表格显示的全局样式。这个标签的开始标签写在表格元素的开头,结尾标签写在表格元素的结尾。

NO.2:<caption></caption>

这个标签是表格的标题标签。

NO.3:<tr></tr>

这个标签定义表格的列标签

NO.4:<th></th>

这个标签是列表标题标签,例如,男生、女士、姓名等。

NO.5:<td></td>

这个标签定义表格的行标签

OK,这些基本标签就可以构建一个基础的表格元素。示例代码如下:

<table><!-- 写在表格元素的开头 --><caption>表格标题</caption><!-- 表格标题 --><tr>标题标签<th>姓名</th><!-- 标题标签 --><th>年龄</th></tr><tr><td>一列一行</td><td>一列二行</td></tr><tr><td>二列一行</td><td>二列二行</td></tr></table><!-- 写在表格元素的结尾 -->

页面效果如图所示:没有表格的外边框。

如何添加外边框呢?在<table>标签中修改border属性即可,示例代码如下:border="1"是给表格添加宽为1的边界线。

<table border = "1"><!-- border="1"是给表格添加宽为1的边界线 -->

效果如图所示:

这时,您会发现表格在页面上的尺寸非常小,可不可以按照页面尺寸来显示表格吗?当然可以,这就需要为<table>标签修改第二个属性width,示例代码如图所示:width = "100%"指的是表格宽度与平面宽度一致。

<table border = "1" width = "100%"><!-- width = "100%"指的是表格宽度与平面宽度一致 -->

效果如图所示:

ok!今天的讲解先到这里,明天我会继续为大家讲解<thead></thead>、<tfoot></tfoot>、<tbody></tbody>三个标签,以及合并单元格操作。

今天的完整代码示例如下:

<!DOCTYPE HTML> <html> <head> <title>第一个网页</title></head> <body><h1>第一个网页</h1><hr><h2>表格元素</h2><hr><table border = "1" width = "100%"> <caption>表格标题</caption><tr> <th>姓名</th><th>年龄</th></tr><tr><td>一列一行</td><td>一列二行</td></tr><tr> <td>二列一行</td><td>二列二行</td></tr></table></body> </html>

正所谓万丈高楼平地起,html技术虽然简单,但是内容相对繁琐,也是以后进一步学习网页制作的基础,希望大家动手写每一段代码,把每一步踩坚实。

喜欢的小伙伴请关注我,阅读中遇到任何问题请给我留言,如有疏漏或错误欢迎大家斧正,不胜感激!

HTML完整学习目录

推荐

首页/电脑版/网名
© 2026 NiBaKu.Com All Rights Reserved.