HTML第七章 表格标签

7. 表格标签

7.1 表格标签基础

• 表的格式：

  table（表格）

  ​ tr（行）

  ​ th（表头，样式会加粗）

  ​ td（列）

• 表格常用属性

  属性	说明
  border	边框
  width/height	宽/高
  align = center/top/bottom/left/right	对齐方式
  cellpadding	表格数据到单元格边距
  cellspacing	单元格间距
  bgcolor	背景颜色
  background	背景图片

  块级元素处时所占位置宽度为整个屏幕但高度为元素内容所占位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格标签基础</title>
</head>
<body>
    <table border="1" width="1000px" height="300px" align="center" cellspacing="50px" cellpadding="100px">
        <tr bgcolor="pink">
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <tr background="./cat.jpg">
            <td>张三</td>
            <td>18</td>
            <td>男</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>19</td>
            <td>女</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>20</td>
            <td>男</td>
        </tr>
    </table>
</body>
</html>

7.2 表格头体尾

• 表格头 thead
• 表格主体 tbody
• 表格尾部 tfoot

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格头体尾标签</title>
</head>
<body>
    <table border="1" width="1000px" height="300px" align="center">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>18</td>
                <td>男</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>19</td>
                <td>女</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3">共100人</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

7.3 表格嵌套

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格的嵌套</title>
</head>
<body>
    <table border="1" width="1000px" height="300px" align="center">
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>
                <table border="1" width="50px" height="100px" align="center">
                    <tr>
                        <td>1</td>
                        <td>2</td>
                    </tr>
                </table>
            </td>
            <td></td>
        </tr>
    </table>
</body>
</html>

7.4 表格合并

作用：主要用于布局，早期布局使用表格处理

• 跨行（rowspan)
• 跨列（colspan)
• 案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格合并单元格</title>
</head>
<body>
    <table border="1px" width="1000px" height="500px" align="center">
        <tr>
            <td colspan="4" rowspan="1" bgcolor="blue"></td>
            <!-- <td></td>
            <td></td>
            <td></td> -->
        </tr>
        <tr>
            <td rowspan="3" bgcolor="orange"></td>
            <td colspan="2" bgcolor="green"></td>
            <!-- <td></td> -->
            <td></td>
        </tr>
        <tr>
            <!-- <td></td> -->
            <td></td>
            <td bgcolor="red" rowspan="2" colspan="2"></td>
            <!-- <td></td> -->
        </tr>
        <tr>
            <!-- <td></td> -->
            <td></td>
            <!-- <td></td>
            <td></td> -->
        </tr>
    </table>
</body>
</html>