HTML5制作表格样式代码
作者:来源:代码学苑发表于:2020-06-18 13:14:02
废话不多说了,具体代码如下所示:
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>表格</title> <style type="text/css"> *{ margin: 0; padding: 0; } body{ font: italic 20px Georgia, serif; letter-spacing: normal; background-color: #f0f0f0; } #content{ width: 750px; padding: 40px; margin: 0 auto; background-color: #fff; border-left: 30px solid #1D81B6; border-right: 1px solid #ddd; box-shadow: 0px 0px 16px #aaa; } #table1{ font: bold 16px/1.4em "Trebuchet MS", sans-serif; } #table1 thead th{ padding: 15px; border: 1px solid #93CE37; border-bottom: 3px solid #9ED929; text-shadow: 1px 1px 1px #568F23; color: #fff; background-color: #9DD929; border-radius: 5px 5px 0px 0px; } #table1 thead th:empty{ background-color: transparent; border: none; } #table1 tbody th{ padding: 0px 10px; border: 1px solid #93CE37; border-right: 3px solid #9ED929; text-shadow: 1px 1px 1px #568F23; color: #666; background-color: #9DD929; border-radius: 5px 0px 0px 5px; } #table1 tbody td{ padding: 10px; border: 2px solid #E7EFE0; text-align: center; text-shadow: 1px 1px 1px #fff; color: #666; background-color: #DEF3CA; border-radius: 2px; } #table1 tbody span.check::before{ content: url(images/check0.png); } #table1 tfoot td{ padding: 10px 0px; font-size: 32px; color: #9CD009; text-align: center; text-shadow: 1px 1px 1px #444; } </style></head><body><div id="content"> <table id="table1"> <thead> <tr> <th></th> <th scope="col" abbr="Starter">Smart Starter</th> <th scope="col" abbr="Medium">Smart Medium</th> <th scope="col" abbr="Business">Smart Business</th> <th scope="col" abbr="Deluxe">Smart Deluxe</th> </tr> </thead> <tfoot> <tr> <th scope="row">Price per month</th> <td>$ 2.90</td> <td>$ 5.90</td> <td>$ 9.90</td> <td>$ 14.90</td> </tr> </tfoot> <tbody> <tr> <th scope="row">Storage Space</th> <td>512MB</td> <td>1 GB</td> <td>2 GB</td> <td>4 GB</td> </tr> <tr> <th scope="row">Bandwidth</th> <td>50 GB</td> <td>100 GB</td> <td>150 GB</td> <td>unlimited</td> </tr> <tr> <th scope="row">Mysql Databases</th> <td>unlimited</td> <td>unlimited</td> <td>unlimited</td> <td>unlimited</td> </tr> <tr> <th scope="row">Setup</th> <td>12.90 ___FCKpd___0lt;/td> <td>12.90 ___FCKpd___0lt;/td> <td>free</td> <td>free</td> </tr> <tr> <th scope="row">php 5</th> <td><span class="check"></span></td> <td><span class="check"></span></td> <td><span class="check"></span></td> <td><span class="check"></span></td> </tr> <tr> <th scope="row">Ruby on Rails</th> <td><span class="check"></span></td> <td><span class="check"></span></td> <td><span class="check"></span></td> <td><span class="check"></span></td> </tr> </tbody> </table></div></body></html>
好了,代码到此介绍,完美表格效果就制作出来了。
相关文章
-
无相关信息
最新推荐
- 宝塔面板FTP链接服务器发回了不可路由地址
- 阿里云ecs安装宝塔面板失败原因?以及安装步骤?
- 织梦手机端-识别跳转
- html如何在一个form表单中实现多个submit
- thinkphp无限分类原理和实现代码
- thinkphp6 请求(request)变量
- 帝国CMS自定义列表SQL调用方法
- 帝国CMS自定义列表的使用实例
- 帝国cms自定义列表限制某个栏目显示
- PHP中利用for循环判断一个数是不是回文数
- PHP中判断一个数是否为素数的方法
- PHP中break,continue,exit的使用与区别
- 测试PHP连接MYSQL成功与否的代码
- PHP编程求最大公约数与最小公倍数的方法示例
- PHP获取数组中单列值的方法
- PHP使用一个for循环将N*N的二维数组的所有值置1实现方法
- HTML5+css3:3D旋转木马效果相册
- HTML,CSS,font-family:中文字体和英文名称对照表
- HTML使用栅格布局实现六种筛子样式的代码详解
- 修改CSS样式实现网页变灰色/黑白代码的几个方法整理
最新更新
- 黄庭坚《水调歌头·游览》我欲穿花寻路 直入白云深处
- 黄庭坚《品令·茶词》恰如灯下 故人万里 归来对影
- 杜荀鹤《溪兴》山雨溪风卷钓丝 瓦瓯篷底独斟时
- 储光羲《张谷田舍》一径入寒竹 小桥穿野花
- 赵嘏《寒塘》晓发梳临水 寒塘坐见秋
- 蔡确《夏日登车盖亭》纸屏石枕竹方床 手倦抛书午梦长
- 李峤《书》河图八卦出 洛范九畴初
- 刘长卿《饯别王十一南游》长江一帆远 落日五湖春
- 韦庄《章台夜思》芳草已云暮 故人殊未来
- 卢纶《宿澄上人院》竹窗闻远水 月出似溪中
- 孟浩然《留别王侍御维》只应守寂寞 还掩故园扉
- 苏轼《南乡子·送述古》归路晚风清 一枕初寒梦不成
- 王维《木兰柴》秋山敛馀照 飞鸟逐前侣
- 王维《栾家濑》跳波自相溅 白鹭惊复下
- 苏轼《少年游·润州作代人寄远》对酒卷帘邀明月 风露透窗纱
- 苏轼《行香子·过七里濑》一叶舟轻 双桨鸿惊 水天清 影湛波平
- 王维《汉江临泛》江流天地外 山色有无中
- 柳宗元《溪居》晓耕翻露草 夜榜响溪石
- 杜牧《赠宣州元处士》蓬蒿三亩居 宽于一天下
- 项鸿祚《清平乐·池上纳凉》水天清话 院静人销夏