前端html+css操作表格和表单

表格：

1.常见用法：

<table>
		 <tr>
			 <td></td>
		 </tr>
	 </table>

• table用来设置表格
• tr表示行
• td表示单元格

2.其他写法（长表格）：

<table>
		<thead>
			<tr>
				<td>

				</td>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>

				</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td>
					
				</td>
			</tr>
		</tfoot>
	</table>

• thead表示表格的头部
• thead中的td可以用th来写，这样做的好处时th里面的内容会加粗和居中显示
• tboby表示表格的内容
• tfoot表示表格的尾部

3.表格的简单的属性及注意事项：

• colspan表示横向合并单元格（从左往右合并单元格，且合并的单元格要提前删除）
  • 例如：<td colspan="2">C1</td>是向右合并两个单元格
• rowspan表示纵向合并单元格（从上往下合并单元格，且合并的单元格要提前删除）
  • 例如：<td rowspan="3">C2</td>是向下合并两个单元格
• 如果用常见的用法时，浏览器会自动建一个tboby 并将所有的tr包裹在tboby
• 元素在td中·默认垂直居中显示，可通过vertical-align修改

4.表格的css样式设置：

table{
	margin: 0 auto;
	border: 1px black solid;
	border-collapse: collapse;
	border-spacing: 0px;


}
td{
	border: 1px black solid;
	vertical-align: ;
}
tr:nth-child(2n+1){
	background-color: red;
}

• border-spacing: 0px;用来设置边框距离，在使用border-collapse: collapse;后border-spacing: 0px;会失效
• border-collapse: collapse;设置边框的合并
• tr:nth-child(2n+1){ background-color: red; }设置奇数行的颜色为红色（为了方便查看）

表单：

1.常见用法：

<form action="target.html">
		<input type="text">
		<button></button>
</form>

• form用于声明表单。里面的action用来填写表单提交的数据的地址
• input添加表单项其中属性：

  • type：
    1.text：表单为文本框
    2.password：表单为密码框（在输入内容时会将输入的内容进行隐藏）
    3.email： 用于应该包含 e-mail 地址的输入域。在提交表单时，会自动验证 email 域的值。
    4.url ：用于应该包含 URL 地址的输入域。在提交表单时，会自动验证 url 域的值。
    5.number 用于应该包含数值的输入域。您还能够设定对所接受的数字的限定
    6.·radio：单选按钮（要设置相同的name，设置不同的value）
    7.checkbox：多选按钮（要设置相同的name，设置不同的value）
    8.submit：提交按钮（点击时将表单数据提交到服务器中）
    9.reset：重置按钮·（点击时重置表单的内容）
    10.botton：设置点击按钮（无任何作用）
    11.search：用于搜索域
    12.color： 用于选择颜色
    13.range： 用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。

  • name 为表单添加name(数据要提交到服务器时，必须要为元素指定一个name属性)

  • value作为表单最后提交的数据（常用在单选或多选按钮中）

  • piacehordr：描述输入域所提示的值

  • atuocomplete：用于设置自动补全（但他会提交表单的数据）

    • off关闭自动补全
    • on开启自动补全

  • readonly:将表单数据设置为只读项

  • disabled：将表单项设置为禁用

  • atuofocus：设置列表获得自动对焦

• button：设置按钮，双标签。可以在给按钮插入图片等操作
• .select：下拉列表 ，要用option标签来添加内容
  效果如下：
  代码：

<form action="target.html">
		text:<input type="text" name="username" placeholder="hit(提示)"> 
		<br><br>
		password:<input type="password" name="password">
		<br><br>
		email:<input type="email" name="email">
		<br><br>
		url:<input type="url">
		<br><br>
		numeber:<input type="number" name="numeber" min="1" max="10" step="2">
		<br><br>
		range:<input type="range" name="range" min="1" max="10" step="2">
		<br><br>
		radio: right<input type="radio" name="radio" value="1">
		error:<input type="radio" name="radio" value="2">
		<br><br>
		checkbox:<input type="checkbox" name="checkbox" value="1">
		<input type="checkbox" name="checkbox" value="2">
		<input type="checkbox" name="checkbox" value="3">
		<br><br>
		<input type="submit" name="submit" value="submit">
		<input type="reset" name="reset" value="reset">
		<input type="button" name="button" name="button">
		<br><br>
		color:<input type="color" name="color">
		<br><br>
		search:<input type="search" name="search">
		<br><br>
		<select name="select">
			<option value="i">选项1</option>
			<option value="i">选项2</option>
			<option value="i">选项3</option>
		</select>
		<br><br>
		<button type="reset">reset</button>
		<button type="submit">sumber</button>
		<button type="button">button</button>
	</form>

样式：

本文地址：https://blog.csdn.net/weixin_52387684/article/details/110942713