HTMLCSS学习笔记(六)----表格表单及样式重置,特性

  • 表格
<!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;}


 

原文地址:https://www.cnblogs.com/BBeyes/p/6581630.html