HTML入门基础教程(3)html表格案例
- 格式:docx
- 大小:26.77 KB
- 文档页数:9
竭诚为您提供优质文档/双击可除html表格有3个基本组成部分篇一:html表单页面的基本结构html表单页面的基本结构本章开始讲解表单和框架,其中重点是如何使用表单中的各种元素.如何使用框架制作多窗框页面;难点是表单中的post方法和get方法的区别.窗口的target属性。
为了能在一个页面中显示多个html文档.我们还要介绍框架。
本节单词记忆:标签1.form2.input属性1.action2.method3.size4.maxlength5.checked网页学习网提示:html语言非常简单,不需要逻辑理解,而绝大部分朋友觉得它难以掌握,90%的原因在于英语单词不过关,所以每节记忆几个单词是非常有必要的。
热衷于上网的用户经常会在网上看到一些会员注册页面、购买某个商品收集信息页面、网上调查问卷页面、搜索工具页面等,这些页面是什么做的呢?我不敢说完全是用表单做的,但我敢肯定至少包含有表单,所以表单主要用来收集客户端相关信息,使网页具有交互功能。
本节主要讨论如何使用html来创建表单,然后向表单中添加表单元素。
网页中的表单用途很广,而且还在不断发展。
下面我们就列举一些典型的表单应用:●在用户注册某种服务或事件时收集姓名、地址、电话号码、电子邮件和其他信息。
●为收集购买某个商品的订单信息。
例如,如果想通过intemet购买一本书,则必须填写姓名、联系电话、邮寄地址、付款方式和其他相关信息。
●收集关于调查问卷信息。
大部分提供服务性的网站都鼓励用户参与调查问卷,提供反馈信息。
这些反馈信息除了维系良好的客户关系外,它还有助于改进和提高网站的服务质量,从而使网站的服务更具人性化,吸引更多的浏览者。
●为网站提供搜索工具。
提供各种信息的站点通常会为用户提供一个搜索框,使用户能够更快地找到想要的信息,如比较著名的搜索网站:谷歌(http://)等。
如图1所示是网页上的一个典型表单。
图1典型的表单一、表单包含的控件创建表单后,就可以在表单中放置控件以接受用户的输入。
html基础——表格练习最终样式步骤分析:标题和报名时间为⼀块表格为⼀块1. 由图可知,可创建⼀个七⾏⼋列的列表存储数据2. ⾸先设置边框的样式,边框⼤⼩,这⾥是⿊⾊不好看可以设置为天空蓝3. 可选矿使⽤<input type="checkbox">4. 有些框需要占据多列,添加colspan属性5. 有些单元格需要占据多⾏,添加rowspan属性6.1<!DOCTYPE html>2<html lang="en">34<head>5<meta charset="UTF-8"/>6<meta name="viewport" content="width=device-width, initial-scale=1.0"/>7<meta http-equiv="X-UA-Compatible" content="ie=edge"/>8<title>Document</title>9</head>1011<body>12<div style="color:red;font-size:30px;text-align:center;width:100%;">13 2019 年度⼀级建造师报名表14</div>15<div style="text-align: center;padding:10px;">16报名时间: 年 ⽉ ⽇17</div>18<table align="center" border="1" cellspacing="0" width="1000px">19<tr>20<td>姓名</td>21<td></td>22<td>性别</td>23<td> </td>24<td>邮编</td>25<td> </td>26<td>电邮</td>27<td></td>28</tr>29<tr>30<td>出⽣年⽉</td>31<td> </td>32<td>学历</td>33<td> </td>34<td>电话⼿机</td>35<td colspan="2"></td>36<td>“鲁班会”会员卡号</td>37</tr>38<tr>39<td>单位名称</td>40<td colspan="3"></td>41<td>传真</td>42<td colspan="2"></td>43<td colspan="2"></td>44</tr>45<tr>46<td rowspan="2">报考情况及辅导班级</td>47<td colspan="4">48<span><input type="checkbox"/>⾸次报考</span>49<span><input type="checkbox"/>⾮⾸次报考</span>50<span><input type="checkbox"/>增项</span>51</td>52<td colspan="3">53所报科⽬:54<span><input type="checkbox"/>法规</span>55<span><input type="checkbox"/>施⼯管理</span>56<span>实务科⽬:</span>57</td>58</tr>59<tr>60<td colspan="7">61所报辅导班6263<span><input type="checkbox"/>精讲班</span>64<span><input type="checkbox"/>讲题班</span>65<span><input type="checkbox"/>冲刺班</span>66<span><input type="checkbox"/>点题班</span>67<span><input type="checkbox"/>签约协议班</span>68</td>69</tr>70<tr>71<td>所在城市</td>72<td colspan="3"> 省 地区/市</td> 73<td>报读分校</td>74<td> </td>75<td>咨询⽼师</td>76<td></td>77</tr>78<tr>79<td>⾝份证号码</td>80<td colspan="7"></td>81</tr>82</table>83</body>8485</html>View Code。
HTML绘制表格1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title></title>6</head>7<body>8<!-- 表格标签 -->9<!-- 表格绘制 -->1011<table align="center" width="760px" border="1px" bordercolor="pink" cellspacing="0" cellpadding="10"> 12<caption>个⼈资料表</caption>1314<tr align="left" bgcolor="aliceblue">15<td colspan="5"><b>个⼈资料</b></td>16</tr>1718<tr height="27px">19<td>姓名:</td>20<td width="110px"></td>21<td>性别:</td>22<td width="110px"></td>23<td rowspan="5" align="center" width="130px">照⽚</td>24</tr>2526<tr>27<td>姓名:</td>28<td width="120px"></td>29<td>性别:</td>30<td width="120px"></td>31</tr>3233<tr>34<td>姓名:</td>35<td width="120px"></td>36<td>性别:</td>37<td width="120px"></td>3839</tr>4041<tr>42<td>姓名:</td>43<td width="120px"></td>44<td>性别:</td>45<td width="120px"></td>4647</tr>4849<tr>50<td>姓名:</td>51<td width="120px"></td>52<td>性别:</td>53<td width="120px"></td>5455</tr>5657<tr align="left" bgcolor="aliceblue">58<td colspan="5"><b>主修课程</b></td>59</tr>6061<tr>62<td colspan="5" height="60px"></td>63</tr>6465<tr align="left" bgcolor="aliceblue">66<td colspan="5"><b>主修课程</b></td>67</tr>6869<tr>70<td colspan="5" height="60px"></td>71</tr>7273<tr align="left" bgcolor="aliceblue">74<td colspan="5"><b>主修课程</b></td>75</tr>7677<tr>78<td colspan="5" height="60px"></td>79</tr>808182<tr align="left" bgcolor="aliceblue">83<td colspan="5"><b>主修课程</b></td> 84</tr>8586<tr>87<td colspan="5" height="60px"></td>88</tr>899091<tr align="left" bgcolor="aliceblue">92<td colspan="5"><b>主修课程</b></td> 93</tr>9495<tr>96<td colspan="5" height="60px"></td>97</tr>9899100<tr align="left" bgcolor="aliceblue">101<td colspan="5"><b>主修课程</b></td> 102</tr>103104<tr>105<td colspan="5" height="60px"></td> 106</tr>107108</table>109110</body>111</html>。
html简单表格代码案例以下是一个简单的HTML表格代码案例:
```html
<!DOCTYPE html>
<html>
<head>
<title>简单的HTML表格</title>
<th>职业</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>工程师</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>设计师</td>
</tr>
<tr>
<td>王五</td>
<td>28</td>
<td>教师</td>
</tr>
</table>
</body>
</html>
```
这个HTML表格包含了一个表头行(`<tr>`)和三行数据(`<tr>`)。
表头行包含三个表头单元格(`<th>`),用于显示列标题。
数据行包含三个数据单元格(`<td>`),用于显示具体的数据内容。
你可以根据需要修改表格的样式和内容,例如添加更多的行和列,更改单元格的样式等。