如何使用 HTML 表格元素优雅地绘制数据表格？-html教程-PHP中文网

如何使用 HTML 表格元素优雅地绘制数据表格？

碧海醫心

发布： 2024-11-10 22:12:21

原创

691人浏览过

如何使用 HTML 表格元素优雅地绘制数据表格？

如何使用 html 优雅地绘制表格？

在构建网站时，经常需要在页面中呈现表格状数据。除了使用 <div> 元素逐个绘制表格格之外，HTML 还有更简洁优雅的方法来实现这一目标。

使用 HTML 表格元素

HTML 提供了 <table> 元素，专门用于创建表格结构。它包含以下子元素：

<caption>: 表格标题
<thead>: 表头行
<tbody>: 表主体（内容行）
<tfoot>: 表尾行

代码示例

Detail Admin响应式后台管理模板

Detail Admin响应式后台管理模板基于Bootstrap2.3.1制作，主题干净、优雅，适合任何后端应用程序。使用最新的HTML5和CSS3功能创建。内置Sass和侧重于简单和人性化。兼容PC端和手机移动端，全套模板，包括首页、登录页、排行榜、用户、表单、图库、日历、表格、图标、UI元素等21个后台模板页面。

184

查看详情

立即学习“前端免费学习笔记（深入）”；

以下是一个示例 HTML 表格代码，它创建了一个类似于图片中所示的课程表：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML 表格</title>
</head>
<body>
    <table border="1" width="800" align="center" cellpadding="10" cellspacing="0">
        <caption><h2>某小学一年级(三班)课程表</h2></caption>
        <thead>
        <tr bgcolor="#90ee90">
            <th>星期</th>
            <th>星期一</th>
            <th>星期二</th>
            <th>星期三</th>
            <th>星期四</th>
            <th>星期五</th>
        </tr>
        </thead>

        <tbody>
        <tr>
            <td rowspan="3" bgcolor="#f5deb3">上午<br>8:00 - 11:30</td>
            <td>语文</td>
            <td>数学</td>
            <td>美术</td>
            <td>体育</td>
            <td>音乐</td>
        </tr>
        <tr>
            <td>语文</td>
            <td>数学</td>
            <td>美术</td>
            <td>体育</td>
            <td>音乐</td>
        </tr>
        <tr>
            <td>语文</td>
            <td>数学</td>
            <td>美术</td>
            <td>体育</td>
            <td>音乐</td>
        </tr>

        <tr>
            <td rowspan="2" bgcolor="#e0ffff">下午<br>13:30 - 15:30</td>
            <td>语文</td>
            <td>数学</td>
            <td>美术</td>
            <td>体育</td>
            <td>音乐</td>
        </tr>
        <tr>
            <td>语文</td>
            <td>数学</td>
            <td>美术</td>
            <td>体育</td>
            <td>音乐</td>
        </tr>
        </tbody>

        <tfoot>
        <tr bgcolor="#d3d3d3">
            <td>备注:</td>
            <td colspan="5">周未家长应该多些时间陪同孩子学习</td>
        </tr>
        </tfoot>
    </table>
</body>
</html>

登录后复制

以上就是如何使用 HTML 表格元素优雅地绘制数据表格？的详细内容，更多请关注php中文网其它相关文章！