表格
表格简介
在现实生活中,我们经常需要使用表格来表示一些格式化数据:
例如课程表、人名单、成绩单....同样在网页中我们也需要使用表格,我们通过table标签来创建一个表格。
表格的基本结构
<!-- 使用table标签定义表格 -->
<table>
<!-- 在table中使用tr表示表格中的一行,有几个tr就有几行 -->
<tr>
<!-- 在tr中使用td表示一个单元格,有几个td就有几个单元格 -->
<td>A1</td>
<td>B1</td>
<td>C1</td>
<td>D1</td>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
<td>C2</td>
<td>D2</td>
</tr>
<tr>
<td>A3</td>
<td>B3</td>
<td>C3</td>
<td>D3</td>
</tr>
<tr>
<td>A4</td>
<td>B4</td>
<td>C4</td>
<td>D4</td>
</tr>
</table>
合并单元格
- rowspan 纵向的合并单元格
- colspan 横向的合并单元格
<table>
<tr>
<td>A1</td>
<td>B1</td>
<td>C1</td>
<td>D1</td>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
<td>C2</td>
<td rowspan="2">D2</td>
</tr>
<tr>
<td>A3</td>
<td>B3</td>
<td>C3</td>
</tr>
<tr>
<td>A4</td>
<td>B4</td>
<td colspan="2">C4</td>
</tr>
</table>
长表格
可以将一个表格分成三个部分:
- 头部 thead
- 主体 tbody
- 底部 tfoot
注:如果表格中没有使用tbody而是直接使用tr,那么浏览器会自动创建一个tbody,并且将tr全都放到tbody中,tr不是table的子元素
th 表示头部的单元格
<table border="1" width="50%" align="center">
<thead>
<tr>
<th>日期</th>
<th>收入</th>
<th>支出</th>
<th>合计</th>
</tr>
</thead>
<tbody>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td>合计</td>
<td>300</td>
</tr>
</tfoot>
</table>
表格的样式
- border-spacing: 指定边框之间的距离
- border-collapse: collapse; 设置边框的合并
- 将元素设置为单元格 td
display: table-cell;
vertical-align: middle; - 设置隔行变色
tbody > tr:nth-child(odd) {
background-color: #bfa;
}
- 默认情况下元素在td中是垂直居中的 可以通过 vertical-align 来修改
vertical-align: middle;
text-align: center;
表单
表单简介
- 在现实生活中表单用于提交数据
- 在网页中也可以使用表单,网页中的表单用于将本地的数据提交给远程的服务器
定义表单
使用form标签来创建一个表单
常见表单
文本框
注意:数据要提交到服务器中,必须要为元素指定一个name属性值
<input type="text" name="username">
密码框
<input type="password" name="password">
单选按钮
- 像这种选择框,必须要指定一个value属性,value属性最终会作为用户的填写的值传递给服务器
- checked 可以将单选按钮设置为默认选中
- 必须指定name属性,相同name属性的单选按钮才能被分为一组,如果不指定,则每个按钮都可以被选中
<input type="radio" name="hello" value="a">
<input type="radio" name="hello" value="b">
多选框
<input type="checkbox" name="test" value="1">
<input type="checkbox" name="test" value="2">
<input type="checkbox" name="test" value="3" checked>
下拉列表
<select name="haha">
<option value="i">选项一</option>
<option selected value="ii">选项二</option>
<option value="iii">选项三</option>
</select>
提交按钮
<input type="submit" value="注册">
<button type="submit">提交</button>
重置按钮
<input type="reset">
<button type="reset">重置</button>
普通的按钮
<input type="button" value="按钮">
<button type="button">按钮</button>
表单的几种属性
- autocomplete="off" 关闭自动补全
- readonly 将表单项设置为只读,数据会提交
- disabled 将表单项设置为禁用,数据不会提交
- autofocus 设置表单项自动获取焦点
网友评论