<< 2012年09月 | TOP | 2012年11月 >>
<< 1 2 -

2012年10月08日

HTML テーブルタグで日本地図

スポンサード　リンク

 日本の地図（47都道府県）をHTMLの table タグで作成

都道府県 、島 面積上位十傑

heteml
【ちょ～簡単設置】初心者でもすぐ使える、無料アクセス解析の決定版！
ロリポップ！のドメインは選べる全８５種類！！
☆さくらのレンタルサーバ ビジネスプロ☆

サンプルソース

<html>
 <head>
<title>HTML テーブルタグで作る日本地図</title>
<style type="text/css">
<!--
table.Tizu{
 color: black;
 background-color: #f0ffff ;/*地図の背景色*/
 width: 500px;
 font-size: 10px;
  }

table.Tizu td{
 text-align: center; /*文字水平位置ぞろえ*/
 height: 5px;
  }

table.Tizu1{
 font-size: 10px;
  }

.Nwrap {
 white-space: nowrap; /*セル 改行なし*/
  }

/*-----------都道府県 背景色--------------*/
.hokka{
 background-color: #ff9abc;
  }

.okinawa{
 background-color: aqua;
  }

.miyazaki{
 background-color: #cc99ff;
  }

.saga{
 background-color: #ff00ff;
  }

.kumamoto{
 background-color: lime ;
  }

.fukuoka{
 background-color: #66aaff;
  }

.ooita{
 background-color: gold;
  }
/*----------------------------------*/
-->
</style>

