Html——表格table总结

目录

表格标签组合规范

         表格的单元格合并

         表格相关属性

• 表格标签组合规范

 <table border="1">
        <!-- thead 表格的页眉 -->
        <thead>
            <!-- tr 定义表格的行 -->
            <tr>
                <!-- th 表头 -->
                <th></th>
                <th></th>
                <th></th>
            </tr>
        </thead>
<!-- tbody 表格的主体 -->
        <tbody>
            <tr>
                <!-- td 单元格 -->
                <td>row 1, cell 1</td>
                <td>row 1, cell 2</td>
            </tr>
            <tr>
                <td>row 2, cell 1</td>
                <td>row 2, cell 2</td>
            </tr>
        </tbody>
        
    </table>

• 表格的单元格合并

rowspan：合并行（上下合并）；

注意：合并行要记得删除其他行中对应列的单元格，以避免单元格多出来，溢出于表格；

colspan：合并列（左右合并）；

注意：合并列删除的是同一行的的所要合并的单元格的个数；

• 表格相关属性

align 使用：

规定表格相对周围元素的对齐方式；

（1）在table表格中使用——表格置于某容器的对齐方式；

（2）在tr(表格的行）中使用——表格行的内容的对齐方式；

（3）在tbody（表格的主体）中使用——tbody中的内容居中；

注意：

1、使用tbody和thead 可以使代码在对tbody标签的属性进行修改，就能对表格的整行单元格的属性进行修改，可以省去对tr进行逐一修改的麻烦；

2、可以控制表格分行下载，从而提高下载速度。（网页的打开是先将表格的的内容全部下载完毕后，才显示出来，分行下载可以先显示部分内容，这样会减少用户等待时间）；

边框：

规定表格单元格是否需要拥有边框——默认为""(表示没有边框）

表格边距：

cellpadding:表示单元格边沿与内容之间的空白，默认1px;

cellspacing:表示单元格之间的空白，默认为2px;

宽高：

width：表格的宽度，属性值为像素和百分比；

height:表格的高度，属性值为像素和百分比；

注意：表格的宽高一般不在htmlbiao标签中使用；