技术知识分享

分享几个好看的html表格代码 – typecho可用

搬瓦工优惠码

经常逛博客的应该都知道,小夜大屌MM用的typecho有漂亮的表格。小白也曾经找过插件。始终没有找到。今天看开心小站长的博客里有html表格说明。但是没有细说。他大概也只是为了给自己写笔记把。既然挺好看的,小白就抄过来。写个详细点的教程。


使用方法:

  • 添加CSS到自己任意加载的CSS中;
  • 在写文章的时候使用代码。

1.VPS配置表表格:

  • 效果图;

  • html代码;

<div class="row">
   <div class="col-xl-4 col-lg-6 col-md-4">
    <div class="panel panel-info">
     <div class="panel-heading">
       日本大阪
     </div>
     <div class="panel-body">
      <ul>
       <li>核心:2核CPU</li>
       <li>内存:1GB</li>
       <li>硬盘:30GB</li>
       <li>流量:不限流量</li>
       <li>带宽:3Mbps</li>
       <li>架构:XenServer</li>
       <li>价格:80元/月</li>
       <li>传送:<a href="https://pc6a.com/go.php?go=" target="_blank" rel="external nofloow">购买链接</a></li>
      </ul>
     </div>
    </div>
   </div>
  </div>
  • 如果是多个表格要并排放,从以下开始复制
<div class="col-xl-4 col-lg-6 col-md-4"> 
  • CSS代码:
/*  彩色表格======================================================================================================== */
.wmcontent .row {
    margin-left:-9px;margin-right:-9px
    }
.wmcontent .row .col-xl-6, .wmcontent .row .col-xl-4, .wmcontent .row .col-lg-4, .wmcontent .row .col-lg-6, .wmcontent .row .col-md-4 .wmcontent .row .col-md-6 {
    padding-right:10px;padding-left:10px;
    }
