HTML中表格和表单的基础写法

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Seven_Amber/article/details/52862261

表格和表单的基础标签

①      表格:对于表格除了基础的构建一个表格,常用的还有合并单元格的操作。

基础的标签格式:

<table>

<caption>表格的标题</caption>

<tr>

   <td>第一行第一列</td>

   <td>第一行第二列</td>

</tr>

<tr>

   <td>第二行第一列</td>

<td>第二行第二列</td>

</tr>

</table>

表格当中需要注意的是:table标签的border(边框)属性的宽度值不设置或者为零时,表格在在显示时是看不出表格的条条框框的,只是文字内容按表格划分的区域显示(这有时候在有需要时也是一种好的显示方式)。

 

表格表头通常使用<th></th>标签来表示,它默认是加粗居中显示。

表格中合并单元格的操作使用rowspan跨行合并/colspan夸列合并 这两个属性来控制,例子入如下:

 

<table border="2" width="50%"bgcolor="#CCCCCC" bordercolor="#0000FF">

<caption >这是一个表</caption>

<tr bgcolor="#00CCFF"bordercolor="#FF66CC">

<th colspan="2" >1</th>

<th colspan="2" >2</th>

</tr>

<tr align="right">

<td rowspan="2">

rowMax

</td>

<td bgcolor="#CC00CC"bordercolor="#FF00CC"bordercolorlight="#FFFFFF">a</td>

<td>b</td>

<td>c</td>

</tr>

<tr>

<td>aa</td>

<td>bb</td>

<td>cc</td>

</tr>

</table>

 

之前学过的相关颜色,字体等属性也可以嵌套使用。

表格也常常用来做页面的布局。

 

②      表单:注册或者登陆界面常常大量使用到表单部分的内容。

表单的基本格式:

<form>

<input type=“类型” name=“命名” value=“对应值” />

</form>

 

在表单中,很多标签都经常会用到,如下举例说明:

 

①     ID:<inputtype="text" name="ID" value=""placeholder="<请输入账号>" />这是一个常用的普通文本框。

②     密码:<input type="password"name="pw" placeholder="<请输入密码>"/>

③     单选框:<input type="radio"name="sex" checked="checked"/> <inputtype="radio" name="sex" />男

④     复选框:<input type="checkbox"name="1" checked="checked" />1 <inputtype="checkbox" name="2"/>2 <inputtype="checkbox" name="3"/>3

⑤     隐藏域:<input type="hidden" />

⑥     文本域:<textarea></textarea>

⑦     下拉列表和滚动列表:

<select  size=2>

<option>aa</option>

<optgroup>bb</optgroup>

</select>

⑧     数字文本框:<input type="number" />

⑨     邮件文本框:<input type="email"/>

⑩     图片提交按钮:<input type="image"src="../demo1/earth.jpg" />

⑪     提交文件:<input type="file"/>

⑫     刷新按钮<input type="reset"  name="SX"  value="刷新"/>

⑬     确认按钮<input type="button"name="QR" value="确认"/>

⑭     提交按钮<input type="submit"name="TJ"  value="提交" />

⑮     类似音量调节:<input type="range"/>

⑯     查找:<input type="search" />

展开阅读全文

没有更多推荐了,返回首页