码迷,mamicode.com
首页 > 其他好文 > 详细

表格方面的学习内容

时间:2020-07-21 23:07:36      阅读:86      评论:0      收藏:0      [点我收藏+]

标签:复杂   结构   width   居中   nbsp   语法   The   背景   样式   

表格方面的东西比较复杂如果要做好的话还是比较难的
但是看起来非常的方便具有较强的直观性,可以用来做一些攻略网站什么的,是非常有效的
 
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

表格方面的学习内容

标签:复杂   结构   width   居中   nbsp   语法   The   背景   样式   

原文地址:https://www.cnblogs.com/anixo/p/13357139.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!