HTML 表格table

HTML table

　　用处：用于展示数据

　　语法：

<table align="center" border="1" cellpadding="0" cellspacing="0" width="" heigth="">
    <thead>
    <tr>
        <th></th>
    </tr>
    </thead>
　　<tbody>
    <tr>
        <td></td>
        ...
    </tr>
　　</tbody>
    ...
</table>

　　说明：

　　1. <table>是用于定义表格的标签

　　2. <tr>用于定义表格中的行，必须嵌套在<table></table>中， table row

　　3. <td>用于定义表格中的单元格，必须嵌套在<tr></tr>中，td表示表格数据（table data）

　　4. <th>用于定义表格中的表头，必须嵌套在<tr></tr>中，非必须，th表示表格中的表头（table data）

　　表头特点：内容加黑、居中。

　　表格属性：

属性名	属性值	描述
align	left、center、right	规定表格相对周围元素的对齐方式
border	1或""	规定表格单元是否有边框，默认为""，没有边框
cellpadding	像素值	规定单元格和内容之间的距离，默认为1像素
cellspacing	像素值	规定单元格之间的距离，默认为2像素
width	像素值或百分比	规定表格的宽度

 

 

 

 

 

 

 

表格结构标签：

　　使用场景：因为表格可能很长为了更好的表示表格的语义，将表格划分为头部和主体两部分

　　　　　　　<thead>标签表示表格的头部，<tbody>表示表格的主体，这样可以更好的分清表格结构

合并单元格：

　　1. 合并单元格方式

　　　　跨行合并：rowspan=“合并单元格的个数”，右侧为目标单元格

　　　　跨列合并：colspan=“合并单元格的个数”，左侧为目标单元格

　　2. 目标单元格

　　　　跨行合并：右侧为目标单元格

　　　　跨列合并：左侧为目标单元格

　　　　代码放在目标单元格上

　　3. 合并单元格的步骤

　　　　是跨行还是跨列合并，合并的单元格个数

　　　　确定目标单元格，把代码放到目标单元格上

　　　　删除被合并的单元格