HTML表格(table)实例

2023-11-05

实例1:课程表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课程表</title>
</head>
<body>
    <table border="1" width="60%" bgcolor="#e9faff" cellpadding="2">
        <caption>课程表</caption>
        <tr align="center">
            <td colspan="2">时间\日期</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>

        <tr align="center">
            <td rowspan="2">上午</td>
            <td>9:30-10:15</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
        </tr>

        <tr align="center">
            <td>10:25-11:10</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
        </tr>

        <tr>
            <td colspan="7">&nbsp;</td>
        </tr>

        <tr align="center">
            <td rowspan="2">下午</td>
            <td>14:30-15:15</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
        </tr>

        <tr align="center">
            <td>15:25-16:10</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
        </tr>
    </table>
</body>
</html>

实例2:精美表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>漂亮的表格</title>
    <style>
        .biaoti{
            font-family: "Microsoft Himalaya";
            font-size: 26px;
            border-bottom:1px dashed #CCCCCC;
            color: #255e95;

        }

        .btgn{
            font-family: "Microsoft YaHei UI";
            font-size: 16px;
            color: #255e95;
            background-color: #e9faff;
            text-align: center;
        }
    </style>
</head>
<body>
    <table width="60%" border="0">
        <tr>
            <td align="center" class="biaoti" height="60">受理员业务统计表</td>
        </tr>
        <tr>
            <td align="right" height="25">2017-01-02---2017-05-02</td>
        </tr>
    </table>

    <table width="60%" border="1" cellspacing="1" cellpadding="4">
        <tr>
            <td colspan="2" class="btgn" rowspan="2">受理员</td>
            <td rowspan="2" class="btgn">受理数</td>
            <td rowspan="2" class="btgn">自办数</td>
            <td rowspan="2" class="btgn">直接解答</td>
            <td colspan="2" class="btgn">拟办意见</td>
            <td colspan="2" class="btgn">返回修改</td>
            <td colspan="3" class="btgn">工单类型</td>
        </tr>

        <tr>
            <td class="btgn">同意</td>
            <td class="btgn">比例</td>
            <td class="btgn">数量</td>
            <td class="btgn">比例</td>
            <td class="btgn">建议件</td>
            <td class="btgn">诉求件</td>
            <td class="btgn">咨询件</td>
        </tr>

        <tr>
            <td rowspan="6">受理处</td>
            <td>王艳艳</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>

        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>

        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>

        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>

        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>

        <tr>
            <td>总计</td>
            <td>20</td>
            <td>20</td>
            <td>20</td>
            <td>20</td>
            <td>20</td>
            <td>20</td>
            <td>20</td>
            <td>20</td>
            <td>20</td>
            <td>20</td>
        </tr>

        <tr>
            <td rowspan="6">话务组</td>
            <td>王艳艳</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>

        <tr>
            <td>王艳艳</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>

        <tr>
            <td>王艳艳</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>

        <tr>
            <td>王艳艳</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>

        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>

        <tr>
            <td>总计</td>
            <td>20</td>
            <td>20</td>
            <td>20</td>
            <td>20</td>
            <td>20</td>
            <td>20</td>
            <td>20</td>
            <td>20</td>
            <td>20</td>
            <td>20</td>
        </tr>


    </table>
</body>
</html>

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

