表格与表单

表格

通过table标签来创建一个表格，在table中使用tr表示表格中的一行，有几个tr就表示有几行。在tr中用td表示一个单元格，有几个td就表示有几个单元格

tr与td可选值：

• colspan：横向合并单元格
• rowspan：纵向合并单元格

例如：

长表格

长表格：将一个表格分成三个部分

• 头部 ：thead
• 主体：tbody
• 底部：tfoot
  例如：
  html代码：

<table border="1">
  <thead>
<td>日期</td>
<td>收入</td>
<td>支出</td>
<td>合计</td>
</thead>
<tbody>
  <tr>
  <td>2001.04.10</td>
<td>500</td>
<td>100</td>
<td>400</td>
</tr>
<tr>
<td>2001.04.11</td>
<td>700</td>
<td>200</td>
<td>500</td>
</tr>
<tr>
<td>2001.04.12</td>
<td>600</td>
<td>100</td>
<td>500</td>
</tr>
<tr>
<td>2001.04.13</td>
<td>500</td>
<td>100</td>
<td>400</td>
</tr>
</tbody>
<tfoot>
<td></td>
<td></td>
  <td>合计：</td>
  <td>500</td>
</tfoot>
</table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

效果：

表格的样式

border-spacing：表示边框间的距离
border-collapse:collapse：设置边框的合并
vertical-align：修改文字在表格中所处位置

注意：如果表格中没有使用tbody而是直接使用tr，那么浏览器会自动创建一个tbody，并且将tr全部放到tbody中，tr不是table的子元素，而是tbody的子元素。

通过以下样式可以调整字体在单个表格中处在中心位置

td{
vertical-align:middle;
text-align:center;
}
1
2
3
4

表单

作用：

• 用于将本地的数据提交给远程的服务器

创建方式：

• 使用form标签来创建一个表单

form的属性

1. action

表单要提交的服务器的地址
例如：

<form action="target.html" target="_blank"></form>
1

2. 添加文本框

例如：

<input type="text" name="hellowworld">
1

注意：数据要提交到服务器中，必须要为元素指定一个name属性值

3. 提交按钮

value属性：可以指定特定值

<input type="submit"  value="注册">
1

4. 密码框

<input type="password">
1

5. 单选按钮

<input type="radio" name="" value="">
1

注意：这种选择框，必须指定一个value属性，value属性最终作为用户的填写的值传递给服务器

6. 多选框

<input type="checkbox"><input type="checkbox">
1

7. 下拉列表

<select name="" id="">
 <option value=""></option>
 <option value=""></option>
</select>
1
2
3
4

例如：

两种不同形式的按钮的对比

<input type="submit">
<input type="reset">
<input type="button" value="按钮">

<br><br>
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按钮</button>
1
2
3
4
5
6
7
8

效果：

效果完全相同，但是使用button可以通过css设置更加复杂的样式，例如可以放值图片代替文字