html简单表格实例

HTML表格由<table>标签来定义，每个表格均有若干行（由<tr>标签定义），每行被分割为若干单元格（由<td>标签定义），字母td指表格数据（table data），即数据单元格的内容。

1.相关标签、属性

标签	描述
`<table>`	定义表格
`<th>`	定义表格的表头单元，加粗居中
`<tr>`	定义表格的行
`<td>`	定义表格单元
`<caption>`	定义表格标题
`<thead>`	定义表格的表头
`<tbody>`	定义表格的主体
`<tfoot>`	定义表格的表尾

属性	值	描述
`rowspan`	number	设置单元格可横跨的行数
`colspan`	number	设置单元格可横跨的列数

2.实例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 表格<table> -->
    <table border="1">
        <!-- 标题<caption> -->
        <caption>商品</caption>
        <!-- 表头<thead> -->
        <thead>
            <!-- 行<tr> -->
            <tr>
                <!-- 表头单元<th> -->
                <th>分类</th>
                <th>ID</th>
                <th>品名</th>
                <th>单价</th>
                <th>数量</th>
                <th>金额</th>
            </tr>
        </thead>
        <!-- 表主体<tbody> -->
        <tbody>
            <tr>
                <!-- 表格单元 <td> -->
                <!-- rowspan 横跨3行 -->
                <td rowspan="3">水果</td>
                <td>001</td>
                <td>苹果</td>
                <td>6.99</td>
                <td>1</td>
                <td>6.99</td>
            </tr>
            <tr>
                <!-- <td>水果</td> -->
                <td>002</td>
                <td>香蕉</td>
                <td>7.68</td>
                <td>1</td>
                <td>7.68</td>
            </tr>
            <tr>
                <!-- <td>水果</td> -->
                <td>003</td>
                <td>火龙果</td>
                <td>5.99</td>
                <td>1</td>
                <td>5.99</td>
            </tr>
            <tr>
                <!-- rowspan 横跨4行 -->
                <td rowspan="4">蔬菜</td>
                <td>004</td>
                <td>上海青</td>
                <td>1.98</td>
                <td>1</td>
                <td>1.98</td>
            </tr>
            <tr>
                <!-- <td>蔬菜</td> -->
                <td>005</td>
                <td>空心菜</td>
                <td>3.98</td>
                <td>1</td>
                <td>3.98</td>
            </tr>
            <tr>
                <!-- <td>蔬菜</td> -->
                <td>006</td>
                <td>西红柿</td>
                <td>4.98</td>
                <td>1</td>
                <td>4.98</td>
            </tr>
            <tr>
                <!-- <td>蔬菜</td> -->
                <td>007</td>
                <td>土豆</td>
                <td>2.58</td>
                <td>1</td>
                <td>2.58</td>
            </tr>
        </tbody>
        <!-- 表尾<tfoot> -->
        <tfoot>
            <!-- colspan 横跨4列 -->
            <th colspan="4">总计</th>
            <td>7</td>
            <th>34.18</th>
        </tfoot>
    </table>
</body>
</html>

效果图：
html简单表格实例

html简单表格实例

html简单表格实例

1.相关标签、属性

2.实例代码

相关文章