HTML表格(table)实例 的相关文章

  • JavaScript;使用画布在图像上添加文本并保存到图像

    我只想制作一个页面 您可以在其中输入文本并将其添加到所选图像上并将其另存为新图像 我尝试了几种方法 但没有运气
  • 控制 HTML 中的图像加载顺序

    有没有办法控制网页上图像的加载顺序 我正在考虑尝试通过首先加载轻量级 加载 图形来模拟预加载器 有任何想法吗 Thanks 使用 Javascript 并填充图像src属性稍后 这 告诉浏览器链接到页面上的 URL 因此不会向服务器发送请求
  • 如何在使用“document.createElement()”方法创建单元格后立即在 JavaScript 中设置单元格宽度?

    我已经使用 document createElement td 方法在 html 页面中为动态表格创建了单元格 现在希望用一些不同的值设置每个单元格的宽度 尝试过 cell width width 但它不起作用 我怎样才能实现它 Use s
  • Facebook 分享不显示来自开放图元标签的图像

    我正在尝试将 Facebook 共享按钮集成到我雇主的网站 标题 网址 描述 简介均显示正确 但未附加任何图像 当共享对话框打开时 图像容器会闪烁 然后消失 就好像 facebook 正在尝试处理图像但失败一样 我正在使用 og image
  • 从 Google 电子表格中的列填充 HTML 下拉菜单

    我是 gs 的新手 所以这应该不难 我有一个 Google 电子表格 其中一列中有值 假设 A 列 我使用 gs 创建了一个自定义菜单 用户将在其中选择一个选项 单击其中一个选项 新组件 将出现一个弹出窗口 其中包含一个下拉菜单 用户应从其
  • div 元素中的文本在 Firefox 中位于水平对齐的 span 元素之上

    我正在编写一个 Web 应用程序 其中支持票证显示为左侧的票证 ID 作为静态文本 其余字段 描述 严重性 持续时间 状态 报告者 在右侧显示为固定文本中的滚动文本 大小视口 我从一个 span 包含票证 ID 和视口 div 包含第二个
  • 如何使用 JQuery 提取嵌套 HTML 中的文本?

    我这里有 HTML 代码 div class actResult style border solid table tbody tr td Order Number td td 1 td tr tr td Customer Number t
  • 高度在 IOS (iphone) 上无法正常工作

    我已经创建了this https codepen io salman15 project live DWbWpo Codepen 上的网站 在尝试使其响应所有平台时 我遇到了问题 看起来单个 div 覆盖了整个页面 仅在 IOS 上 并且并
  • 淡出图像上的文字

    我知道如何使用 CSS 透明渐变淡出纯色背景上的文本 但是如何才能淡出图像背景上的文本呢 这是我想要的一个例子 注意 我需要像图像一样的静态效果 而不是动态过渡 CSS mask image可能是您正在寻找的 div background
  • Python Flask 不更新图像[重复]

    这个问题在这里已经有答案了 这里有一些关于图像的 Flask 问题 但没有一个能解决我的问题 我有一个应用程序可以创建图像 保存它 然后显示它 一次 它应该多次执行此操作 每次更改图像时 它应该加载新图像 它不是 它只显示与其显示的文件名关
  • 当页面加载图像时,它是只加载一次,还是每次在标记中找到它时加载?

    当页面加载图像时 它是只加载一次 还是每次在标记中找到它时加载 那么 jquery 呢 附加一个 img 会导致它再次重新加载吗 我问这个问题是因为我有高分辨率图像 但需要在标记的许多情况下使用它 img src hello jpg img
  • 如何获取 JavaScript 中已经找到的 div 中特定类的元素?

    我需要的是找到一个具有特定 id 的 div 然后找到其中具有特定类的任何元素 并使第一个元素不可见 我努力了 var hostDivName theHostDivName var hostDiv document getElementsB
  • 如何使用 Angular 创建 n 个可打印页面?

    嗯 我搜索了一下 没有找到类似的东西 我想知道如何使用 Angular 创建可打印内容 跳转到页面末尾并打印更多内容 如何强制内容始终适合特定尺寸 例如 PDF 我需要 Angular 来执行此操作吗 如果不是 HTML 我可以迭代 PDF
  • HTML 电子邮件 - Outlook 2013 中图像之间的间隙

    I m composing an HTML email which looks fine in every major email client except Outlook 2013 which is adding vertical ga
  • 如何在移动设备上使用纯 JavaScript 放大点击的图像

    我正在尝试创建单击时会放大的缩略图 目标是将选定的缩略图自身放大到设备的最大宽度 如果单击另一个缩略图 其图像将替换当前所选缩略图的图像 同一时间只能放大一张缩略图 图像应跨越设备的最大宽度 另外 我尝试使用纯 JavaScript 无 j
  • 导航时 Internet Explorer 9 中的图像闪烁白色

    我正在使用 XHTML 1 1 CSS 3 0 开发一个网站 但 Internet Explorer 9 出现问题 每次我将页面从 主页 更改为 功能 时 各种图像在填充之前都会闪烁 白色 出现这种 白色闪烁 每次页面更改时 我见过很多堆栈
  • div 准备好后如何调用函数?

    我的 javascript 文件中有以下内容 var divId divIDer jQuery divId ready function createGrid Adds a grid to the html html 看起来像这样 div
  • 如何实现Contenteditable属性的Ctrl+A功能?

    我正在尝试为用户显示带有一些示例代码的 div 我希望他们能够在 div 内部进行选择并使用 Ctrl A 选择所有示例代码 但我不希望他们能够编辑实际文本 以免意外删除一点 然后它不会工作 我现在通过 div 上的 contentedit
  • 使用添加“title”属性换行符 到 JSX 元素

    我知道我可以在 HTML 中添加换行符title属性使用 10 但 React 避免了这一点 例如 这是一个 React 组件 其中包含一个标准的 未由 React 处理的组件title包含换行符的属性 并且可以在浏览器中看到效果 但是如果
  • html 表:thead 与 th

    它看起来像 根据示例这一页 http www w3 org TR html4 struct tables html无论如何 如果您使用THEAD 则不需要使用TH 真的吗 如果是这样 THEAD 与 TH 相比有何优点 缺点 The the

随机推荐