TML表格
表格由 <table> 标签来定义。每个表格都有若干行(由 <tr> 标签定义),每行被分为若干单元格(由 <td> 标签定义)。td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
表格常用标签
标签 | 描述 |
---|---|
table | 定义表格 |
th | 定义表格的表头 |
tr | 定义表格的行 |
td | 定义表格的单元 |
caption | 定义表格的标题 |
thead | 定义表格的页眉 |
tbody | 定义表格的主体 |
tfoot | 定义表格的页脚 |
表格常用属性
属性 | 值 | 描述 |
---|---|---|
border | npx | 设置表格的边框 |
width | npx, n% | 设置表格的宽度 |
colspan | number | 合并表格的列 |
rowspan | number | 合并表格的行 |
align | right left center justify | 表格在文档中的水平对齐方式 |
valign | top middle bottom baseline | 表格在文档中的垂直对齐方式 |
cellpadding | npx | 内容和边框之间的间距 |
cellspacing | npx | 单元格之间的间距 |
bgcolor | 颜色值 | 设置表格背景颜色 |
frame | void border above below hsides lhs rhs vsides | 不显示外边框 四周都显示 显示上部的外边框 显示下部的外边框 显示上下的外边框 显示左部的外边框 显示右部的外边框 显示左右的外边框 |
rules | none rows cols all | 内边框将不被显示 内边框将在行之间显示 内边框在列之间显示 内边框将被显示 |
表格实际效果
表格代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<hr>
<table border="1">
<h2>流量调查表</h2>
<tr>
<th>总页面流量</th>
<th>共计来访</th>
<th>会员</th>
<th>游客</th>
</tr>
<tr>
<td>9756488</td>
<td>9756</td>
<td>738087</td>
<td>43364677</td>
</tr>
<tr>
<td>46776686</td>
<td>85544</td>
<td>69357</td>
<td>568787</td>
</tr>
<tr>
<td>7538087</td>
<td>546774</td>
<td>476897</td>
<td>334545</td>
</tr>
<tr>
<td>平均每人浏览</td>
<td colspan="3">1.58</td>
</tr>
</table>
</body>
</html>
HTML表单
表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容,如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等,这些元素,统称“控件”。
用于收集用户信息,进行人机交互操作。
表单使用表单标签 <form>来设置。
属性 | 描述 |
---|---|
name | 指定控件的名称,可重复 |
id | 指定标签的唯一标识 |
value | 输入(收集、设置)控件的值 |
checked | 复选框(单选)组默认被选中的项目 |
selected | 列表框组默认被选中的项目 |
src | 图片框的图片来源 |
onclick | 鼠标单击事件 |
disabled | 禁用该控件 |
multiple | 允许多选(适合普通列表框) |
实际效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<hr>
<h2>American Metric电子产品调查表</h2>
<form action="./03.html" method="post" autocomplete="on">
姓名:<input type="text" name="" id="" placeholder="输入必须是2-6为字符" minlength="2" maxlength="6"><br>
购买日期: <input type="text">年
<select name="" id="">
<option value="">1月</option>
<option value="">2月</option>
<option value="">3月</option>
<option value="">4月</option>
<option value="">5月</option>
<option value="">6月</option>
<option value="">7月</option>
<option value="">8月</option>
<option value="">9月</option>
<option value="">10月</option>
<option value="">11月</option>
<option value="">12月</option>
</select>月
<select name="" id="">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
<option value="">6</option>
<option value="">7</option>
<option value="">8</option>
<option value="">9</option>
<option value="">10</option>
<option value="">11</option>
<option value="">12</option>
<option value="">13</option>
<option value="">14</option>
<option value="">15</option>
<option value="">16</option>
<option value="">17</option>
<option value="">18</option>
<option value="">19</option>
<option value="">20</option>
<option value="">21</option>
<option value="">22</option>
<option value="">23</option>
<option value="">24</option>
<option value="">25</option>
<option value="">26</option>
<option value="">27</option>
<option value="">28</option>
<option value="">29</option>
<option value="">30</option>
<option value="">31</option>
</select>日<br>
电子邮件地址: <input type="email" placeholder="www.baidu.com"><br>
手机号码: <input type="text" placeholder="必须是以13/15/18开头的11位数字"><br>
您是否查看过我们的在线产品目录? <label for="nan"><input type="radio" name="sex" id="nan">是</label>
<input type="radio" name="sex" checked>否<br>
如果查看过,您对哪些产品有兴趣购买? (选择提供的产品):<br>
<input type="checkbox">大屏幕电视
<input type="checkbox">音频设备
<input type="checkbox">视频设备
<input type="checkbox">相机<br>
在填写订单之前,您还有什么问题,意见或建议?<br>
<input type="text"><br>
<button type="submit">提交</button>
<button type="reset">重置</button>
</form>
</body>
</html>