用Bootstrap做一个历史朝代表

引入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>
    
    <link rel="stylesheet" type="text/css" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.css" />
    
    <script src="https://cdn.staticfile.org/jquery/1.12.4/jquery.js" type="text/javascript" charset="utf-8">script>
    
    <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—公元25td>
                    <td>长安td>
                    <td>陕西西安td>
                tr>
                <tr>
                    <th>东汉th>
                    <td>25—220td>
                    <td>洛阳td>
                    <td>河南洛阳td>
                tr>
                <tr>
                    <th rowspan="3">三国th>
                    <th>th>
                    <td>220-265td>
                    <td>洛阳td>
                    <td>河南洛阳td>
                tr>
                <tr>
                    <th>th>
                    <td>221-263td>
                    <td>成都td>
                    <td>四川成都td>
                tr>
                <tr>
                    <th>th>
                    <td>222-280td>
                    <td>建业td>
                    <td>江苏南京td>
                tr>
                <tr>
                    <th colspan="2">西晋th>
                    <td>265-317td>
                    <td>洛阳td>
                    <td>河南洛阳td>
                tr>
                <tr>
                    <th rowspan="2">东晋
                        <br>十六国th>
                    <th>东晋th>
                    <td>317-420td>
                    <td>建康td>
                    <td>江苏南京td>
                tr>
                <tr>
                    <th>十六国th>
                    <td>304-439td>
                    <td>td>
                    <td>td>
                tr>
                <tr>
                    <th rowspan="4">南朝th>
                    <th>th>
                    <td>420-479td>
                    <td>建康td>
                    <td>江苏南京td>
                tr>
                <tr>
                    <th>th>
                    <td>479-502td>
                    <td>建康td>
                    <td>江苏南京td>
                tr>
                <tr>
                    <th>th>
                    <td>502-557td>
                    <td>建康td>
                    <td>江苏南京td>
                tr>
                <tr>
                    <th>th>
                    <td>557-589td>
                    <td>建康td>
                    <td>江苏南京td>
                tr>
                <tr>
                    <th rowspan="6">北朝th>
                    <th rowspan="2">北魏th>
                    <td rowspan="2">386-534td>
                    <td>平城td>
                    <td>山西大同td>
                tr>
                <tr>
                    <td>洛阳td>
                    <td>河南洛阳td>
                tr>
                <tr>
                    <th>东魏th>
                    <td>534-550td>
                    <td>td>
                    <td>河北临漳td>
                tr>
                <tr>
                    <th>北齐th>
                    <td>550-577td>
                    <td>td>
                    <td>河北临漳td>
                tr>
                <tr>
                    <th>西魏th>
                    <td>535-557td>
                    <td>长安td>
                    <td>陕西西安td>
                tr>
                <tr>
                    <th>北周th>
                    <td>557-581td>
                    <td>长安td>
                    <td>陕西西安td>
                tr>
                <tr>
                    <th colspan="2">th>
                    <td>581-618td>
                    <td>大兴td>
                    <td>陕西西安td>
                tr>
                <tr>
                    <th colspan="2">th>
                    <td>618-907td>
                    <td>长安td>
                    <td>陕西西安td>
                tr>
                <tr>
                    <th rowspan="6">五代十国th>
                    <th>后梁th>
                    <td>907-923td>
                    <td>td>
                    <td>河南开封td>
                tr>
                <tr>
                    <th>后唐th>
                    <td>923-936td>
                    <td>洛阳td>
                    <td>河南洛阳td>
                tr>
                <tr>
                    <th>后晋th>
                    <td>936-946td>
                    <td>td>
                    <td>河南开封td>
                tr>
                <tr>
                    <th>后汉th>
                    <td>947-950td>
                    <td>td>
                    <td>河南开封td>
                tr>
                <tr>
                    <th>后周th>
                    <td>951-960td>
                    <td>td>
                    <td>河南开封td>
                tr>
                <tr>
                    <th>十国th>
                    <td>902-979td>
                    <td>td>
                    <td>td>
                tr>
                <tr>
                    <th rowspan="2">th>
                    <th>北宋th>
                    <td>960-1127td>
                    <td>开封td>
                    <td>河南开封td>
                tr>
                <tr>
                    <th>南宋th>
                    <td>1127-1279td>
                    <td>临安td>
                    <td>浙江杭州td>
                tr>
                <tr>
                    <th colspan="2">th>
                    <td>907-1125td>
                    <td>皇都(上京)td>
                    <td>内蒙古 巴林左旗td>
                tr>
                <tr>
                    <th colspan="2">西夏th>
                    <td>1038-1227td>
                    <td>兴庆府td>
                    <td>宁夏银川td>
                tr>
                <tr>
                    <th rowspan="3" colspan="2">th>
                    <td rowspan="3">1115-1234td>
                    <td>会宁td>
                    <td>阿城(黑龙江)td>
                tr>
                <tr>
                    <td>中都td>
                    <td>北京td>
                tr>
                <tr>
                    <td>开封td>
                    <td>河南开封td>
                tr>
                <tr>
                    <th colspan="2">th>
                    <td>1206-1368td>
                    <td>大都td>
                    <td>北京td>
                tr>
                <tr>
                    <th colspan="2">th>
                    <td>1368-1644td>
                    <td>北京td>
                    <td>北京td>
                tr>
                <tr>
                    <th colspan="2">th>
                    <td>1616-1911td>
                    <td>北京td>
                    <td>北京td>
                tr>
                <tr>
                    <th colspan="2">中华民国th>
                    <td>1912-1949td>
                    <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做一个历史朝代表)