**表格**

作用：主要用来展示数据

应用：主要用在后台管理系统

 

 

语法：

<table>------------------表格

          <tr>---------------表格行

                 <td></td>-------表格列（单元格）

           </tr>

</table>

表格的标签属性：（写在标签内）

width="表格宽度"

height="表格高度"

border="表格边框"

bgcolor="表格背景色"

bordercolor="表格边框色"

cellspacing="单元格与单元格之间的距离"

Cellpadding="单元格与内容之间的距离"

align="表格对齐方式（left/center/right）"

rules="控制表格里显示横向的线或者纵向的线（rows横向的线/cols纵向的线）"

frame="控制显示表格周围的线（box让表格四周的线都显示/above只显示表格上方的线，below表格下方的线/lhs表格左侧的线/rhs表格右侧的线）"

表格默认效果：单元格宽高自动均分，一旦单元格中有了内容，单元格就会被撑大

表格行的标签属性：

height="表格行高度"

bgcolor="表格行背景色"

align="表格行文本内容水平对齐方式（left/center/right）"

valign="表格行文本内容垂直对齐方式（top/middle/bottom）"

单元格的标签属性：

width="单元格的宽度"影响一列单元格

height="单元格的高度"影响一行单元格

bgcolor="单元格背景色"

align="调整单元格内文本内容水平对齐方式（left/center/right）"

valign="调整单元格内文本内容垂直对齐方式（top/middle/bottom）"

合并单元格（合并后要删除被合并的单元格）

合并行     rowspan="所要合并的单元格的行数"

合并列     colspan="所要合并的单元格的列数"

（所有跨行的都是合并行，不跨行的都是合并列）

表格CSS属性：

width宽度

height高度

border边框（表格四周边框）

border-spacing调整单元格之间的间距

border-collapse:collapse; 合并单元格边框为一条细线

取值：collapse

table-layout表格固定算法

auto 表格的自动算法，自动布局，该怎么显示就怎么显示，

优点：比较灵活，能够容纳更多发内容

缺点：每次修改内容后浏览器都要重新计算单元格的宽度

fixed表格的固定算法，固定布局，单元格有固定的跨度，不会随着里面的宽度发生变化

优点：不需要反复计算单元格使用

缺点：内容过多会导致溢出

单元格td属性

border边框

padding 单元格与内容之间的间距

empty-cells:hide; 隐藏内容为空的单元格

取值：

show 显示（默认）

hide 隐藏

表格中的其他标签

1、表格标题标签

<caption>表格标题</caption>（添加在第一个<tr></tr>前面）

属性caption-size 设置表格标题的位置

取值：top/bottom

2、行分组标签

<thead>----------------表格头

      <tr>

           <th></th>------单元格标题

      </tr>

</thead>

<tbody>-------表格主体

       <tr>

           <td></td>

       </tr>

</tbody>

<tfoot>---------表格尾

<tr>

            <td></td>

</tr>

</tfoot>

一个表格中只能有一个头和尾，

表格头和表格尾默认高度是挤压的

表格列分组标签

<colgroup span="数值（指定几列为一组）"></colgroup>