表格、表单中的属性及作用详细讲解

最新推荐文章于 2024-04-15 05:20:47 发布

怪咖i！

最新推荐文章于 2024-04-15 05:20:47 发布

阅读量3.2k

点赞数 4

分类专栏：表格表单样式文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_52231266/article/details/111202803

版权

样式同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

表格

1 篇文章 0 订阅

订阅专栏

表单

1 篇文章 0 订阅

订阅专栏

先从表格开始说吧：

表格（table）：

表格标签： table(它是块元素 )
表格中包括行和列，在HTML中表格中只能是行中包括列。建议在使用表格之前先吧列跟行都先算清楚再开始写想要的内容。
其中的属性有很多：

样式名	描述
border	设置表格的外边框线的大小（单位：像素）
rules	规定单元格的边框可见部分
cellspacing	设置单元格之间的间距
cellpaddingg	设置单元格的边缘线与内容之间的间距
tr	行
td	列
th	列（表头）修饰的会加粗
rowspan	合并行
colspan	合并列

需要注意的是：当规定了表头，表头设置跨行的操作时只能在表头中生效，否则不生效。

演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格</title>
	</head>
	<body>
		<!-- 
			表格：table在表格中只能是行中包含列
			属性：
				border：设置表格的边框线大小
				rules：规定单元格的边框可见部分
				cellspacing：设置单元格之间的间距
				cellpadding: 设置单元格的边缘线与内容之间的间距
				行：tr
				列：td
				列（表头）： th
		 -->
		 <table border="1px"   cellspacing="0px"  rules="all"  cellpadding="10px">
		 	<tr>
		 		<th rowspan="2">员工编号</th>
				<th>员工姓名</th>
				<th>员工性别</th>
				<th>联系方式</th>
		 		
		 	</tr>
		 
		 	<tr>
		 		<td>1</td>
		 		<td>JieKe</td>
		 		<td>man</td>
		 		<td>1368596756</td>
		 	</tr>
		 </table>
		 <!-- 这里代表一个两行三列的表格 -->
	</body>
</html>

界面效果：
有表头：
在这里插入图片描述
无表头：
会使整个页面变形，导致需要重新去修改。

表格的基本操作看完我们再来看一下表单
，表单是非常重要的一个知识点。

表单（form）：

作用：表单是让用户输入信息的，将输入的数据提交到服务器上，服务器再根据提交的数据进行分析验证反馈结果，通俗点来讲就是（表单通常用于让用户能够进行输入操作使用的）。
其中的样式有：

样式名	描述
action	指定服务器地址
method	指定表单数据的提交方式

<form action="#" method="">

表单的提交方式

其中提交方式有两种：

get：默认的提交方式，get方式提交的数据会在地址栏中显示出来，很不安全，所能提交的数据量比较小，效率高。
post：效率低，安全，携带大量的数据，不会在地址栏中显示。
在开发的过程中post方式使用的较多，应为安全。
注意：表单中的数据想要提交，一定要有name属性存在。
注意：表单中的数据想要提交，一定要有name属性存在。

表单中用到的标签：

样式名
input
textarea
select

先说一下input元素：

input 元素是最重要的表单元素。
input 元素有很多形态，根据不同的 type 属性。
其中常用的有：在这里插入图片描述

<!-- 
	复选框本身就是可以进行多项选择，每个key都对应一个value，是可以重复存在的
	type= checkbox表示一个复选框
 -->
 兴趣爱好：<input type="checkbox" name="hobbies" value="playCode" checked="checked"/>敲代码
  <input type="checkbox" name="hobbies" value="playGames">打游戏
   <!-- name值要求必须要相同 单选及复选框都具有一个checked属性-默认选中
	type= radio表示一个单选框
-->
  性别：<input type="radio" name="sex" value="男" checked>男
  <input type="radio" name="sex" value="女" />女<br>
  <!-- type="file"表示上传文件-->
  文件上传：<input type="file" name="file"><br>
   <!-- 重置是将表单中输入的数据全部清空，不需要重新加载页面资源，刷新是需要重新加载资源的 -->
  <input type="reset" value="重置">

select代表下拉框，具体的内容要通过option标签来实现。

怪咖i！

关注

4
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
表格、表单中的属性及作用详细讲解

先从表格开始说吧：表格（table）：表格标签： table(它是块元素 )表格中包括行和列，在HTML中表格中只能是行中包括列。建议在使用表格之前先吧列跟行都先算清楚再开始写想要的内容。其中的属性有很多：属性名描述border设置表格的外边框线的大小（单位：像素）rules规定单元格的边框可见部分cellspacing设置单元格之间的间距cellpaddingg设置单元格的边缘线与内容之间的间距tr行td列th列（表头）修
复制链接

扫一扫