HTML表格设计

最新推荐文章于 2024-04-26 15:36:17 发布
最新推荐文章于 2024-04-26 15:36:17 发布
阅读量568 收藏 2
点赞数
原文链接：https://blog.csdn.net/hj1993/article/details/81287766
版权 
<!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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62

实例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>
宝贝啊！
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
纯css打造漂亮的html表格
house_of_web的博客
04-14 3万+
纯css漂亮表格制作兼容各种版本浏览器
简单好看的html表格模板,四款好看实用的css表格样式分享
weixin_32098457的博客
06-07 6471
!----=""{font-,,sans-;font-;#333333;border-width:1px;border-color:#999999;border-collapse:collapse;}table.hovertableth{background-color:#c3dde0;border-width:1px;padding:8px;border-style:solid;border-c...
html表格（详解网页表格的制作）
最新发布
百赢出品，必属精品
04-26 1849
HTML 表格由 标签来定义。HTML 表格是一种用于展示结构化数据的标记语言元素。每个表格均有若干行（由 标签定义），每行被分割为若干单元格（由 标签定义），表格可以包含标题行（）用于定义列的标题。tr：tr 是 table row 的缩写，表示表格的一行。td：td 是 table data 的缩写，表示表格的数据单元格。th：th 是 table header的缩写，表示表格的表头单元格。
html、css 实现一个漂亮的表格
热门推荐
Zhangguohao666的博客
12-06 8万+
利用html、css制作一个美观、大方的表格。（简单，易上手）
教你如何用原生css和html搭建一个好看的Table表格
抗争小青年的博客
11-27 8242
大家在学习标签的时候，可能还没有接触css，所以你做出来的表格可能是这样的：或者是这样的：大家有想过自己做一个漂亮的表格吗？我知道大家在做项目的时候大概率会去当下流行的UI框架中找已经封装好的表格来使用，就像layui的表格：但大家真的考虑过如何写一个好看的表格吗？表格背景色的交替变化大家有考虑过吗？大家亲手实现过吗这可是博主面试字节跳动时候的面试题啊！(虽然失败告终，还是自己太菜)。这些都是非常重要的基础，这篇博文，跟着博主一起做一个好看的表格，拒绝使用框架。
HTML表格（HTML 表格的使用，收藏这一篇就够了）
weixin_47139649的博客
10-15 6万+
HTML基础之表格 文章目录HTML基础之表格1. 表格的定义2. 表格的标签3. 单元格边框(border)4. 合并单元格4.1 合并行单元格(colspan)4.2 合并列单元格(rowspan)5. 表格格式设置5.1 单元格的对齐（align）（居中，左对齐，右对齐）5.2. 背景色&图片（bgcolor & background）5.2.1 单元格背景色&图片5.2.2 表格背景色&图片5.3 单元格的边距（cellpadding）5.4 单元格间的距离(cel
漂亮的html表格
尘墨
04-27 2905
原文： http://www.textfixer.com/resources/css-tables.php#css-table01    一个像素边框的表格： Info Header 1 Info Header 2 Info Header 3 Text 1A Text 1B Text 1C Text 2A Te
html表格设计
08-14
html表格设计，最基础，最基本的，嘻嘻
基于HTML的表格设计
09-16
这是一个基于html5的会议管理系统的原型设计,表格设计，，，十分简单的 这是一个基于html5的会议管理系统的原型设计,表格设计，，，十分简单的 这是一个基于html5的会议管理系统的原型设计,表格设计，，，十分简单的
HTML5制作表格样式
09-27
在HTML5中，创建表格是一种常见的数据展示方式。本篇文章将详细介绍如何使用HTML5来制作一个美观、易于理解的表格，并通过CSS进行样式定制，使其更具...学习并掌握这些HTML和CSS技巧，将有助于提升你的网页设计能力。
HTML表格布局实际使用详解
09-28
HTML表格布局是网页设计中的一种基础元素，尤其适用于数据展示和表单输入。虽然现代网页设计倾向于使用CSS布局，但在特定场景下，表格仍然具有其不可替代的优势。本篇文章将深入探讨HTML表格的实际使用和布局计算。 ...
漂亮的表格 HTML表格
07-01
漂亮的表格html,鼠标移动到表格上会自动通过CSS效果选中一行以及一列。
HTML中表格的制作
04-26
NULL 博文链接：https://foreach4.iteye.com/blog/2348467
漂亮的将后台数据成表格显示到HTML页面中
11-25
后台数据写成 前台HTML自动显示成表格了...并且无论表头有多少标题都可以扩展，直接导入进eclipse就能用.....
HTML表格代码的示例
12-20
这是利用HTML表格代码制作出来的一个表格。
html 简单表格制作（看了它足以应对大部分表格）
yunduan__的博客
11-14 1万+
首先制作一个表格我们要知道一张简单表格是由二部分组成分别是表头，表身。 下面就是一个简单的表格。 每个表格由 table 标签开始。 每个表格行由 tr 标签开始。 每个表格数据由 td 标签开始。如下图 <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> &lt...
HTML设计表格
zxh996的博客
07-02 1644
HTML设计表格前言一、HTML中表格元素的认识二、表格案例1.案例代码及效果图2.案例代码分析总结 前言 前端的学习中HTML中的表格相信大家也了解了，这是一块简单而又易乱的知识点，所以我为大家简单的梳理了一下知识点，仅供参考学习。 一、HTML中表格元素的认识 二、表格案例 1.案例代码及效果图 代码如下（示例）： <table border="1"> <caption>我的课表</caption> <thead> <t
HTML基础 - HTML表格
qq_45383769的博客
04-07 1万+
HTML基础 - HTML表格 1.无表头的表格 <table> <tr> <td> <table>标签代表的是表 <tr>标签代表的是行 <td>标签代表的是列 在html页面中的表格来着，就和excl的表格不一样喽，咱自己有自己的规则： 这就是没有表头，也就是最简单的一个表格。（设置了边框为1 ：border= “1”） 2.有表头的表格 <th> <th>表示就是表头了哦，字体是加粗居中显示的
html表格优秀作品,40多个漂亮的网页表单设计实例
weixin_42523529的博客
05-30 3206
网页表单是访问者与网站拥有者主要的沟通途径。返馈总是重要的，这就是我们为什么确保网页表单容易理解和使用起来比较直观的原因，尽管如此，甚至在形式设计中它也担当创意中的有效部分。网页表单并非都是乏味的，使用css或flash,你能确保它们具有吸引力且有效。要注意，你需要提出一些独特且有趣东西-表单的符号、图标、颜色、位置或者尺寸是被经常用来获得有趣设计解决方案。我们已经寻找了一些例子，并且已经找到了他...
html表格设计网页布局
05-30
HTML表格可以用于设计网页布局。以下是一些示例： 1. 简单的两列布局： ``` <table> <tr> <td>左侧栏</td> <td>主内容区</td> </tr> </table> ``` 2. 三列布局，左右列固定宽度，中间列自适应宽度： ``` <table> <tr> <td style="width: 20%">左侧栏</td> <td style="width: 60%">主内容区</td> <td style="width: 20%">右侧栏</td> </tr> </table> ``` 3. 两列布局，左侧栏固定宽度，右侧栏自适应宽度： ``` <table> <tr> <td style="width: 200px">左侧栏</td> <td>主内容区</td> </tr> </table> ``` 以上示例仅为参考，实际应用时需要根据具体需求进行调整。同时，使用HTML表格进行布局也有一些缺点，例如不易实现响应式布局，建议结合CSS布局进行使用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值