html-表格table基本构建(每天都要学习噢)

作为软件测试工程师,写页面主要是为了写工具啦,其中管理工具就少不了表格了,今天就来了解一下表格的基本组成吧!

作为软件测试工程师,写页面主要是为了写工具啦,其中管理工具就少不了表格了,今天就来了解一下表格的基本组成吧!


表格的基本标签有:table标签、thead标签、tbody标签、tfoot标签、tr标签、th标签、td标签


table标签为表格标签;thead标签为表格的表头;tbody标签表示表格主体;tfoot标签为表格的页脚内容(使用频率不高);tr标签定义表格中的行;th标签定义表格内的表头单元格,包含头部信息;td标签定义标准单元格,包含数据。


代码如下:


<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <title>表格构建</title>

</head>

<body>

    <table>

        <thead>

            <tr>

                <th>Name</th>

                <th>Position</th>

                <th>Office</th>

                <th>Age</th>

                <th>Start date</th>

                <th>Salary</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>Tiger Nixon</td>

                <td>System Architect</td>

                <td>Edinburgh</td>

                <td>61</td>

                <td>2011/04/25</td>

                <td>$320,800</td>

            </tr>

            <tr>

                <td>Garrett Winters</td>

                <td>Accountant</td>

                <td>Tokyo</td>

                <td>63</td>

                <td>2011/07/25</td>

                <td>$170,750</td>

            </tr>

            <tr>

                <td>Garrett Winters</td>

                <td>Accountant</td>

                <td>Tokyo</td>

                <td>63</td>

                <td>2011/07/25</td>

                <td>$170,750</td>

            </tr>

            <tr>

                <td>Ashton Cox</td>

                <td>Junior Technical Author</td>

                <td>San Francisco</td>

                <td>66</td>

                <td>2009/01/12</td>

                <td>$86,000</td>

            </tr>

        </tbody>

        <tfoot>

            <tr>

                <th>Name</th>

                <th>Position</th>

                <th>Office</th>

                <th>Age</th>

                <th>Start date</th>

                <th>Salary</th>

            </tr>

        </tfoot>

    </table>

</body>

</html>


 运行后的页面如图:

2172656-20210401170249047-1834073431.png

  • 发表于 2021-04-06 12:29
  • 阅读 ( 751 )
  • 分类:测试开发

你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
anne
anne

7 篇文章

作家榜 »

  1. admin 10 文章
  2. anne 7 文章
  3. joelee 2 文章
  4. chenchen 1 文章
  5. CJ777 1 文章
  6. harry 1 文章
  7. AlLTyjrDKb 0 文章
  8. virmMUTzPANJXY 0 文章