likes
comments
collection
share

关于 table 的变幻

作者站长头像
站长
· 阅读数 46

文章导读：AI 辅助学习前端，包含入门、进阶、高级部分前端系列内容，当前是 HTML 的部分，瑶琴会持续更新，适合零基础的朋友，已有前端工作经验的可以不看，也可以当作基础知识回顾。

在前一篇文章中我们学习了表格的相关知识，今天学习表格属性相关的知识点，下面用一个表格显示表格的属性和描述。

关于 table 的变幻

这里直接给出一个表格示例:

<!DOCTYPE html>  
<html>  
    <head>  
    <style>  
    table {  
    border-collapse: collapse;  
    width: 100%;  
    border: 1px solid black;  
    }  
    th, td {  
    border: 1px solid black;  
    padding: 8px;  
    text-align: left;  
    }  
    </style>  
    </head>  
<body>  
  
<table border="1" cellpadding="10" cellspacing="5" width="80%" align="center"summary="这是一个示例表格">  
<caption>学生成绩表</caption>  
<thead>  
    <tr>  
        <th scope="col">姓名</th>  
        <th scope="col">科目</th>  
        <th scope="col">分数</th>  
    </tr>  
</thead>  
<tbody>  
    <tr>  
        <td headers="col1">Alice</td>  
        <td>数学</td>  
        <td>95</td>  
    </tr>  
    <tr>  
        <td headers="col1">Bob</td>  
        <td>语文</td>  
        <td rowspan="2">89</td>  
    </tr>  
    <tr>  
        <td headers="col1">Charlie</td>  
        <td>英语</td>  
    </tr>  
</tbody>  
<tfoot>  
    <tr>  
        <td colspan="2">平均分</td>  
        <td>91</td>  
    </tr>  
</tfoot>  
</table>  
  
</body>  
</html>

要嵌套表格，只需在一个表格的单元格中插入另一个表格即可。以下是一个示例：

<!DOCTYPE html>  
<html>  
    <head>  
    <style>  
    table {  
    border-collapse: collapse;  
    border: 1px solid black;  
    }  
    th, td {  
    border: 1px solid black;  
    padding: 8px;  
    text-align: left;  
    }  
    </style>  
    </head>  
<body>  
  
<table>  
<caption>员工信息表</caption>  
<thead>  
    <tr>  
        <th>编号</th>  
        <th>姓名</th>  
        <th>联系方式</th>  
        <th>职务</th>  
    </tr>  
</thead>  
<tbody>  
    <tr>  
        <td>001</td>  
        <td>Alice</td>  
        <td>alice@example.com</td>  
        <td>前端开发</td>  
    </tr>  
    <tr>  
        <td>002</td>  
        <td>Bob</td>  
        <td>bob@example.com</td>  
        <td>后端开发</td>  
    </tr>  
<tr>  
<td colspan="4">  
    <table>  
    <caption>项目信息</caption>  
  <thead>  
    <tr>  
    <th>项目名称</th>  
    <th>起始日期</th>  
    <th>截止日期</th>  
    </tr>  
  </thead>  
  <tbody>  
    <tr>  
        <td>项目A</td>  
        <td>2023-01-01</td>  
        <td>2023-06-30</td>  
    </tr>  
    <tr>  
        <td>项目B</td>  
        <td>2023-03-15</td>  
        <td>2023-09-30</td>  
    </tr>  
  </tbody>  
</table>  
</td>  
</tr>  
</tbody>  
</table>  
</body>  
</html>

在这个示例中，外部表格包含员工信息，而每个员工行的最后一个单元格中嵌套了一个内部表格，显示员工参与的项目信息。这是通过在一个单元格中插入另一个表格来实现的。

上面展示了表格中常用的属性，给出嵌套表格的用法，可以直接将上面的代码示例复制到编辑器运行看效果

最后啰嗦一句，好记性不如烂笔头，希望大家在学习的过程中养成做笔记的习惯，形成自己的知识体系。

转载自:https://juejin.cn/post/7371318721905098778
评论
请登录