</head>
<body>
  <table class="Tizu" cellpadding="2" cellspacing="0">
 <tbody>
  <tr>
   <td colspan="71" rowspan="40"></td>
   <td rowspan="44"></td>
   <td colspan="7" rowspan="14"></td>
   <td rowspan="12"></td>
   <td colspan="6" rowspan="3"></td>
   <td colspan="9" rowspan="7"></td>
   <td colspan="15" rowspan="10"></td>
   <td rowspan="9"></td>
   <td></td>
  </tr>
  <tr>
   <td></td>
  </tr>
  <tr>
   <td></td>
  </tr>
  <tr>
   <td class="hokka" title="礼文島"></td>
   <td rowspan="4"></td>
   <td class="hokka" rowspan="2" colspan="3"></td>
   <td></td>
   <td rowspan="13"></td>
  </tr>
  <tr>
   <td></td>
   <td></td>
  </tr>
  <tr>
   <td class="hokka" title="利尻島"></td>
   <td class="hokka" colspan="4"></td>
  </tr>
  <tr>
   <td rowspan="4"></td>
   <td class="hokka" colspan="4"></td>
  </tr>
  <tr>
   <td class="hokka" rowspan="2" colspan="2"></td>
   <td class="hokka" colspan="4"></td>
   <td colspan="8" rowspan="2"></td>
  </tr>
  <tr>
   <td class="hokka" colspan="4"></td>
  </tr>
  <tr>
   <td class="hokka" colspan="7"></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td rowspan="3" class="hokka"></td>
  </tr>
  <tr>
   <td class="hokka" rowspan="2"></td>
   <td class="hokka" colspan="8"></td>
   <td colspan="2"></td>
   <td colspan="4" rowspan="2"></td>
   <td colspan="15"></td>
  </tr>
  <tr>
   <td class="hokka" colspan="10"></td>
   <td colspan="14"></td>
   <td class="hokka"></td>
  </tr>
  <tr>
   <td class="hokka" colspan="2" rowspan="2"></td>
   <td class="hokka" colspan="12"></td>
   <td colspan="2"></td>
   <td colspan="13"></td>
   <td class="hokka" colspan="2" rowspan="2" title="択捉島"></td>
   <td></td>
  </tr>
  <tr>
   <td colspan="14" class="hokka"></td>
   <td colspan="13"></td>
   <td></td>
  </tr>
  <tr>
   <td colspan="3"></td>
   <td colspan="2" class="hokka"></td>
   <td colspan="2"></td>
   <td class="hokka" colspan="16" rowspan="3">北海道 &nbsp; &nbsp; </td>
   <td class="hokka" colspan="5"></td>
   <td colspan="6"></td>
   <td></td>
   <td class="hokka" colspan="2" title="択捉島"></td>
   <td></td>
   <td></td>
  </tr>
  <tr>
   <td colspan="2" rowspan="3"></td>
   <td></td>
   <td rowspan="2" class="hokka" colspan="4"></td>
   <td rowspan="2" class="hokka"></td>
   <td rowspan="2"></td>
   <td colspan="5"></td>
   <td class="hokka" colspan="2" title="国後島"></td>
   <td></td>
   <td class="hokka" title="択捉島" colspan="3"></td>
   <td colspan="2"></td>
   <td></td>
  </tr>
  <tr>
   <td class="hokka"></td>
   <td class="hokka" colspan="6" title="国後島"></td>
   <td colspan="7"></td>
   <td></td>
   <td class="Nwrap" rowspan="7" title="北方四島">北方<br>
   　領土</td>
  </tr>
  <tr>
   <td rowspan="2" class="hokka"></td>
   <td class="hokka" colspan="20"></td>
   <td class="hokka"></td>
   <td></td>
   <td colspan="13"></td>
   <td></td>
  </tr>
  <tr>
   <td class="hokka" title="奥尻島"></td>
   <td></td>
   <td class="hokka" colspan="3" rowspan="2"></td>
   <td class="hokka" colspan="6"></td>
   <td class="hokka" colspan="2" rowspan="5"></td>
   <td class="hokka" rowspan="3"></td>
   <td class="hokka" rowspan="2"></td>
   <td class="hokka" colspan="11"></td>
   <td></td>
   <td class="hokka" title="歯舞群島 志発島"></td>
   <td></td>
   <td class="hokka" title="色丹島"></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
  </tr>
  <tr>
   <td colspan="3"></td>
   <td></td>
   <td class="hokka"></td>
   <td colspan="2" rowspan="2"></td>
   <td class="hokka" rowspan="2" colspan="2"></td>
   <td class="hokka" colspan="4"></td>
   <td colspan="3" rowspan="2"></td>
   <td colspan="15" rowspan="4"></td>
   <td rowspan="4"></td>
  </tr>
  <tr>
   <td colspan="4"></td>
   <td class="hokka" colspan="2"></td>
   <td colspan="2"></td>
   <td class="hokka"></td>
   <td class="hokka"></td>
   <td colspan="3"></td>
  </tr>
  <tr>
   <td colspan="2" rowspan="22"></td>
   <td rowspan="10"></td>
   <td class="hokka" colspan="5"></td>
   <td colspan="4" rowspan="2"></td>
   <td colspan="9" rowspan="2"></td>
  </tr>
  <tr>
   <td class="hokka" colspan="2"></td>
   <td colspan="2"></td>
   <td class="hokka"></td>
  </tr>
  <tr>
   <td colspan="12"></td>
   <td colspan="23" rowspan="51"></td>
   <td rowspan="51"></td>
   <td rowspan="51"></td>
  </tr>
  <tr>
   <td colspan="4"></td>
   <td class="fukuoka" colspan="2" rowspan="2"></td>
   <td class="fukuoka"></td>
   <td class="fukuoka" colspan="2" rowspan="5"></td>
   <td rowspan="5"></td>
   <td rowspan="6" colspan="2"></td>
  </tr>
  <tr>
   <td rowspan="4"></td>
   <td class="fukuoka" colspan="2" rowspan="4"></td>
   <td rowspan="3"></td>
   <td></td>
  </tr>
  <tr>
   <td></td>
   <td></td>
   <td rowspan="2"></td>
  </tr>
  <tr>
   <td class="fukuoka"></td>
   <td></td>
  </tr>
  <tr>
   <td class="fukuoka" colspan="4"></td>
  </tr>
  <tr>
   <td class="fukuoka" colspan="10" rowspan="2">青森</td>
  </tr>
  <tr>
   <td class="fukuoka"></td>
   <td></td>
  </tr>
  <tr>
   <td></td>
   <td class="saga" colspan="5" rowspan="10">秋<br>
   田</td>
   <td class="kumamoto" colspan="7"></td>
  </tr>
  <tr>
   <td></td>
   <td class="kumamoto" colspan="7" rowspan="8">岩<br>
   手</td>
  </tr>
  <tr>
   <td class="saga"></td>
  </tr>
  <tr>
   <td></td>
  </tr>
  <tr>
   <td></td>
  </tr>
  <tr>
   <td></td>
  </tr>
  <tr>
   <td></td>
  </tr>
  <tr>
   <td></td>
  </tr>
  <tr>
   <td></td>
  </tr>
  <tr>
   <td colspan="27"></td>
   <td colspan="2" rowspan="10" style="text-align : left;">竹<br>
   島</td>
   <td colspan="42" rowspan="2"></td>
   <td rowspan="3"></td>
   <td class="ooita" rowspan="5" colspan="5">宮<br>
   城</td>
   <td class="ooita" colspan="2"></td>
  </tr>
  <tr>
   <td colspan="27"></td>
   <td class="miyazaki" colspan="2" rowspan="2"></td>
   <td class="miyazaki" rowspan="5" colspan="3">山<br>
   形</td>
   <td></td>
   <td class="ooita"></td>
  </tr>
  <tr>
   <td colspan="27"></td>
   <td colspan="34"></td>
   <td colspan="8">佐渡島</td>
   <td colspan="2" rowspan="10"></td>
  </tr>
  <tr>
   <td colspan="27"></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></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td colspan="25"></td>
   <td rowspan="2"></td>
   <td></td>
   <td class="kumamoto" colspan="2"></td>
   <td class="miyazaki" rowspan="3"></td>
  </tr>
  <tr>
   <td colspan="5" rowspan="11"></td>
   <td colspan="22" rowspan="7"></td>
   <td></td>
   <td colspan="2" rowspan="12"></td>
   <td colspan="26" rowspan="7"></td>
   <td colspan="7" rowspan="3"></td>
   <td></td>
   <td class="kumamoto" colspan="3"></td>
   <td colspan="3"></td>
   <td></td>
   <td class="kumamoto" colspan="2"></td>
  </tr>
  <tr>
   <td class="saga" title="竹島"></td>
   <td class="kumamoto" colspan="3"></td>
   <td colspan="4"></td>
   <td></td>
   <td class="kumamoto" colspan="3"></td>
   <td class="saga" colspan="5"></td>
  </tr>
  <tr>
   <td rowspan="10"></td>
   <td colspan="7"></td>
   <td class="kumamoto" colspan="3" rowspan="3">新<br>
   潟</td>
   <td class="kumamoto"></td>
   <td class="saga" colspan="9" rowspan="3">福島</td>
  </tr>
  <tr>
   <td class="miyazaki" rowspan="5" colspan="3">石<br>
   川</td>
   <td class="miyazaki"></td>
   <td colspan="3" rowspan="3"></td>
   <td colspan="5"></td>
   <td class="kumamoto"></td>
   <td class="kumamoto" rowspan="2"></td>
   <td class="saga" rowspan="2"></td>
  </tr>
  <tr>
   <td rowspan="2"></td>
   <td colspan="2"></td>
   <td class="kumamoto" rowspan="2" colspan="4"></td>
  </tr>
  <tr>
   <td class="saga"></td>
   <td class="kumamoto"></td>
   <td class="ooita Nwrap" colspan="5" rowspan="4">群馬</td>
   <td class="fukuoka" rowspan="3"></td>
   <td class="fukuoka" rowspan="3" colspan="3">栃木</td>
   <td class="fukuoka" rowspan="3"></td>
   <td class="miyazaki" colspan="4" rowspan="3">茨城</td>
  </tr>
  <tr>
   <td colspan="2"></td>
   <td colspan="3"></td>
   <td class="saga" colspan="2"></td>
   <td class="kumamoto"></td>
   <td class="kumamoto" colspan="4"></td>
  </tr>
  <tr>
   <td colspan="2"></td>
   <td></td>
   <td rowspan="6">対<br>
   馬</td>
   <td rowspan="5" colspan="20"></td>
   <td rowspan="5"></td>
   <td rowspan="4" colspan="3"></td>
   <td rowspan="2" colspan="2"></td>
   <td></td>
   <td rowspan="4" colspan="13"></td>
   <td rowspan="3" colspan="4"></td>
   <td></td>
   <td></td>
   <td class="saga Nwrap" colspan="5">富山</td>
   <td class="fukuoka" rowspan="2"></td>
   <td class="fukuoka" colspan="4"></td>
  </tr>
  <tr>
   <td class="miyazaki"></td>
   <td class="miyazaki" rowspan="3"></td>
   <td rowspan="3"></td>
   <td class="saga" title="隠岐諸島 島後"></td>
   <td></td>
   <td class="miyazaki" colspan="4" rowspan="2"></td>
   <td class="saga" colspan="5"></td>
   <td class="fukuoka" rowspan="2" colspan="4"></td>
   <td class="ooita"></td>
   <td class="fukuoka" colspan="3"></td>
   <td class="miyazaki" colspan="7"></td>
  </tr>
  <tr>
   <td></td>
   <td class="saga" title="隠岐諸島 西ノ島"></td>
   <td colspan="2" rowspan="2"></td>
   <td class="miyazaki"></td>
   <td class="ooita" rowspan="2" colspan="4"></td>
   <td class="fukuoka"></td>
   <td class="fukuoka"></td>
   <td class="fukuoka" rowspan="2"></td>
   <td class="ooita" colspan="2"></td>
   <td class="kumamoto" rowspan="3" colspan="7">埼玉</td>
   <td class="fukuoka" colspan="6"></td>
  </tr>
  <tr>
   <td class="miyazaki"></td>
   <td></td>
   <td rowspan="3"></td>
   <td rowspan="3"></td>
   <td class="kumamoto Nwrap" rowspan="3" colspan="3">福井</td>
   <td class="kumamoto" colspan="2"></td>
   <td class="ooita"></td>
   <td class="ooita"></td>
   <td class="fukuoka" colspan="4"></td>
   <td class="fukuoka" colspan="2"></td>
   <td class="kumamoto" colspan="2"></td>
   <td class="fukuoka" colspan="4" rowspan="2"></td>
   <td rowspan="2"></td>
   <td rowspan="8"></td>
  </tr>
  <tr>
   <td rowspan="5" colspan="8"></td>
   <td class="saga" colspan="4"></td>
   <td colspan="13"></td>
   <td></td>
   <td></td>
   <td class="ooita" rowspan="4" colspan="7">岐阜</td>
   <td class="fukuoka Nwrap" colspan="4" rowspan="4">長野</td>
   <td class="miyazaki" rowspan="4" colspan="5">山<br>
   梨</td>
   <td class="kumamoto"></td>
  </tr>
  <tr>
   <td rowspan="2" colspan="16"></td>
   <td></td>
   <td class="kumamoto"></td>
   <td class="saga" rowspan="2"></td>
   <td class="saga" rowspan="2" colspan="7">島根</td>
   <td rowspan="2" class="saga"></td>
   <td class="saga"></td>
   <td class="kumamoto" colspan="8" rowspan="2">鳥取</td>
   <td class="fukuoka Nwrap" colspan="4" rowspan="5">兵庫</td>
   <td class="ooita" rowspan="3">京<br>
   都</td>
   <td></td>
   <td></td>
   <td class="saga" colspan="8" rowspan="2">東京</td>
   <td class="fukuoka Nwrap" colspan="5" rowspan="2">千葉</td>
  </tr>
  <tr>
   <td></td>
   <td class="kumamoto" rowspan="3" colspan="2">山<br>
   口</td>
   <td class="kumamoto"></td>
   <td class="kumamoto"></td>
   <td class="kumamoto" colspan="4"></td>
   <td class="miyazaki"></td>
   <td class="miyazaki"></td>
  </tr>
  <tr>
   <td rowspan="2" colspan="2"></td>
   <td></td>
   <td rowspan="2" colspan="12"></td>
   <td class="kumamoto" colspan="2" rowspan="2"></td>
   <td class="kumamoto" rowspan="2"></td>
   <td class="ooita"></td>
   <td class="ooita" colspan="8" rowspan="2">広島</td>
   <td class="miyazaki" colspan="8" rowspan="3">岡山</td>
   <td class="ooita" rowspan="2" colspan="2"></td>
   <td class="miyazaki" colspan="5">滋賀</td>
   <td class="ooita Nwrap" colspan="7">神奈川</td>
   <td rowspan="10"></td>
   <td rowspan="3"></td>
   <td class="fukuoka" rowspan="3"></td>
   <td class="fukuoka" rowspan="4" colspan="2"></td>
   <td class="fukuoka" rowspan="2"></td>
  </tr>
  <tr>
   <td class="miyazaki" title="壱岐島"></td>
   <td></td>
   <td class="saga" rowspan="6">大<br>
   阪</td>
   <td class="miyazaki" colspan="4"></td>
   <td class="saga"></td>
   <td class="saga"></td>
   <td class="miyazaki"></td>
   <td class="miyazaki"></td>
   <td class="miyazaki" colspan="4" rowspan="5">愛<br>
   知</td>
   <td class="fukuoka"></td>
   <td class="fukuoka"></td>
   <td class="kumamoto" colspan="2"></td>
   <td class="miyazaki"></td>
   <td class="miyazaki"></td>
   <td class="miyazaki"></td>
   <td class="kumamoto"></td>
   <td class="kumamoto" rowspan="2"></td>
   <td class="kumamoto" colspan="2" rowspan="5"></td>
   <td colspan="4"></td>
   <td class="ooita"></td>
  </tr>
  <tr>
   <td colspan="5" rowspan="5"></td>
   <td rowspan="2"></td>
   <td></td>
   <td class="miyazaki" title="平戸島"></td>
   <td colspan="9"></td>
   <td class="fukuoka" colspan="5" rowspan="3"></td>
   <td colspan="4"></td>
   <td class="kumamoto"></td>
   <td colspan="2"></td>
   <td class="ooita" colspan="8"></td>
   <td class="ooita" colspan="4"></td>
   <td class="saga" colspan="2" rowspan="8">三<br>
   重</td>
   <td class="saga" colspan="2"></td>
   <td class="miyazaki" colspan="2"></td>
   <td class="miyazaki" rowspan="4"></td>
   <td class="kumamoto Nwrap" colspan="5" rowspan="4">静岡</td>
   <td class="kumamoto" colspan="2" rowspan="2"></td>
   <td rowspan="3"></td>
   <td rowspan="3"></td>
   <td></td>
   <td rowspan="8"></td>
   <td></td>
   <td rowspan="2"></td>
  </tr>
  <tr>
   <td class="miyazaki" title="平戸島"></td>
   <td rowspan="3"></td>
   <td class="miyazaki" rowspan="5"
    style="border-left : 2px solid #f0ffff;">長<br>
   崎</td>
   <td></td>
   <td class="saga" colspan="2"></td>
   <td></td>
   <td class="fukuoka" rowspan="5" colspan="4">福<br>
   岡</td>
   <td colspan="25" rowspan="2"></td>
   <td></td>
   <td rowspan="3"></td>
   <td class="fukuoka" rowspan="7" colspan="4">奈<br>
   良</td>
   <td colspan="2" rowspan="3"></td>
   <td class="miyazaki"></td>
   <td></td>
   <td rowspan="3"></td>
   <td rowspan="2"></td>
   <td rowspan="8"></td>
   <td colspan="2"></td>
  </tr>
  <tr>
   <td colspan="2" rowspan="6"></td>
   <td class="saga Nwrap" colspan="4" rowspan="3">佐賀</td>
   <td class="fukuoka" rowspan="2" title="淡路島"
     style="border-right :3px solid #f0ffff;  font-size : 3px;">&nbsp;</td>
   <td></td>
   <td></td>
   <td class="kumamoto"></td>
   <td rowspan="4"></td>
   <td colspan="6" rowspan="12"></td>
  </tr>
  <tr>
   <td class="ooita" rowspan="5" colspan="4">大<br>
   分</td>
   <td class="ooita" colspan="3" rowspan="2"></td>
   <td colspan="7"></td>
   <td class="saga" colspan="4" width="39"></td>
   <td colspan="3"></td>
   <td class="ooita" colspan="8" rowspan="3">香川</td>
   <td rowspan="2"></td>
   <td class="miyazaki" colspan="2"></td>
   <td rowspan="2"></td>
   <td></td>
   <td class="saga" title="伊豆大島"></td>
   <td></td>
  </tr>
  <tr>
   <td class="miyazaki" rowspan="2"></td>
   <td rowspan="2" colspan="4"></td>
   <td class="saga" rowspan="2"></td>
   <td class="saga" colspan="9" rowspan="3">愛媛</td>
   <td rowspan="8"></td>
   <td class="saga"></td>
   <td class="saga"></td>
   <td rowspan="8"></td>
   <td colspan="2"></td>
   <td colspan="9"></td>
   <td></td>
   <td colspan="2"></td>
   <td></td>
   <td rowspan="2"></td>
   <td title="伊豆大島"></td>
   <td rowspan="4"></td>
  </tr>
  <tr>
   <td colspan="3"></td>
   <td></td>
   <td class="miyazaki" title="五島列島 中道島"></td>
   <td></td>
   <td colspan="2" rowspan="3"></td>
   <td class="fukuoka"></td>
   <td colspan="2"></td>
   <td></td>
   <td class="miyazaki"></td>
   <td class="ooita"></td>
   <td class="ooita"></td>
   <td class="saga" rowspan="2"></td>
   <td colspan="13" rowspan="7"></td>
   <td colspan="2"></td>
   <td></td>
   <td rowspan="2"></td>
  </tr>
  <tr>
   <td class="miyazaki" colspan="4" title="五島列島 福江島"></td>
   <td></td>
   <td class="miyazaki" colspan="3"></td>
   <td class="kumamoto" colspan="5" rowspan="7">熊<br>
   本</td>
   <td colspan="3" class="ooita" rowspan="2"></td>
   <td></td>
   <td></td>
   <td class="saga" colspan="3"></td>
   <td class="miyazaki"></td>
   <td colspan="7" class="miyazaki" rowspan="4">徳島</td>
   <td class="miyazaki"></td>
   <td rowspan="6"></td>
   <td class="ooita" rowspan="2"></td>
   <td colspan="5" rowspan="2"></td>
  </tr>
  <tr>
   <td colspan="5"></td>
   <td class="miyazaki"></td>
   <td></td>
   <td class="miyazaki"></td>
   <td colspan="3" rowspan="5"></td>
   <td class="saga" colspan="2"></td>
   <td rowspan="3" colspan="10" class="kumamoto">高知</td>
   <td rowspan="5"></td>
   <td rowspan="5"></td>
   <td class="saga" title="三宅島"></td>
  </tr>
  <tr>
   <td rowspan="10" colspan="9"></td>
   <td colspan="2"></td>
   <td class="kumamoto"></td>
   <td class="miyazaki" colspan="5" rowspan="6">宮<br>
   崎</td>
   <td class="miyazaki" rowspan="3" colspan="2"></td>
   <td class="kumamoto" rowspan="2" colspan="2"></td>
   <td class="ooita Nwrap" colspan="4" rowspan="3">和歌山</td>
   <td rowspan="3" class="saga"></td>
   <td class="saga" rowspan="4"></td>
   <td class="saga" rowspan="2"></td>
   <td colspan="8"></td>
   <td></td>
  </tr>
  <tr>
   <td rowspan="2"></td>
   <td title="天草諸島 上島"></td>
   <td rowspan="4"></td>
   <td colspan="10" rowspan="3">伊豆諸島</td>
  </tr>
  <tr>
   <td class="kumamoto" title="天草諸島 上島"></td>
   <td></td>
   <td class="kumamoto" colspan="3"></td>
   <td colspan="5" rowspan="2"></td>
   <td class="kumamoto" colspan="4"></td>
   <td colspan="6"></td>
   <td rowspan="2"></td>
  </tr>
  <tr>
   <td class="kumamoto" rowspan="2" title="天草諸島 下島"></td>
   <td rowspan="2"></td>
   <td class="miyazaki" rowspan="5"></td>
   <td></td>
   <td colspan="2"></td>
   <td class="kumamoto"></td>
   <td></td>
   <td></td>
   <td class="kumamoto" colspan="2"></td>
   <td colspan="7"></td>
   <td></td>
   <td class="ooita" colspan="4"></td>
  </tr>
  <tr>
   <td rowspan="2" colspan="28"></td>
   <td class="ooita" colspan="2"></td>
   <td></td>
   <td colspan="26" rowspan="2"></td>
   <td></td>
  </tr>
  <tr>
   <td colspan="2" rowspan="5"></td>
   <td class="ooita" colspan="6"></td>
   <td></td>
   <td></td>
   <td></td>
   <td class="saga" title="八丈島"></td>
  </tr>
  <tr>
   <td class="ooita" colspan="9">鹿児島</td>
   <td class="miyazaki" rowspan="2" colspan="2"></td>
   <td colspan="2" rowspan="2"></td>
   <td rowspan="2"></td>
   <td colspan="55" rowspan="27">
   <table class="Tizu1" cellpadding="2" cellspacing="0">
    <tbody>
     <tr>
      <td colspan="59" style="background-color : #e1e1e1;"></td>
     </tr>
     <tr>
      <td style="background-color : #e1e1e1;" rowspan="11"></td>
      <td colspan="2" rowspan="24"></td>
      <td colspan="24" rowspan="9"></td>
      <td colspan="5" rowspan="7"></td>
      <td colspan="4" rowspan="4"></td>
      <td></td>
      <td colspan="20" rowspan="10"></td>
      <td rowspan="23" style="background-color : #e1e1e1;"></td>
     </tr>
     <tr>
      <td></td>
     </tr>
     <tr>
      <td class="ooita" title="徳之島"></td>
     </tr>
     <tr>
      <td></td>
     </tr>
     <tr>
      <td></td>
      <td></td>
      <td class="ooita" title="沖永良部島"></td>
      <td></td>
      <td></td>
     </tr>
     <tr>
      <td colspan="5"></td>
     </tr>
     <tr>
      <td class="ooita" title="与論島"></td>
      <td colspan="4" rowspan="4"></td>
     </tr>
     <tr>
      <td colspan="4"></td>
      <td colspan="2" rowspan="3"></td>
     </tr>
     <tr>
      <td></td>
      <td></td>
      <td class="okinawa" colspan="2">沖</td>
     </tr>
     <tr>
      <td colspan="5"></td>
      <td colspan="14">尖閣諸島</td>
      <td colspan="5" rowspan="7"></td>
      <td></td>
      <td class="okinawa" colspan="2">縄</td>
      <td></td>
     </tr>
     <tr>
      <td colspan="8"></td>
      <td class="okinawa"></td>
      <td colspan="8"></td>
      <td></td>
      <td rowspan="6"></td>
      <td colspan="3" rowspan="6"></td>
      <td colspan="22" rowspan="13"></td>
      <td rowspan="8">大<br>
      東<br>
      諸<br>
      島</td>
      <td rowspan="13"></td>
      <td class="okinawa" title="北大東島"></td>
      <td rowspan="13" colspan="2"></td>
     </tr>
     <tr>
      <td rowspan="12" style="background-color : #e1e1e1;"></td>
      <td colspan="18" rowspan="6"></td>
      <td></td>
     </tr>
     <tr>
      <td class="okinawa" title="南大東島"></td>
     </tr>
     <tr>
      <td></td>
     </tr>
     <tr>
      <td></td>
     </tr>
     <tr>
      <td></td>
     </tr>
     <tr>
      <td colspan="7">宮古島</td>
      <td rowspan="7"></td>
      <td rowspan="7"></td>
      <td></td>
     </tr>
     <tr>
      <td colspan="17"></td>
      <td class="okinawa"></td>
      <td colspan="7"></td>
      <td class="okinawa" title="沖大東島"></td>
     </tr>
     <tr>
      <td colspan="3">与那国</td>
      <td></td>
      <td colspan="7">西表島</td>
      <td colspan="2"></td>
      <td colspan="3">石垣島</td>
      <td colspan="9" rowspan="5"></td>
      <td rowspan="5"></td>
      <td rowspan="5"></td>
     </tr>
     <tr>
      <td colspan="3"></td>
      <td class="okinawa"></td>
      <td colspan="5"></td>
      <td class="okinawa"></td>
      <td colspan="2"></td>
      <td class="okinawa"></td>
      <td colspan="3"></td>
     </tr>
     <tr>
      <td colspan="16"></td>
     </tr>
     <tr>
      <td colspan="10"></td>
      <td class="okinawa"></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 colspan="4">波照間</td>
      <td></td>
     </tr>
     <tr>
      <td></td>
      <td colspan="54"></td>
      <td></td>
     </tr>
    </tbody>
   </table>
   </td>
   <td rowspan="24" colspan="5"></td>
   <td rowspan="18"></td>
   <td rowspan="17" colspan="19"></td>
   <td rowspan="24" colspan="6"></td>
  </tr>
  <tr>
   <td></td>
   <td class="ooita" rowspan="3"></td>
   <td colspan="3"></td>
   <td class="ooita" rowspan="4"></td>
   <td class="ooita" rowspan="2" colspan="2"></td>
   <td></td>
  </tr>
  <tr>
   <td></td>
   <td colspan="2"></td>
   <td class="ooita"></td>
   <td colspan="6" rowspan="4"></td>
   <td rowspan="4"></td>
  </tr>
  <tr>
   <td class="ooita"></td>
   <td class="ooita"></td>
   <td colspan="2" rowspan="3"></td>
   <td class="ooita"></td>
   <td></td>
  </tr>
  <tr>
   <td colspan="14"></td>
   <td colspan="2" rowspan="2"></td>
  </tr>
  <tr>
   <td colspan="14"></td>
   <td></td>
  </tr>
  <tr>
   <td colspan="16" style="text-align : right;">種子島</td>
   <td></td>
   <td class="ooita"></td>
   <td></td>
   <td colspan="6"></td>
   <td></td>
  </tr>
  <tr>
   <td colspan="14" rowspan="2"></td>
   <td class="ooita" colspan="2" rowspan="2"
     style="line-height:0.2;">&nbsp;</td>
   <td colspan="9" rowspan="3"></td>
   <td rowspan="3"></td>
  </tr>
  <tr>
  </tr>
  <tr>
   <td colspan="14"></td>
   <td></td>
   <td></td>
  </tr>
  <tr>
   <td colspan="10"></td>
   <td colspan="9">屋久島</td>
   <td colspan="6"></td>
   <td></td>
  </tr>
  <tr>
   <td colspan="12" rowspan="3"></td>
   <td></td>
   <td colspan="12" rowspan="6"></td>
   <td rowspan="6"></td>
  </tr>
  <tr>
   <td></td>
  </tr>
  <tr>
   <td></td>
  </tr>
  <tr>
   <td colspan="5"></td>
   <td class="ooita" colspan="3"></td>
   <td colspan="5"></td>
  </tr>
  <tr>
   <td colspan="4"></td>
   <td class="ooita" colspan="3"></td>
   <td colspan="6"></td>
  </tr>
  <tr>
   <td colspan="7" rowspan="8"></td>
   <td colspan="6">奄美大島</td>
  </tr>
  <tr>
   <td colspan="18" rowspan="7"></td>
   <td rowspan="7"></td>
   <td colspan="11">小笠原<br>
   諸島</td>
   <td colspan="8"></td>
  </tr>
  <tr>
   <td class="saga" title="父島"></td>
   <td colspan="19" rowspan="6"></td>
  </tr>
  <tr>
   <td></td>
  </tr>
  <tr>
   <td class="saga" title="母島"></td>
  </tr>
  <tr>
   <td></td>
  </tr>
  <tr>
   <td></td>
  </tr>
  <tr>
   <td></td>
  </tr>
 </tbody>
