从头开始学HTML —— 表格

版权声明：本文为博主原创文章，未经博主允许不得转载。如有错误，欢迎评论指正，谢谢！ https://blog.csdn.net/z_e_n_g/article/details/81087662

表格标签

如何定义一个表格

table标签，用于定义一个表格，在table标签里面再去写其他的表格标签

<table>
...
</table>

表格标签及其说明

标签	说明
<table>	定义表格
<caption>	定义表格标题
<tr>	定义表格的行
<td>	定义表格单元格
<thead>	定义页眉(表头)
<tbody>	定义表体
<tfoot>	定义页脚
<colgroup>	定义表格列的分组

thead,tbody,tfoot的书写顺序是：

<thead></thead>
<tfoot></tfoot>
<tbody></tbody>

表格的HTML属性

属性	说明
width	表格宽度
height	表格高度
border	表格边框
cellpadding	单元格文字与边框的补白
cellspacing	单元格的间隙
rules	规定内侧边框可见，可选值groups/rows/cols/all/none
align	整个表格的对齐方式，是表格不是单元格
colspan	合并列
rowspan	合并行

rules属性：
1. none: 没有内侧边框
2. rows: 行与行之间有内测边框
3. colos: 列与列之间有内测边框
4. all: 行与行，列与列之间都有内测边框
5. groups: 列祖与列祖之间，行组与行组之间有内侧边框

表格的css属性

属性	可选值	说明
border-spacing	数值	单元格间距,该属性给table添加,边框合并时无效
border-collapse	separate/collapse	合并相邻单元格边框,该属性table添加,separate(边框分开)默认值,collapse(边框合并)
empty-cells	show/hide	当单元格无内容时,是否显示该单元格的边框区域,边框合并时无效
caption-side	top/right/bottom/left	caption对象放于表格的哪个位置

代码示例：
css代码示例：

table{
   border-spacing: 10px;/*单元格间距10px，边框合并无效*/
   border-collapse: collapse;/*边框合并，边框合并无效*/
}

HTML代买示例：

<table border="1" align="center" cellpadding="10" cellspacing="10" rules="groups">
    <caption>表格标题</caption>
    <colgroup span="1"></colgroup><!-- 分第1个组，此组1列 -->
    <colgroup span="3"></colgroup><!-- 分第2个组，此组3列 -->
    <colgroup span="2"></colgroup><!-- 分第3个组，此组2列 -->
    <thead>
        <tr>
            <td colspan="7">页眉</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td colspan="2">单元格</td>
            <td rowspan="2">单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="7">页脚</td>
        </tr>
    </tfoot>
</table>

上面的代码若要看cellspacing属性的作用，请把rules属性删掉
若要看colspan和rowspan的作用，请把rules=”groups”改为rules=”all”