表格方面的学习内容

Posted 2020-12-18 anixo

表格方面的东西比较复杂如果要做好的话还是比较难的

但是看起来非常的方便具有较强的直观性，可以用来做一些攻略网站什么的，是非常有效的

 

html：表格
1.表格三标签：
（1）<table> 表格
（2）<tr>  行
（3）<td>  单元格

2.表格的基本语法和结构
<table>
 <tr>
    <td>   </td>
 <tr>
    <td>   </td>
 </tr>
</table>
3.带表头的表格
<table>
 <tr>
  <th>……</th>     <!-表格头，内容居中、加粗显示-->
 </tr>
 <tr>
  <td>……</td>
 </tr>
</table>
4.带标题的表格
<table>
 <caption>……</caption> <!-表格标题，居中显示>
 <tr>
  <th>……</th>    
 </tr>
 <tr>
  <td>……</td>
 </tr>
</table>
5.带结构的表格
<table>
 <caption>……</caption>
 <thead>
 <tr>
  <th>表头</th>    
 </tr>
 </thead>
 <tbody>
 <tr>
  <td>主体</td>
 </tr>
 </tbody>
 <tfoot>
 <tr>
  <td>脚注</td>
 </tr>
 </tfoot>
</table>
6.表格属性
（1）width 表格宽度
（2）border 表格边框宽度
（3）cellpadding 单元格边沿和内容之间的空白
（4）cellspacing 单元格之间的空白
（5）bgcolor 背景颜色
（6）frame 外边框样式
（7）rules 内边框样式
7.跨列属性colspan
<table>
 <tr>
  <td colspan="2">……</td>
  <td>……</td>    
 </tr>
 <tr>
  <td>……</td>
  <td>……</td>
  <td>……</td>
 </tr>
</table>
8.跨行属性rowspan
<table>
 <tr>
  <td rowspan="2">……</td>
  <td>……</td>    
  <td>……</td>
 </tr>
 <tr>
  <td>……</td>
  <td>……</td>
 </tr>
</table>
9.表格布局
（1）尽量少的使用表格嵌套
（2）尽量少的使用表格跨行跨列
（3）说明：使用表格进行网页结构布局一般不设置border