CSS 表格和表单表格 – table 表单 – form 表格 – table 我们想象中的表格是这样的↓图片我们想要在 html 中制造出这样的表格，就需要使用 table，tr，td，caption，th 这些标签 table 标签（表格）tr 标签（行）td 标签（标准单元格）caption 标签（标题）th 标签（表头单元格）为了更深一层对表格进行语义化，HTML 引入了 thead、tbody 和 tfoot 这三个标签。

表格 – table

我们想要在 html 中制造出这样的表格，就需要使用 table，tr，td，caption，th 这些标签

table 标签（表格）
tr 标签（行）
td 标签（标准单元格）
caption 标签（标题）
th 标签（表头单元格）

为了更深一层对表格进行语义化，HTML 引入了 thead、tbody 和 tfoot 这三个标签。这三个标签把表格分为三部分：表头、表身、表脚。

标签	说明
table	表格
caption	标题
thead	表头（语义划分）
tbody	表身（语义划分）
tfoot	表尾（语义划分）
tr	行
th	表头单元格
td	表格单元格

普通表格

如果我们想打印一个成绩单那样的表格，我们可以这样实现

		考试成绩表
姓名	语文	英语	数学
小明	80	80	80
小红	90	90	90
小杰	100	100	100
平均	90	90	90

样例代码 1：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table >
			<caption>考试成绩表</caption>

			<thead>
				<tr>
					<th>姓名</th>

					<th>语文</th>

					<th>英语</th>

					<th>数学</th>

				<tr>
			</thead>

			<tbody>
				<tr>
					<td>小明</td>

					<td>80</td>

					<td>80</td>

					<td>80</td>

				</tr>
				<tr>
					<td>小红</td>

					<td>90</td>

					<td>90</td>

					<td>90</td>

				</tr>

				<tr>
					<td>小杰</td>

					<td>100</td>

					<td>100</td>

					<td>100</td>

				</tr>

			</tbody>

			<tfoot>
				<tr>
					<td>平均</td>

					<td>90</td>

					<td>90</td>

					<td>90</td>

				</tr>

			</tfoot>

		</table>
	</body>
</html>


复制代码

效果截图：

渲染表格

我们发现上面的表格没有边框，我们还可以对表格加一些修饰

border 控制是否显示边框
cellspacing 控制表格 table 与单元格之间的间距
cellpadding 控制单元格与内容的间距
color 对字体颜色更改
background-color 对背景颜色进行更改

