HTML中的表格(html中表格代码)

HTML中的表格(html中表格代码)

首页维修大全综合更新时间:2024-04-12 13:29:24

HTML中的表格

1、<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form > <table border="1" width="900" > <tr> <td colspan="4"> <h3>用户注册</h3> </td> </tr> <tr> <td> <h4>用户名:</h4> </td> <td> <input type="text" name="" />* </td> <td colspan="2"> <a href="" ><h4>检测是否有相同姓名</h4></a> </td> </tr> <tr> <td> <h4>密码:</h4> </td> <td> <input type="text" name="" />* </td> <td> <h4>真实姓名:</h4> </td> <td> <input type="text" name="" />* </td> </tr> 。

2、 <tr> <td> <h4>确认密码:</h4> </td> <td> <input type="text" name="" />* </td> <td> <h4>性别:</h4> </td> <td> <select name=""> <option value="男">男</option> <option value="女">女</option> </select> </td> </tr> <tr> <td> <h4>证件类型:</h4> </td> <td> <select> <option value="身份证">身份证</option> <option value="户口本">户口本</option> <option value="军官证">军官证</option> </select> </td> <td> <h4>出生日期:</h4> </td> <td> <input type="text" />(格式:2000-08-08) </td> </tr> <tr> <td> <h4>证件号码:</h4> </td> <td> <input type="text" name="" />* </td> <td> <h4>国家:</h4> </td> <td> <input type="text" name="" />* </td> </tr>。

3、 <tr> <td> <h4>联系号码:</h4> </td> <td> <input type="text" name="" />* </td> <td> <h4>城市:</h4> </td> <td> <input type="text" name="" />* </td> </tr> <tr> <td > <h4>手机号码:</h4> </td> <td colspan="3"> <input type="text" name="" />* (建议填写以便短息通知) </td> </tr> <tr> <td> <h4>Email:</h4> </td> <td> <input type="email" name="" />* </td> <td> <h4>邮编:</h4> </td> <td> <input type="text" name="" />* </td> </tr> <tr> <td > <h4>联系地址:</h4> </td> <td colspan="3"> <textarea name=""></textarea> </td> </tr> <tr> <td></td> <td> <input type="reset" value="重置"/> </td> <td> <input type="submit" value="提交"/> </td> <td></td> </tr> </table> </form> </body></html>。

4、表单相关HTML标签<form action="" method="post" name="form1" id="user"></form>表单标签 <input type="text" name="text" /> 单行文本输入框<input type="hidden" name="hidden" /> 隐藏域<input type="password" name="password" /> 密码输入框<input type="checkbox" name="checkbox" value="checkbox" /> 复选框<input type="radio" name="radiobutton" value="radiobutton" /> 单选按钮<input type="file" name="file" />文件域<input type="submit" name="Submit" value="提交"/> 提交按钮<input type="reset" name="Submit2" value="重置"/> 重置按钮<input type="button" name="button" />创建一个可单击的按钮,一般用于JS的运行。

5、下列为HTML5新增input类型<input type="email" name="email" /> email输入框<input type="url" name="url" /> url地址输入框<input type="number" name="number" min="0" max="20" step="4"/>数字输入框,其中0为输入的最小值,20为最大值,输入的数字为setp的倍数<input type="range" name="range" min="0" max="20" step="4"/>创建滑块输入数字<input type="date" name="date" />日期创建,选取日、月、年(火狐、IE不支持)<input type="search" name="search" />创建搜索内容输入框,结合程序实现搜索功能<input type="tel" name="tel" />创建电话号码输入框如在苹果手机上的浏览器中,将显示出拨号盘。

6、<input type="color" name="color" />创建颜色选择框<input>新增加pattern属性,用于限制text,search,url,tel,email,password的输入值和位数例如:<input type="text" pattern="{6}" /><input>新增加required属性,用于限制text,search,url,tel,email,password,number,checkbox,radio,file的值不能为空例如:<input type="text" required="required" /><textarea name="textarea"></textarea> 多行文本框<select name="select">下拉列表<option value="合肥">合肥</option></select>下面两行是单选按钮组<input type="radio" name="RadioGroup1" value="单选"/>单选<input type="radio" name="RadioGroup1" value="单选"/>单选。

使用webstorm制作网页文件的时候,难免会遇到制作表格的情况,而且关键的布局方式一般都是使用表格完成的。

1.制作表格我们需要使用标签table在html中输入table标签,然后设置行和列,,tr代表行,td代表列,然后在行和列中输入相关的内容。

2.预览网页我们发现,网页显示格式看起来不像是表格,因为没有框线,这时候我们需要给table标签设置边框,border,如图所示,在table标签中,定义border的值,这样再预览网页我们就可以看到表格样式。

3.图中的表格表头和文本内容显示格式一致,我们可以使用th标签代替td标签作为表格的表头,系统自动将表头内部的文本内容加粗居中显示,这样表头格式就被着重定义出来。

4.可以使用caption标签给表格添加标题,caption是table标签的子标签需要写在table标签内部,将需要定义的标题文本输入到caption中。

5.两行数值一样的话可以设置为rowspan值,如图所示,两行数据一致,直接设置rowspan值为2,下一行的这个数值就不必单独定义了,如果是三行数值一致,那么可以直接设置为3.

6.将多列相同数据一起显示可以使用colspan来进行设置,如图所示,第三列所有的内容都全部显示一致,我们可以设置像表格中的合并效果然后一起显示,这样就不必每一列都输入内容。

大家还看了
也许喜欢
更多栏目

© 2021 3dmxku.com,All Rights Reserved.