表格
通过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>
效果:
日期 | 收入 | 支出 | 合计 |
2001.04.10 | 500 | 100 | 400 |
2001.04.11 | 700 | 200 | 500 |
2001.04.12 | 600 | 100 | 500 |
2001.04.13 | 500 | 100 | 400 |
合计: | 500 |
表格的样式
border-spacing:表示边框间的距离
border-collapse:collapse:设置边框的合并
vertical-align:修改文字在表格中所处位置
注意:如果表格中没有使用tbody而是直接使用tr,那么浏览器会自动创建一个tbody,并且将tr全部放到tbody中,tr不是table的子元素,而是tbody的子元素。
通过以下样式可以调整字体在单个表格中处在中心位置
td{
vertical-align:middle;
text-align:center;
}
表单
作用:
- 用于将本地的数据提交给远程的服务器
创建方式:
- 使用form标签来创建一个表单
form的属性
- action
表单要提交的服务器的地址
例如:
<form action="target.html" target="_blank"></form>
- 添加文本框
例如:
<input type="text" name="hellowworld">
注意:数据要提交到服务器中,必须要为元素指定一个name属性值
- 提交按钮
value属性:可以指定特定值
<input type="submit" value="注册">
- 密码框
<input type="password">
- 单选按钮
<input type="radio" name="" value="">
注意:这种选择框,必须指定一个value属性,value属性最终作为用户的填写的值传递给服务器
- 多选框
<input type="checkbox"><input type="checkbox">
- 下拉列表
<select name="" id="">
<option value=""></option>
<option value=""></option>
</select>
例如:
两种不同形式的按钮的对比
<input type="submit">
<input type="reset">
<input type="button" value="按钮">
<br><br>
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按钮</button>
效果:
效果完全相同,但是使用button可以通过css设置更加复杂的样式,例如可以放值图片代替文字