样例代码 2：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			table,tr,td{
				color: red;
				background-color: aqua;
		</style>
		<title></title>
	</head>
	<body>
		<table border="1" cellpadding="0" cellspacing="0" border-collapse="collapse">
		            <tr>
		                <td>姓名<td>
		                <td>身高<td>
		            </tr>
		            <tr>
		                <td>小明<td>
		                <td>185cm<td>
		            </tr>
		            <tr>
		                <td>小红<td>
		                <td>165cm<td>
		            </tr><tr>
		                <td>小刚<td>
		                <td>173cm<td>
		            </tr>
		        </table>
	</body>
</html>


复制代码

效果截图：

跨行

跨两行

rowspan="2"

复制代码

跨列

跨两列

colspan="2"

复制代码

样例代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            table , th ,td{
                border-color: orange;
            }
        </style>
    </head>
    <body>



        <table border="1">
           <tr>
              <th>名称</th>
              <th>官网</th>
              <th>性质</th>
            </tr>
            <tr>
               <td>C语言中文网</td>
              <td>http://c.biancheng.net/</td>
              <td rowspan="2">学习</td>
             </tr>
            <tr>
                <td>百度</td>
              <td >http://www.baidu.com/</td>
             <!-- <td>搜索</td> -->
           </tr>
           <tr>
               <td>当当</td>
              <td colspan="2">http://www.dangdang.com/</td>
              <!-- <td>图书</td> -->
           </tr>
        </table>
    </body>
</html>

复制代码

效果截图：

表单 – form

表单是用于在客户端收集用户提交的信息。使用控件接收用户的各种类型的消息。
表单就是收集用户信息的，就是让用户填写的、选择的。
form 是英语表单的意思，form 中间可以添加文本框、密码框、单选按钮、复选框、下拉列表、按钮、文本域等内容。

form 标签

所有的表单内容，都要写在 form 标签里面

<form> 所有的表单内容，都要写在form标签里面</form>

复制代码

文本框

<input type="text" value="默认值" />

复制代码

密码框

<input type="password"/>

复制代码

单选按钮

<input type="radio" />女

复制代码

注意：
input 的 type 的值如果是 radio 就是单选按钮。需要注意的是必须要有相同的 name 属性，单选按钮才能互斥。

复选框

<input type="checkbox" /> 睡觉 
<input type="checkbox" /> 吃饭

复制代码

复选框，最好也是有相同的 name（便于服务器端收集用户选中的信息）

下拉列表

<select>
    <option>吃饭</option>
    <option>睡觉</option>
    <option>玩</option>
</select>

复制代码

select 就是 “选择”， select 标签和 ul、ol、dl 一样，都是组标签 option“选项”

文本域

<textarea cols="20" rows="10">默认出现的文字</textarea>

复制代码

cols 属性表示 columns“列”， rows 属性表示 rows“行”。值就是数字，表示行数和列数。标签对儿中间的文字是默认出现在文本框的文字，一般不需要写字。

按钮

普通按钮

<input type="button" value="我是一个普通按钮" />

复制代码

button 就是英语 “按钮” 的意思。value 的 “值” 就是按钮上面显示的文字。

提交按钮

<input type="submit" />

复制代码

submit 就是英语 “提交” 的意思。这个按钮不需要写 value 自动就有 “提交” 文字。这个按钮点击，表单会提交到服务器。

重置按钮

<input type="reset" />

复制代码

reset 就是 “复位”“重置” 的意思，可以重置前面各个表单元素中填写的值。

label 标签

<input type=“radio” name=“sex” id=“nan” /> <label for=“nan”>男</label> <input type=“radio” name=“sex” id=“nv” /> <label for=“nv”>女</label>

复制代码

input 元素要有一个 id，然后 label 标签就有一个 for 属性，和 id 相同，就表示绑定了，这个 label 和 input 就有绑定关系了。点击 label 标签中的文字就可以选择相应的单选框

只读和禁用

只读：readonly=“readonly”
禁用：disabled=”disabled”

<input >

<input type="submit "  disabled="disabled"  value="保存" >

复制代码

只读就是不可以更改了只能显示（案例中的张三就变得不可更改了）
禁用相当于直接作废了（保存那个提交直接作废，没法点击）

用上面的知识综合实例效果图：
图片[1]-CSS 表格和表单-一一网
完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h2>表单</h2>
		<form>
		请选择您的性别：<input type="radio"  />女<br />
		请选择您的爱好：<input type="checkbox"  /> 吃饭
		<input type="checkbox"  /> 乒乓球
		<input type="checkbox"  /> 篮球<br />
		请选择您的家乡：
		<select>
			<option>河南</option>
			<option>黑龙江</option>
			<option>四川</option>
		</select><br />
		<input type="submit" />		
		<input type="reset" />	<br />
		请输入您的用户名：<input type="text" value="Keafmd" /><br />
		请输入您的密码：<input type="password"/><br />
		<input type="submit" value="登录"/>
		<input type="reset" />	<br />
		请输入您的建议和要求：<br />
		<textarea cols="20" rows="10" >Keafmd</textarea>
		</from>
		
	</body>
</html>


复制代码

写作不易，读完如果对你有帮助，感谢点赞支持！
如果你是电脑端，看见右下角的 “一键三连” 了吗，没错点它 [哈哈]