</table>
</body>
</html>
日本地図
HTMLのテーブルタグで作成しました。<td>タグのセル結合
<td rowspan="*" colspan="*"></td>を縦横に駆使して
都道府県の形や主な半島や、島を表現してみました。
北方領土や、いま問題になっている、尖閣諸島、竹島も記載しました。
もちろん日本国領土だからです。
県名で自動改行が入るとその形が極端の変わる箇所は自動改行禁止
white-space: nowrap; プロパティをを利用してます。
また、北海道が小さい、長野県が岩手県より大きいなど、つっこみたくなる
箇所も多々ありますが、御了承を.........

ロリポップ！のドメインは選べる全８５種類！！
☆さくらのレンタルサーバ ビジネスプロ☆
HTML テーブル( 表 ) の作成。
テーブル table のセルを結合します。
table-layoutプロパティ CSS テーブル
Table cellIndexプロパティ、セルのインデックス値の取得
HTML DOM Table rows,cellsコレクション
表 table のセル内で行を自動改行させない
テーブルの表題を固定してデータ部分だけをスクロールさせる。
テーブルの行の背景色を一行おきに変えます。 javascript
テーブルの行の文字色,背景色を変えてハイライトします。
background 背景に関するプロパティ 一覧
borderプロパティ

タグ： white-space
posted by javaScript at 19:53 | 大阪 ☁ | テーブル | このブログの読者になる | 更新情報をチェックする

