- 表格
<!DOCTYPE HTML> <html> <head> <title>...</title> </head> <body> <table> <!-- 表格 --> <thead> <!-- 表格头部 --> <tr> <!-- 行 --> <th>表格标题</th> <th>表格标题</th> <th>表格标题</th> </tr> </thead> <tbody> <!-- 表格主体 --> <tr> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tr> <tr> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tr> <tr> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tr> </tbody> <tfoot> <!-- 表格尾部 --> <tr> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tr> </ftoot> <!-- 表格尾部 --> </table> </body> </html>
table css reset:
th,td{padding:0;}
table{ border-collapse: collapse;} 单元格属性合并
注意事项:
1,不要给table,th,td以外的表格标签加样式。
2,table的标签基本特性是 display: table ;
3,单元格默认平分table的宽度;
4,th 里面的文字默认加粗并且左右上下居中显示;
5,td里面的内容默认上下居中左右居左显示;
6,table 决定了整个表格的宽度;
7,table 里面的单元格宽度会被转换成百分比;
8,表格里面的每一列必须有宽度;
9,表格同一竖列继承最大宽度;
10,表格同行继承最大高度;
- 单元格合并
<td colspan="3"></tdx>
属性规定单元格可横跨的列数,被合并的列数去掉
<td rowspan="3"></tdx>
属性规定单元格可横跨的行数,被合并的列数去掉
- 表单元素
<form action="http://www.cnblog.com/" method="get" target="_blank">
提交按钮:<input type="submit" value="提交OK"/ name="">
</form>
</br></br>
文本框 : <input type="text" name=""/>
</br></br>
密码框:<input type="password" name=""/>
</br></br>
单选按钮 :
<label>
<input type=“radio” name="gender"/ >男
</label>
<label>
<input type=“radio” name="gender"/ >女
</label>
两者取同一个名字是或的关系
<br/><br/>
复选框:
<input type="checkbox" name=""disabled>逛街<!-- 禁止禁用 -->
<input type="checkbox" name="">健身
<input type="checkbox" name="">直排
<input type="checkbox" name="">美食
<input type="checkbox" name=checked/>旅游 <!-- 默认选中 -->
<br/><br/>
<hr/>
上传:<input type="file" name=""/>
<br/><br/>
图片:<input src="xxx.jpg" type="image" name=""/>
<br/><br/>
按钮:<input type="button" name""/>
<br/><br/>
重置:<input type="reset" name""/>
<br/><br/>
隐藏:<input type="hidden" name""/>
<br/><br/>
<hr/>
<select>
<option >1990</option>
<option>1991</option>
<option selected>1992</option> <!-- 默认显示 -->
<option>1993</option>
</select>
<br></br>
文本域: <textarea></textarea>
默认样式重置:
form{margin:0;}
input{margin:0; padding:0;}有默认两像素的边框
select{margin:0;}一般不控制高度
textarea{margin:0;padding:0;}