HTML的表格样式

HTML5

表格

<table>
    <tr>
        <th>1</th>(th为列标题 自动加粗居中)
        <th>2</th>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
    </tr>
</table>

属性:

宽度:width

高度:height

边框:border

边框色:bordercolor

背景:bgcolor

文本水平对齐:align=left/right/center

​ 注：在table时控制表格在浏览器水平方向对齐

     在tr 时控制行中的所有内容在表格中对齐

​     在td 时控制单元格中的内容在单元格中对齐

垂直对齐:valign=top/middle/bottom

注*：在table时不可用

     在tr 时控制一行内内容在垂直方向对齐

     在td 时控制单元格中的内容在垂直方向对齐

单元格间距:cellspacing

单元格与内容间距:cellpadding

（cellspacing和cellpadding给table）

合并单元格属性:

合并行(必须给td):colspan="合并单元格列数

合并列(必须给td):rowspan="合并单元格行数

 注:合并后需要把多余单元格删除

CSS3合并单元格边框

border-collapse:separate(默认值)/collapse(合并)；（必须给table添加）

无内容时单元格设置

empty-cells:show/hide;(定义是否隐藏空的单元格，仍占位置)

显示单元格行和列的算法

table-layout:auto/fixed;(自动表格布局，宽度由单元格中的最宽内容决定)

行分

<caption>表格标题</caption>

属性
 caption-side:top/right/bottom/left(只有top跟bottom兼容)

<thead>表头</thead>

<tbody>表体</tbody>

<tfoot>表尾</tfoot>

列分

<colgroup span="*"></colgroup >支持组分隔线

<col span="*"> 不支持组分隔线

组分割线(必须给table):
  rules="groups/rows(行)/cols(列)/all/none