HTML之 表格table

首先介绍 table 的基本结构：

• < table>

• < caption>表格标题< /caption>
  标题会自动居中在表格内容正上方

• < tr>
  < th> 表头列< /th>
  < th> 表头列< /th>
  表头列内容会自动加粗和居中
  ……
  < /tr>

  < tr>
  < td> 普通列< /td>
  < td> 普通列< /td>
  ……
  < /tr>
  < /table>

table 基本标签的属性：

<table:

• border=" *px"
  是table的自带属性，设置了border，相当于设置了，fram="box"和rules=“all”
  若在css中设置 border：2px solid black ； 效果只是相当于设置外边框 fram=“box”

• bordercolor

• bordercolorlight (亮边颜色)

• bordercolordark (暗边颜色)

• bgcolor

• background=“url”

• width

• height

• cellspancing=" *px" (格与格之间的边距)

• cellpadding =" *px"（字与格之间的边距）

• align

• frame（外边框的设置）
  box或border： 显示上下左右边框
  above：显示上边框
  below：下
  lhs：左
  rhs：右
  hsides：上下
  vsides：左右
  void：不显示

• rules（内边框的设置）
  all：显示所有
  rows：仅显示行边框
  cols：仅显示列边框
  none：不显示

<tr：(有自身的对齐方式)

• align
• valign=“top | middle | bottom” (竖直对齐方式)
• bgcolor
• bordercolor
• bordercolorlight
• bordercolordark

<td |< th（合并行和列）
在 tr 拥有的属性基础上 新增加了

• colspan=" n " (合并列)
• rowspan=" n " (合并行)
• width
• height
• background=“URL”

使用中遇到的问题：

1、当设置了rules时cellspacing失效

没设置rules时

<table width="250px" height="250px" border="5px" cellspacing="10px" >
 <caption>阿顺</caption>
  <tr >
  <th rowspan="2">.</th>
  <th>阿</th>
  <th colspan="3">顺特烦</th>
  <th>恼</th>
  <th rowspan="2">.</th>
  </tr>
  <tr>
  <td>阿</td>
  <td>顺</td>
  <td>特</td>
  <td>烦</td>
  <td>恼</td>
  </tr>
 </table> 

设置rules以后

<table width="250px" height="250px" border="5px" cellspacing="10px"  rules="all">

2、CSS中若设置了 padding:0px;则cellpadding失效

没设置padding时

<table width="250px" height="250px" border="5px" cellspacing="10px" cellpadding="20px">

设置css以后

<style>
  *{
   padding: 0px;
   margin: 0px;
  }
 </style>

<table width="250px" height="250px" border="5px" cellspacing="10px" cellpadding="20px">

阿顺特烦恼(peace!)