2012年10月01日

表 table のセル内で行を自動改行させない

スポンサード　リンク

 セル内のテキストの自動改行の扱いを指定
white-space: nowrap

① 右のセル 自動改行 禁止
設定していないセル「自動改行」 セル内の「自動折り返し」を禁止
② 両方のセル 指定なし
設定していないセル「自動折り返し」 設定していないセル「自動改行」
③ 両方のセル 自動改行 禁止
セル内の「自動折り返し」を禁止 セル内の「自動折り返し」を禁止

heteml
【ちょ～簡単設置】初心者でもすぐ使える、無料アクセス解析の決定版！
ロリポップ！のドメインは選べる全８５種類！！
☆さくらのレンタルサーバ ビジネスプロ☆

サンプルソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
 <head>
<title>セル内の自動改行を禁止</title>
<style type="text/css">
<!--
.wrap-tbl {
width: 350px;
border: 1px green solid;
 margin-bottom : 16px;

}
.wrap-tbl td,th{
border: 1px green solid;
font-size : 16px;
}

.td-Nwrap {
white-space: nowrap; 
 color : #8b0000;
}
-->
</style>
</head>
<body>

<table class="wrap-tbl">
  <tr>
   <th colspan="2">① 右のセル 自動改行 禁止</th>
  </tr>
  <tr>