.panel{margin-bottom:10px;margin-top:10px;background-color:#fff;border:1px solid transparent;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);box-shadow:0 1px 1px rgba(0,0,0,.05)}
.panel-body{padding:15px 15px 0 18px}
.panel-heading{padding:10px 15px;border-bottom:1px solid transparent;border-top-left-radius:3px;border-top-right-radius:3px}
.panel-heading>.dropdown .dropdown-toggle{color:inherit}
.panel-title{margin-top:0;margin-bottom:0;font-size:16px;color:inherit}
.panel-title>.small,.panel-title>.small>a,.panel-title>a,.panel-title>small,.panel-title>small>a{color:inherit}
.panel-default{border-color:#ddd}
.panel-default>.panel-heading{color:#333;background-color:#f6f6f6;border-color:#eee}
.panel-default>.panel-heading+.panel-collapse>.panel-body{border-top-color:#eee}
.panel-default>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#eee}
.panel-success{border-color:#d6e9c6}
.panel-success>.panel-heading{color:#3c763d;background-color:#dff0d8;border-color:#d6e9c6}
.panel-success>.panel-heading+.panel-collapse>.panel-body{border-top-color:#d6e9c6}
.panel-success>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#d6e9c6}
.panel-success a {color:#3c763d}
.panel-info{border-color:#bce8f1}
.panel-info>.panel-heading{color:#31708f;background-color:#d1ecf1;border-color:#bee5eb}
.panel-info>.panel-heading+.panel-collapse>.panel-body{border-top-color:#bee5eb}
.panel-info>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#bee5eb}
.panel-warning{border-color:#faebcc}
.panel-warning>.panel-heading{color:#8a6d3b;background-color:#fcf8e3;border-color:#faebcc;border-top-left-radius:3px;border-top-right-radius:3px}
.panel-warning>.panel-heading+.panel-collapse>.panel-body{border-top-color:#faebcc}
.panel-warning>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#faebcc}
.panel-warning a {color:#8a6d3b}
.panel-danger{border-color:#ebccd1}
.panel-danger>.panel-heading{color:#a94442;background-color:#f2dede;border-color:#ebccd1;border-top-left-radius:3px;border-top-right-radius:3px}
.panel-danger>.panel-heading+.panel-collapse>.panel-body{border-top-color:#ebccd1}
.panel-danger>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#ebccd1}
.panel-danger a {color:#a94442}
.panel-body a{text-decoration:none;padding-right:16px;margin-right:10px;background:url(../images/outlink.png) no-repeat right center}
.panel-gray{border-color:#f6f6f6;border-radius:3px;}
.panel-gray>.panel-heading{color:#333;background-color:#f6f6f6;border-color:#f6f6f6;border-top-left-radius:3px;border-top-right-radius:3px}
.panel-gray>.panel-heading+.panel-collapse>.panel-body{border-top-color:#f6f6f6}
.panel-gray a {color:#333}
.panel-green{border-color:#28a745;border-radius:3px;}
.panel-green>.panel-heading{color:#fff;background-color:#28a745;border-color:#28a745;border-top-left-radius:3px;border-top-right-radius:3px}
.panel-green>.panel-heading+.panel-collapse>.panel-body{border-top-color:#28a745}
.panel-green a {color:#28a745}
.panel-blue{border-color:#00a2ff;border-radius:3px;}
.panel-blue>.panel-heading{color:#fff;background-color:#00a2ff;border-color:#00a2ff;border-top-left-radius:3px;border-top-right-radius:3px}
.panel-blue>.panel-heading+.panel-collapse>.panel-body{border-top-color:#00a2ff}
.panel-blue a {color:#00a2ff}
.panel-yellow{border-color:#ffc107;border-radius:3px;}
.panel-yellow>.panel-heading{color:#fff;background-color:#ffc107;border-color:#ffc107;border-top-left-radius:3px;border-top-right-radius:3px}
.panel-yellow>.panel-heading+.panel-collapse>.panel-body{border-top-color:#ffc107}
.panel-yellow a {color:#ffc107}
.panel-red{border-color:#dc3545;border-radius:3px;}
.panel-red>.panel-heading{color:#fff;background-color:#dc3545;border-color:#dc3545;border-top-left-radius:3px;border-top-right-radius:3px}
.panel-red>.panel-heading+.panel-collapse>.panel-body{border-top-color:#dc3545}
.panel-red a {color:#dc3545}
.panel-dablue{border-color:#17a2b8;border-radius:3px;}
.panel-dablue>.panel-heading{color:#fff;background-color:#17a2b8;border-color:#17a2b8;border-top-left-radius:3px;border-top-right-radius:3px}
.panel-dablue>.panel-heading+.panel-collapse>.panel-body{border-top-color:#17a2b8}
.panel-dablue a {color:#17a2b8}

2.提醒表格:

  • 1.黄色提醒表格 效果图:

  • 1.html代码:

<div id="sc_warn">莫斯科DataLine Tier-3机房测试IP:46.17.40.85,<a href="https://lg-dtln.justhost.ru/50MB.test" rel="noopener" target="_blank">https://lg-dtln.justhost.ru/50MB.test</a></div>

  • 2.红色提醒表格 效果图:

  • 2.html代码:

<div id="sc_error">提示:如果官网是英文页面,建议使用谷歌浏览器能同步翻译页面。<br />
投稿链接:<a href="https://pc6a.com" rel="nofollow" target="_blank">点此直达</a> 投稿邮箱:[email protected],网友QQ群:6666</div>

  • 3.黑色虚框 效果图:

  • 3.html代码:

<div id="sc_tips">
<p>以上产品支持在下列数据中心自由切换</p>

<ol>
    <li>US: Los Angeles, California (DC9 CN2GIA) [USCA_9] 洛杉矶CN2 GIA<span style="color: #ff00ff;">【仅CN2 GIA特价方案支持】</span></li>
    <li>US: Los Angeles, California (DC2 QNET) [USCA_2] 洛杉矶QN机房(非CN2 GT)</li>
</ol>
</div>

  • 4.蓝色虚线 效果图:

  • 4.html代码:

<div id="sc_xuk">
<p>CPU占用:CN2 GIA特价(突发2核,1核100%)>KVM常规(突发2核,1核50%)>CN2 GT特价(突发1核,1核25%)【1核100%、1核50%、1核25%指的是1小时平均CPU负载不超能超过的级别】</p>
</div>

  • 5.tips 效果图

  • 5.html代码:

<div id="sc_blue">莫斯科DataLine Tier-3机房测试IP:46.17.40.85,<a href="https://lg-dtln.justhost.ru/50MB.test" rel="noopener" target="_blank">https://lg-dtln.justhost.ru/50MB.test</a></div>

几个不同从上到下分别为:
sc_blue
sc_black
sc_lvb
sc_redb
sc_organge

  • CSS代码:
/*彩色信息框*/
#sc_notice {
    color: #7da33c;
    background: #ecf2d6 url('https://wx1.sinaimg.cn/large/8a15dfably1fznj5ojo1gj200q00q0dk.jpg') -1px -1px no-repeat;
    border: 1px solid #aac66d;
    overflow: hidden;
    margin: 10px 0;
    padding: 15px 15px 15px 35px;
 }
#sc_warn {
    color: #ad9948;
    background: #fff4b9 url('https://wx3.sinaimg.cn/large/8a15dfably1fznj68b3izj200q00q0b2.jpg') -1px -1px no-repeat;
    border: 1px solid #eac946;
    overflow: hidden;
    margin: 10px 0;
    padding: 15px 15px 15px 35px;
 }
#sc_error {
    color: #c66;
    background: #ffecea url('https://wx4.sinaimg.cn/large/8a15dfably1fznj6oayxej200q00q0cn.jpg') -1px -1px no-repeat;
    border: 1px solid #ebb1b1;
    overflow: hidden;
    margin: 10px 0;
    padding: 15px 15px 15px 35px;
 }
#sc_tips {
    color: #777;
    background: #eaeaea url('https://wx1.sinaimg.cn/large/8a15dfably1fznj7130pvj200q00q06q.jpg') -1px -1px no-repeat;
    border: 1px solid #ccc;
    overflow: hidden;
    margin: 10px 0;
    padding: 15px 15px 15px 35px;
}
#sc_blue {
    color: #1ba1e2;
    background: rgba(27, 161, 226, 0.26) url('https://wx4.sinaimg.cn/large/8a15dfably1fznj7hprjtj200q00q05h.jpg') -1px -1px no-repeat;
    border: 1px solid #1ba1e2;
    overflow: hidden;
    margin: 10px 0;
    padding: 15px 15px 15px 35px;
}
#sc_black {
    border-width: 1px 4px 4px 1px;
    border-style: solid;
    border-color: #3e3e3e;
    margin: 10px 0;
    padding: 15px 15px 15px 35px;
}
#sc_xuk {
    border: 2px dashed rgb(41, 170, 227);
    background-color: rgb(248, 247, 245);
    margin: 10px 0;
    padding: 15px 15px 15px 35px;
}
#sc_lvb {
    margin: 10px 0;
    padding: 10px 15px;
    border: 1px solid #e3e3e3;
    border-left: 2px solid #05B536;
    background: #FFF;
}
#sc_redb {
    margin: 10px 0;
    padding: 10px 15px;
    border: 1px solid #e3e3e3;
    border-left: 2px solid #ED0505;
    background: #FFF;
}
#sc_organge {
    margin: 10px 0;
    padding: 10px 15px;
    border: 1px solid #e3e3e3;
    border-left: 2px solid #EC8006;
    background: #FFF;
}

备注:

如果只需要一种样式,可以单独提取一段CSS。即提取两个}中间的内容即可。

未经允许不得转载:pc6a学习分享 » 分享几个好看的html表格代码 – typecho可用
阿里云轻量应用服务器

评论 1

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #1

    这个很不错,谢谢分享

    ITren5个月前 (02-03)回复