第十课 表格与表单

1、定义表格

html 定义表格的三个必须的标记<table> <tr>  <td>

<table>的属性设置:

border 表格外边框粗细，但是border为0，则所有边框线不可见，border默认为0

width  设置表格的整体宽度

       如果只设定表格宽度，则单元格宽度是根据单元格里面的内容长度按比例分配

       如果不设定表格宽度，则表格的实际宽度是各列单元格宽度加边框线宽度之和

height 设置表格的整体高度，高度分配方式同上

cellspacing  单元格间距

cellpadding  单元格内边距

bgcolor 背景色

bordercolor 边框颜色

2、设置单元格属性

设置单元格宽高 width,height
align  left  center  right
valign top  middle   bottom

背景色 bgcolor

边框颜色 bordercolor 

跨列colspan 

跨行rowspan
<th> 表头单元格标记，与<td>一样，自带加粗和align="center"的样式

<tr>行标记的属性

对齐align  
bgcolor

表格布局
如何实现1px的表格边框线，在<table>标记上加CSS样式：border-collapse:collapse;
 

表单的定义

所有的表单元素都要放在一对<form></form> 标记之内

认识表单元素标记

文本框：<input type="text" maxlength="16" size="16"/>

密码框：<input type="password"  maxlength="16" size="16"/>

复选框：<input type="checkbox" checked="checked"/>

单选框：<input type="radio" checked="checked"/>

普通按钮：<input type="button" value="按钮"/>

提交按钮：<input type="submit" />

重置按钮：<input type="reset" />

文件上传：<input type="file" />

 

列表框：

<select>

      <option>初中</option>

      <option>高中</option>

      <option>中专</option>

      <option selected="true">大专</option>

      <option>本科</option>

</select>

 

文本域：

<textarea  cols="60" rows="10"> 文本框里的默认内容</textarea>

 

表单元素的公共属性：

name="xm"  给表单元素命名，方便后台程序提取数据。

disabled="disabled" 禁用表单元素

 

如何关联多个radio(单选框)，设置它们的name相同即可。

 

 

CSS设置表单元素的样式   background:none;  可以去掉表单元素的背景（为透明）。

 

用表格对表单元素布局