<td>設定していないセル「自動改行」</td>
<td class="td-Nwrap">セル内の「自動折り返し」を禁止</td>
</tr>
</table>

<table class="wrap-tbl">
 <tbody>
  <tr>
   <th colspan="2">② 両方のセル 指定なし</th>
  </tr>
  <tr>
   <td>設定していないセル「自動折り返し」</td>
   <td>設定していないセル「自動改行」</td>
  </tr>
 </tbody>
</table>

<table class="wrap-tbl">
 <tbody>
  <tr>
   <th colspan="2">③ 両方のセル 自動改行 禁止</th>
  </tr>
  <tr>
   <td class="td-Nwrap">セル内の「自動折り返し」を禁止</td>
   <td class="td-Nwrap">セル内の「自動折り返し」を禁止</td>
  </tr>
 </tbody>
</table>

</body>
</html>
white-space プロパティ
  white-space は、テキスト内で半角スペース、タブ、改行や
自動改行の扱いを設定するプロパティです。
table要素の（th タグ、td タグ）にwhite-space: nowrap;を指定すると、
セル内の自動折り返しを禁止することができます。
white-space: nowrap;
// 連続する半角スペースや改行は1つの半角スペースにして表示し、行の折り返しは、しません。
white-space とは
IT用語辞典e-Wardより
 印刷物やWebページ、プログラムのソースコードなどで、
