HTML5表格常用属性分析

表格的结构分解

• table：表格

• tr：行 一个tr表示一行

• td：列 一个td代表一列

• 表头：th

表格的常用属性

• 边框：border

  • <table border =“">

• 单元格间距：cellspacing

  • <table border ="" cellspacing ="" >

• 单元格填充：cellpadding

  • 单元格内容与单元格边框的距离

  • <table border = "" cellspacing="" cellpadding="">

• 单元格行高：height

  • 给tr标签设置，对于在同一行单元格，设置了不同的行高，以最大值来设置

  • <tr height = ""></tr>

• 单元格列宽：width

  • 给td标签设置，对于在同一列单元格，设置了不同的行高，以最大值来设置

  • <td width=""></td>

• 单元格背景色：bgcolor

  • 设置单元格背景色

  • 可以给整个表格设置，也可以给某个行设置，也可以给某个单元格设置

• 单元格边框颜色：bordercolor

  • 只能在table里面使用

  • 只能给整个表格设置

• 单元格背景图片：background

  • background=“图片地址”

  • 不能和bgcolor共存，background会覆盖bgcolor

• 表格的对齐方式：align=“对齐方式”

  • 左对齐：left

  • 右对齐：right

  • 居中对齐：center

• 快选操作

  • 按住alt 拖动鼠标

• 合并单元格

  • 列合并

    • colspan=“要合并的数目”

    • 将合并后多余的单元格删除

  • 行合并

    • rowspan=“要合并的数目”

    • 将合并后多余的单元格删除

使用快捷键生成表格

• table[border="边框大小" cellspacing="距离"]>tr[height="行高"]*行数>td[width="列宽"]{$}*列数

  • 属性[]

  • 值{}，跟在td后面

  • 表达式之间不要使用空格

表格补充

• 表头

  • <thead>

    <tr>

    <th>表头内容</th>

    </tr>

    </thead>

    • 表头th与td区别就是会自动加粗并居中

• 主体

  • <tbody></tbody>

• 页脚

  • <tfont></tfont>

• 列分组标签：

  • <colgroup>

    <col span="组数" style="background-color:颜色">

    </colgroup>

  • <col style="background-color:颜色">