<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <table class="table map" border="1"> <tbody> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="hokuriku" colspan="2" rowspan="5"><a href="#ishikawa">石川</a></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="hokuriku" colspan="2" rowspan="2"><a href="#toyama">富山</a></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="chubu" colspan="2" rowspan="5"><a href="#gifu">岐阜</a></td> <td></td> </tr> <tr> <td></td> <td class="kinki" colspan="3" rowspan="4"><a href="#hyogo">兵庫</a></td> <td class="kinki" colspan="3" rowspan="4"><a href="#kyoto">京都</a></td> <td class="hokuriku" colspan="3" rowspan="2"><a href="#fukui">福井</a></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td class="kinki" colspan="3" rowspan="2"><a href="#shiga">滋賀</a></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td class="kinki" colspan="2" rowspan="3"><a href="#osaka">大阪</a></td> <td class="kinki" colspan="2" rowspan="3">奈良</td> <td class="chubu" colspan="3" rowspan="4">三重</td> <td class="chubu" colspan="2" rowspan="2">愛知</td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td class="kinki" colspan="4" rowspan="2">和歌山</td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table> </div> </div>

table.map td,th { border: 2px #ffffe4 solid; } table.map td { text-align: center; vertical-align: middle; } table.map tbody tr { background-color: #ffffe4; } table.map .hokuriku { background: #99eeff; } table.map .kinki { background: #ccddff; } table.map .chubu { background: #ffddaa; }