文字や画像などが何も記されていない余白部分のこと。
また、文章中で字間や単語間、行頭や行末などに挿入される空白(文字)、および、
空白として表示される(HTMLなどにおける)特殊文字や記法などのこと。
例えば、HTMLファイル中に存在するスペース文字やタブ文字、改行コードなどは
ブラウザにおける表示上は一文字分の空白とみなされるほか、“&nbsp;”という実体参照を記述すると
そこにホワイトスペースを確実に挿入することができる。

ロリポップ！のドメインは選べる全８５種類！！
☆さくらのレンタルサーバ ビジネスプロ☆
HTML テーブル( 表 ) の作成。
テーブル table のセルを結合します。
table-layoutプロパティ CSS テーブル
Table cellIndexプロパティ、セルのインデックス値の取得
HTML DOM Table rows,cellsコレクション
テーブルの行、表示/非表示 javascript
テーブルの表題を固定してデータ部分だけをスクロールさせる。
テーブルの行の背景色を一行おきに変えます。 javascript
テーブルの行の文字色,背景色を変えてハイライトします。

タグ：white-space: nowrap; white-space
posted by javaScript at 15:03 | 大阪 ☁ | テーブル | このブログの読者になる | 更新情報をチェックする
<< 1 2 -
×

この広告は90日以上新しい記事の投稿がないブログに表示されております。