引入CDN,算好需要合并的单元格。

<!DOCTYPE html>

<html>

<head>

    <!-- 移动设备 -->

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <meta charset="utf-8" />

    <title>朝代表</title>

    <!-- bootstrap-cssCDN链接 -->

    <link rel="stylesheet" type="text/css" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.css" />

    <!-- jqueryCDN链接 -->

    <script src="https://cdn.staticfile.org/jquery/1.12.4/jquery.js" type="text/javascript" charset="utf-8"></script>

    <!-- bootstrap-jsCDN链接 -->

    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>

</head>

<body>

    <h1 class="text-center">历史朝代表</h1>

    <div class="container-fluid">

        <div class="table-responsive">

            <table class="table table-striped table-bordered table-hover">

                <thead>

                    <tr>

                        <th colspan="2">朝 代</th>

                        <th>起 讫</th>

                        <th>都 城</th>

                        <th>今 地</th>

                    </tr>

                </thead>

                <tr>

                    <th colspan="2">夏</th>

                    <td>约前2146-1675年</td>

                    <td>安邑</td>

                    <td>山西夏县</td>

                </tr>

                <tr>

                    <th colspan="2">商</th>

                    <td>约前1675-1029年</td>

                    <td>亳</td>

                    <td>河南商丘</td>

                </tr>

                <tr>

                    <th rowspan="2">周</th>

                    <th>西周</th>

                    <td>约前1029-771年</td>

                    <td>镐京</td>

                    <td>陕西西安</td>

                </tr>

                <tr>

                    <th>东周</th>

                    <td>前770-256年</td>

                    <td>洛邑</td>

                    <td>河南洛阳</td>

                </tr>

                <tr>

                    <th colspan="2">秦</th>

                    <td>前221-207年</td>

                    <td>咸阳</td>

                    <td>陕西咸阳</td>

                </tr>

                <tr>

                    <th rowspan="2">汉</th>

                    <th>西汉</th>

                    <td>前206—公元25</td>

                    <td>长安</td>

                    <td>陕西西安</td>

                </tr>

                <tr>

                    <th>东汉</th>

                    <td>25—220</td>

                    <td>洛阳</td>

                    <td>河南洛阳</td>

                </tr>

                <tr>

                    <th rowspan="3">三国</th>

                    <th>魏</th>

                    <td>220-265</td>

                    <td>洛阳</td>

                    <td>河南洛阳</td>

                </tr>

                <tr>

                    <th>蜀</th>

                    <td>221-263</td>

                    <td>成都</td>

                    <td>四川成都</td>

                </tr>

                <tr>

                    <th>吴</th>

                    <td>222-280</td>

                    <td>建业</td>

                    <td>江苏南京</td>

                </tr>

                <tr>

                    <th colspan="2">西晋</th>

                    <td>265-317</td>

                    <td>洛阳</td>

                    <td>河南洛阳</td>

                </tr>

                <tr>

                    <th rowspan="2">东晋

                        <br>十六国</th>

                    <th>东晋</th>

                    <td>317-420</td>

                    <td>建康</td>

                    <td>江苏南京</td>

                </tr>

                <tr>

                    <th>十六国</th>

                    <td>304-439</td>

                    <td>—</td>

                    <td>—</td>

                </tr>

                <tr>

                    <th rowspan="4">南朝</th>

                    <th>宋</th>

                    <td>420-479</td>

                    <td>建康</td>

                    <td>江苏南京</td>

                </tr>

                <tr>

                    <th>齐</th>

                    <td>479-502</td>

                    <td>建康</td>

                    <td>江苏南京</td>

                </tr>

                <tr>

                    <th>梁</th>

                    <td>502-557</td>

                    <td>建康</td>

                    <td>江苏南京</td>

                </tr>

                <tr>

                    <th>陈</th>

                    <td>557-589</td>

                    <td>建康</td>

                    <td>江苏南京</td>

                </tr>

                <tr>

                    <th rowspan="6">北朝</th>

                    <th rowspan="2">北魏</th>

                    <td rowspan="2">386-534</td>

                    <td>平城</td>

                    <td>山西大同</td>

                </tr>

                <tr>

                    <td>洛阳</td>

                    <td>河南洛阳</td>

                </tr>

                <tr>

                    <th>东魏</th>

                    <td>534-550</td>

                    <td>邺</td>

                    <td>河北临漳</td>

                </tr>

                <tr>

                    <th>北齐</th>

                    <td>550-577</td>

                    <td>邺</td>

                    <td>河北临漳</td>

                </tr>

                <tr>

                    <th>西魏</th>

                    <td>535-557</td>

                    <td>长安</td>

                    <td>陕西西安</td>

                </tr>

                <tr>

                    <th>北周</th>

                    <td>557-581</td>

                    <td>长安</td>

                    <td>陕西西安</td>

                </tr>

                <tr>

                    <th colspan="2">隋</th>

                    <td>581-618</td>

                    <td>大兴</td>

                    <td>陕西西安</td>

                </tr>

                <tr>

                    <th colspan="2">唐</th>

                    <td>618-907</td>

                    <td>长安</td>

                    <td>陕西西安</td>

                </tr>

                <tr>

                    <th rowspan="6">五代十国</th>

                    <th>后梁</th>

                    <td>907-923</td>

                    <td>汴</td>

                    <td>河南开封</td>

                </tr>

                <tr>

                    <th>后唐</th>

                    <td>923-936</td>

                    <td>洛阳</td>

                    <td>河南洛阳</td>

                </tr>

                <tr>

                    <th>后晋</th>

                    <td>936-946</td>

                    <td>汴</td>

                    <td>河南开封</td>

                </tr>

                <tr>

                    <th>后汉</th>

                    <td>947-950</td>

                    <td>汴</td>

                    <td>河南开封</td>

                </tr>

                <tr>

                    <th>后周</th>

                    <td>951-960</td>

                    <td>汴</td>

                    <td>河南开封</td>

                </tr>

                <tr>

                    <th>十国</th>

                    <td>902-979</td>

                    <td>—</td>

                    <td>—</td>

                </tr>

                <tr>

                    <th rowspan="2">宋</th>

                    <th>北宋</th>

                    <td>960-1127</td>

                    <td>开封</td>

                    <td>河南开封</td>

                </tr>

                <tr>

                    <th>南宋</th>

                    <td>1127-1279</td>

                    <td>临安</td>

                    <td>浙江杭州</td>

                </tr>

                <tr>

                    <th colspan="2">辽</th>

                    <td>907-1125</td>

                    <td>皇都(上京)</td>

                    <td>内蒙古 巴林左旗</td>

                </tr>

                <tr>

                    <th colspan="2">西夏</th>

                    <td>1038-1227</td>

                    <td>兴庆府</td>

                    <td>宁夏银川</td>

                </tr>

                <tr>

                    <th rowspan="3" colspan="2">金</th>

                    <td rowspan="3">1115-1234</td>

                    <td>会宁</td>

                    <td>阿城(黑龙江)</td>

                </tr>

                <tr>

                    <td>中都</td>

                    <td>北京</td>

                </tr>

                <tr>

                    <td>开封</td>

                    <td>河南开封</td>

                </tr>

                <tr>

                    <th colspan="2">元</th>

                    <td>1206-1368</td>

                    <td>大都</td>

                    <td>北京</td>

                </tr>

                <tr>

                    <th colspan="2">明</th>

                    <td>1368-1644</td>

                    <td>北京</td>

                    <td>北京</td>

                </tr>

                <tr>

                    <th colspan="2">清</th>

                    <td>1616-1911</td>

                    <td>北京</td>

                    <td>北京</td>

                </tr>

                <tr>

                    <th colspan="2">中华民国</th>

                    <td>1912-1949</td>

                    <td>南京</td>

                    <td>江苏南京</td>

                </tr>

                <tr>

                    <th colspan="5" class="text-center">中华人民共和国1949年10月1日成立，首都北京。</th>

                </tr>

            </table>

        </div>

    </div>

