HTML5基础表格标签

114 阅读1分钟

表格标签

1.表格的基本使用

(1)表格标签

table表格、table row 表格行、table data 表格数据

<table border="1">
    <tr>
        <td>A< /td>
        <td>B< /td>
        <td>C< /td>
        <td>D< /td>
    </tr>
    <tr>
        <td>E</td>
        <td>F</td>
        <td>G</td>
        <td>H</td>
    </tr>
    <tr>
        <td>I</td>
        <td>J</td>
        <td>K</td>
        <td>L</td>
    </tr>
</table>

image.png

(2)边框

为了让表格能够显示边框,< table>标签通常有border属性。

< table border="1"> ...... ...... < /table>

image.png

< table>的caption属性,是表格的标题,常常作为< table>的第一个子元素出现。

< table border="1">

< caption>我是表格的标题< /caption>

......

......

< /table>

2.复杂表格 

  单元格的合并

(1) colspan属性用来设置td或者th的列跨度

<table border="1">
    <tr>
        <td colspan="2">A</td>
        <td>B</td>
        <td>C</td>
    </tr>
    <tr>
        <td>D</td>
        <td colspan="3">E</td>
    </tr>
    <tr>
        <td>F</td>
        <td>G</td>
        <td>H</td>
        <td>I</td>
    </tr>
</table>

image.png

(2)rowspan属性用来设置td或者th的行跨度。

<table border="1">
    <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
    </tr>
    <tr>
        <td>E</td>
        <td rowspan="2">F</td>
        <td>G</td>
        <td  rowspan="3">H</td>
    </tr>
    <tr>
        <td>I</td>
        <td>J</td>
    </tr>
    <tr>
        <td>K</td>
        <td>L</td>
        <td>M</td>
    </tr>
</table>

image.png

单元格可以同时拥有 rowspan、colspan属性

< thead>标签定义表头。

< tbody>标签定义表核心内容。

< tfoot>标签定义表脚,通常是汇总行。