表格和表单
一、表格
1.1 表格基本
<table border="1" width='50%' aligh='center'>
<!--在tr中使用td表示一个单元格,有几个td就有几个单元格-->
<tr>
<!--在tr中使用td表示一个单元格,有几个td就有几个单元格-->
<td>A1</td>
<td>B1</td>
<td>C1</td>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
<!--rowspan 纵向的合并单元格-->
<td rowspan="2">C2</td>
</tr>
<tr>
<!--colspan 横向的合并单元格-->
<td colspan="2">A3</td>
<td>B3</td>
<td>C3</td>
</tr>
</table>
1.2 长表格,表格结构
<table border="1" width='50%' aligh='center'>
<!--
可以将一个表格分成三个部分
-->
<thead>
<tr>
<th>A1</th>
<th>B1</th>
<th>C1</th>
</tr>
</thead>
<tbody>
<tr>
<td>A2</td>
<td>B2</td>
<!--rowspan 纵向的合并单元格-->
<td rowspan="2">C2</td>
</tr>
<tr>
<!--colspan 横向的合并单元格-->
<td colspan="2">A3</td>
<td>B3</td>
<td>C3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td colspan="2">合计</td>
<td></td>
</tr>
</tfoot>
</table>
注意:如果表格中没有使用tbody而是直接使用tr,那么浏览器会自动创建一个tbody,并且将tr全部放到tbody中,所以tr不是table的子元素
1.3 表格的样式
1.3.1 表格边框样式
<style>
table{
/*1.指定边框之间的距离*/
border-spacing:1px;
/*2.设置边框的合并,即边框不会重合*/
border-collapse:collapse;
}
</style>
1.3.2 表格背景设置
<style>
/*可以让一行有背景颜色一行没有*/
tbody > tr:nth-child(odd){
background-color:#bfa;
}
</style>
1.3.3 表格内容的样式
<style>
td{
/*设置内容位置*/
/*垂直方向*/
vertical-align:middle;
/*水平方向*/
text-align:center;
}
</style>
二、表单
2.1 表单介绍
在网页中也可以使用表单,网页中的表单用于将本地的数据交给远程服务器
使用form标签来创建一个表单
2.2 form的属性
-
action
表单要提交的服务器的地址
-
method
表单提交的方式
-
特殊
以下可以用在form表示表单中标签都应用,也可以单独应用在input中
autocomplete="off" 关闭自动补全 readonly 将表单项设置为只读,数据会提交 disabled 将表单项设置为禁用,数据不会提交 aotofocus 设置表单项自动获取焦点
2.3 form中标签中的内容
-
input
- type来指定input的类型
- 数据要提交到服务器,必须要为元素指定一个name属性
- checked属性可以选择默认值
-
文本框
<input type="text" name="username"/>
-
密码框
<input type="password" name="password"/>
-
单选按钮
这种单选按钮,必须要指定一个value属性,value属性最终会作为用户的填写值
多个按钮,如果name中的值一样,可以实现只能选一个
<input type="radio" name="hello" value="a"><br> <input type="radio" name="hello" value="b" checked><br>
-
按钮
<!--1.提交表单按钮--> <input type="submit"> <!--2.重置表单按钮--> <input type="reset"> <!--3.普通按钮--> <input type="button" value="按钮">
-
下拉列表
select属性为默认选择
<select name="haha"> <option value="i">选项一</option> <option selected value="ii">选项二</option> <option value="iii">选项三</option> </select>
-
按钮
-
方式一 input
<!--1.提交表单按钮--> <input type="submit"/> <!--2.重置表单按钮--> <input type="reset"/> <!--3.普通按钮--> <input type="button" value="按钮"/>
-
方式二 button
<!--1.提交表单按钮--> <button type="submit"></button> <!--2.重置表单按钮--> <button type="reset"></button> <!--3.普通按钮--> <button type="button"></button>
-