表单元素详细信息和练习

提到表格的时候首先想到的是excel这个软件，实际上在对表格的操作上，html和excel非常相似。(阿尔伯特爱因斯坦，Northern Excel，Northern EXCEL，Northern EXCEL)

在数据显示、统计方面，表单比文字说明有更具代表性的优点，网页上经常使用数据显示、日常日程安排等。如图所示：

让我们看一下如何在今天的页面上添加表单元素。

首先，我将介绍表元素的基本标签。

第1号：表/表

此标签是书写表中的第一个标签，在页面上不显示任何内容，但其属性控制表显示的全局样式。此标签的开始标签将写入表格元素的开头，结束标签将写入表格元素的结尾。

第2号：caption/caption

这是表的标题标记。

NO.3:tr/tr/tr

此标记定义表中的行标签。

NO.4:th/th/th

此标签是列表标题标签(例如，男人、女人、名字等)。

第5号：td/td/TD

此标记定义表中的行标签。

好的，这些默认标记可以创建基本表元素。示例代码如下：

桌子！-写入表格元素的开头- caption表格标题/caption！-表标题- tr标题标签th名称/th！-标题标签- th年龄/th/trtrtd一列一行/tdtd一列两行/TD/TRTT TD两列一行/tdtd两列两行/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% '表示表格宽度与平面宽度相符。效果如下：

outiaoimg.com/large/pgc-image/30131eea47264d41b599a631b2663054?from=article.detail&_iz=31825&index=5" width="640" height="73"/>

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完整学习目录

HTML序章（学习目的、对象、基本概念）——零基础自学网页制作

HTML是什么？——零基础自学网页制作

第一个HTML页面如何写？——零基础自学网页制作

HTML页面中head标签有啥用？——零基础自学网页制作

初识meta标签与SEO——零基础自学网页制作

HTML中的元素使用方法1——零基础自学网页制作

HTML中的元素使用方法2——零基础自学网页制作

HTML元素中的属性1——零基础自学网页制作

HTML元素中的属性2（路径详解）——零基础自学网页制作

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

使用HTML添加表格2（表格头部与脚部）——零基础自学网页制作

使用HTML添加表格3（间距与颜色）——零基础自学网页制作

使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作

16进制颜色表示与RGB色彩模型——零基础自学网页制作

HTML中的块级元素与内联元素——零基础自学网页制作

初识HTML中的<div>块元素——零基础自学网页制作

在HTML页面中嵌入其他页面的方法——零基础自学网页制作

封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作

HTML表单元素初识1——零基础自学网页制作

HTML表单元素初识2——零基础自学网页制作

HTML表单3（下拉列表、多行文字输入）——零基础自学网页制作

HTML表单4（form的action、method属性）——零基础自学网页制作

HTML列表制作讲解——零基础自学网页制作

为HTML页面添加视频、音频的方法——零基础自学网页制作

音视频格式转换神器与html视频元素加字幕——零基础自学网页制作

HTML中使用<a>标签实现文本内链接——零基础自学网页制作

1.《【htm怎么插入excel】使用HTML添加表1(基本元素)—— 0基础教程网页制作》援引自互联网，旨在传递更多网络信息知识，仅代表作者本人观点，与本网站无关，侵删请联系页脚下方联系方式。

2.《【htm怎么插入excel】使用HTML添加表1(基本元素)—— 0基础教程网页制作》仅供读者参考，本网站未对该内容进行证实，对其原创性、真实性、完整性、及时性不作任何保证。

3.文章转载时请保留本站内容来源地址，https://www.lu-xu.com/keji/2500467.html