表格的属性、表格的合并及表单_tr上下合并-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_67316947/article/details/123134661

本文详细介绍了HTML中的表格属性，如border、cellspacing、cellpadding、bordercolor和align等，以及如何通过colspan和rowspan实现单元格的合并。此外，还讲解了表单的基本概念，包括表单的组成部分、表单标签<form>及其属性action和method，以及input标签的各种类型，如text、radio、checkbox等，并展示了相应的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表格

table的属性

border 边框若border="1",有边框；
cellspacing 单元格与单元格之间的距离若cellspacing="0",单元格与单元格无距离，即单元框之间无缝隙；
cellspacing 内容与单元格四周的距离
bordercolor 边框颜色
bgcolor 背景颜色
align 水平对齐方式 align="left",左对齐； align="center",居中对齐； align="right",右对齐；
valign 垂直对齐方式 valign="top",上对齐； valign="bottom",下对齐; valign="middle", 居中对齐； valign="baseline", 与基线对齐
rules 规定哪个部分可见 rules="none",无边框；rows,位于行之间的线条可见；cols,位于列之间的线条可见； all,位于行和列之间的线条可见

表格的合并

1、左右合并单元格，即合并列，使用colspan；

2、上下合并单元格，即合并行，使用cowspan;

表单

什么是表单？

采集用户输入的数据，把数据提交给服务器

表单有什么组成？

表单是由表单标签、表单域以及表单按钮组成。

表单标签包含处理表单数据所用程序的URL以及数据提交到服务器的方法。
表单域包含了文本框、密码框、隐藏域、多行文本框、复选框等。
表单按钮包括提交按钮、复位按钮和一般按钮；

表单标签＜form＞＜/form＞

action表示行为、动作，以及数据提交的路径

mothod表示方法、方式以及数据提交的方式

表单域对象 表单域包含了文本框、多行文本框、密码框等，用于采集用户输入或选择的数据

input 标签

该标签可以在表单中定义单行文本框、单选按钮、复选框等表单元素。其基本语法如下：

<input name=" " type=" " />

input 标签常用的属性如下所示：

其中type属性的各常用类型如下图所示：

示例代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="0" cellspacing="0">
			<tr>
				<td><img src="images/baidu.png" alt="百度" width="50"></td>
				<td><small>用户名密码登录</small><br></td>
			</tr>
		</table>
		
		
		<form action="">
			<input type="text" name="username" placeholder="手机/邮箱/用户名"><br>
			<input type="password" name="userpassword" placeholder="密码">
			<br><br>
			<input type="submit" value="登录" style="width:10.625rem;color:white;background-color: blue;">
			</form>
			<a href="#"><small>忘记密码?</small></a>
			<br><br>
			<a href="#">扫码登录</a>&emsp;| <a href="#"><img src="images/qq.jpg" alt="qq" width="10"></a>
			<a href="#"><img src="images/wechat.jpg" alt="weixin" width="10"></a>&emsp;<a href="#">立即注册</a>
	</body>
</html>

运行结果如下：

输入类型：radio

<input type="radio">定义单选按钮

name属性确保只能同时选中一个。若不设置name或者name不相同，那么起不到单选的作用。

单选按钮允许用户在有限数量的选项中任选其中之一：

<form>
		  <input type="radio" name="ball" value="football" checked>足球   <!-- checked属性用于定义一开始选中哪个按钮 -->
		  <br />
		  <input type="radio" name="ball" value="basketball">篮球
		</form>

运行结果：

输入类型：checkbox

复选框允许从一个选项列表中选择多个选项。在input标记中设置type属性值为checkbox。在定义选项时，要注意如果name值一样的话，用户所有选项会组合为一个数据进行提交。

<form>
					选择球类<br /><br />
					<input type="checkbox" name="checkball" value="football" />足球<br />
					<input type="checkbox" name=" checkball " value="basketball" />篮球<br />
					<input type="checkbox" name=" checkball " value="pingpang" />乒乓球<br />
					<input type="checkbox" name=" checkball " value="volleyball" />排球<br />
				</form>

运行结果如下：