8、HTML表格

2023-11-26 22:20:40

HTML表格

表格的组成结构

< table > 表格根标签

< tr > 行（table row）

< th > 列的标题（table head）

< td > 列的内容（table data）

例子：

效果：

我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<table border="1">
    <tr>
        <th>部门</th>
        <th>姓名</th>
        <th>性别</th>
        <th>工资</th>
    </tr>
    <tr>
        <td>开发组</td>
        <td>小明</td>
        <td>男</td>
        <td>1w</td>
    </tr>
    <tr>
        <td>开发组</td>
        <td>小明明</td>
        <td>女</td>
        <td>1w</td>
    </tr>
    <tr>
        <td>开发组</td>
        <td>小小明</td>
        <td>男</td>
        <td>1w</td>
    </tr>
</table>
</body>
</html>

我的效果：

合并行&合并列

利用colspan属性和rowspan属性

colspan属性——规定了单元格可横跨的列数

rowspan属性——规定了单元格可横跨的行数

合并前：

合并前代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<table border="1">
    <tr>
        <th>部门</th>
        <th>姓名</th>
        <th>性别</th>
        <th>工资</th>
    </tr>
    <tr>
        <td>开发组</td>
        <td>小明</td>
        <td>男</td>
        <td>1w</td>
    </tr>
    <tr>
        <td>开发组</td>
        <td>小明明</td>
        <td>女</td>
        <td>1w</td>
    </tr>
    <tr>
        <td>开发组</td>
        <td>小小明</td>
        <td>男</td>
        <td>1w</td>
    </tr>
    <tr>
        <td>开发组</td>
        <td>工资合计</td>
        <td>工资合计</td>
        <td>3w</td>
    </tr>
</table>
</body>
</html>

合并前效果

合并列：

合并列的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<table border="1">
    <tr>
        <th>部门</th>
        <th>姓名</th>
        <th>性别</th>
        <th>工资</th>
    </tr>
    <tr>
        <td>开发组</td>
        <td>小明</td>
        <td>男</td>
        <td>1w</td>
    </tr>
    <tr>
        <td>开发组</td>
        <td>小明明</td>
        <td>女</td>
        <td>1w</td>
    </tr>
    <tr>
        <td>开发组</td>
        <td>小小明</td>
        <td>男</td>
        <td>1w</td>
    </tr>
    <tr>
        <td>开发组</td>
        <td colspan="2">工资合计</td><!--这一项横跨两列(占两列)，下一列中的此项内容就不用写了-->
        <td>3w</td>
    </tr>
</table>
</body>
</html>

合并列后的效果

合并行：

合并行的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<table border="1">
    <tr>
        <th>部门</th>
        <th>姓名</th>
        <th>性别</th>
        <th>工资</th>
    </tr>
    <tr>
        <td rowspan="2">开发组</td><!--这一项横跨两行(占两行)，下一行中的此项内容就不用写了-->
        <td>小明</td>
        <td>男</td>
        <td>1w</td>
    </tr>
    <tr>
        <td>小明明</td>
        <td>女</td>
        <td>1w</td>
    </tr>
    <tr>
        <td>开发组</td>
        <td>小小明</td>
        <td>男</td>
        <td>1w</td>
    </tr>
    <tr>
        <td>开发组</td>
        <td colspan="2">工资合计</td><!--这一项横跨两列(占两列)，下一列中的此项内容就不用写了-->
        <td>3w</td>
    </tr>
</table>
</body>
</html>

合并行后的效果

码农公寓

HTML表格

相关文章