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

表格和表单的基础标签

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

基础的标签格式：

<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" />