</body>

</html>

成品图：

用Bootstrap做一个历史朝代表的更多相关文章

  1. 用bootstrap做一个背景可轮转的登录界面

    用bootstrap做一个背景可轮转的登录界面 一.总结 一句话总结:用css3的动画的 @keyframes 规则,制作轮转图. 1.用bootstrap做一个背景可轮转的登录界面? a.动画部分用 ...

  2. .Net MVC&&datatables.js&&bootstrap做一个界面的CRUD有多简单

    我们在项目开发中,做得最多的可能就是CRUD,那么我们如何在ASP.NET MVC中来做CRUD呢?如果说只是单纯实现功能,那自然是再简单不过了,可是我们要考虑如何来做得比较好维护比较好扩展,如何做得 ...

  3. .net，mvc使用bootstrap做一个标准后台

    今天准备搭一个公用后台,使用bootstrap,方便今后开发,顺便mark一下 后期列表页将使用kendo-ui,增强后台的效果 下面是代码... login页面 @{ Layout = null; ...

  4. Bootstrap 做一个简单的母版页

    随便搭的一个母版页,不太好看,只是为了看效果....请勿吐槽. 效果如图: 一.新建母版页,引入Bootstrap相关js文件 <link href="../css/bootstrap ...

  5. 使用bootstrap做一个响应式的页面

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. bootstrap做了一个表格

    花了一下午做了一个表格: 大致是这样: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf ...

  7. 做一个 App 前需要考虑的几件事

    做一个 App 前需要考虑的几件事  来源:limboy的博客   随着工具链的完善,语言的升级以及各种优质教程的涌现,做一个 App 的成本也越来越低了.尽管如此,有些事情最好前期就做起来,避免当 ...

  8. 做一个App前需要考虑的几件事

    本文转载于文章原文链接,版本归原作者所有! 随着工具链的完善,语言的升级以及各种优质教程的涌现,做一个 App 的成本也越来越低了.尽管如此,有些事情最好前期就做起来,避免当 App 有了一定规模后, ...

  9. ［转载］做一个 App 前需要考虑的几件事

    本文转自http://limboy.me/tech/2016/07/06/starting-an-app.html ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ...

随机推荐

  1. day20191012笔记

    课程默写笔记: 1.程序架构 C/S 客户端/服务器端 B/S 浏览器/服务器端 2.Tomcat应用服务器 tomcat默认端口号是80:tomcat配置文件中通常端口的定义是8080: 3.使用开 ...

  2. Vue项目解析

    各个文件夹 node_modules:用来放环境依赖 public:用来放公共资源,里面的index.html文件,就是初始的挂载点.被app.vue给取代了. src:放各种资源的. assets: ...

  3. 【JZOJ】3490. 旅游题解报告

    题目 思路 这道题看上去就像一个动态规划!但是还是要把矩阵压成一行. 然后按 \(A\)数组 将结构体从小到大排个序. 随后我们开始了动规标准步骤: 确定状态 很显然, \(f_i\) 表示游览完第\ ...

  4. 如何解决jpa 要求column 名称单词必须用下划线

    [转]:http://www.jeesns.cn/article/detail/6657 先引出轮子http://blog.csdn.net/54powerman/article/details/76 ...

  5. alloc 和 init都做了什么验证。

    结论: alloc负责分配内存和创建对象对应的isa指针: init只是返回alloc生成的对象.  所以alloc后,多次调用init,返回的对象是同一个! 代码如下: // // main.m / ...

  6. 【华为云实战开发】9.如何进行PHP项目的快速搭建并实现CICD？【华为云技术分享】

    1 概述 1.1 文章目的 本文主要想为研发PHP项目的企业或个人提供上云指导,通过本文中的示例项目 “workerman-todpole”,为开发者提供包括项目管理,代码托管,代码检查,编译构建,测 ...

  7. ubuntu下仅仅获取网卡一的ip地址 && shell中字符串拼接

    问题描述: ubuntu下仅仅获取网卡一的ip地址 问题背景: eth0,eth1,eth2……代表网卡一,网卡二,网卡三…… lo代表127.0.0.1,即localhost | 问题描述: 已知字 ...

  8. Linux下RocketMQ下载安装教程

    一.下载 1.官网下载:下载地址   2.百度网盘下载:下载地址 提取码:0g5a java开发工具下载地址及安装教程大全,点这里. 更多深度技术文章,在这里. 二.安装及启动 1.将zip文件上传到 ...

  9. BZOJ 1051: [HAOI2006]受欢迎的牛（SCC）

    1051: [HAOI2006]受欢迎的牛 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 8172  Solved: 4470[Submit][Sta ...

  10. Python 电路绘制库 schemdraw 你会吗？【面试必学】

    前言本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理.作者:skyztttt 引子 由于最近在学习ardunio的使用,其中牵涉到绘 ...