Home > 備忘録 > Web page 作成 > リストスタイル > table の caption に( 57 )

table の caption にリストを設定する

1. HTML

<ol class="jisaku">
	<table><tr>
	<td style="padding-right:2em;">
		<table class="tdemo">
			<caption><li>東京都</li></caption>		<!-- li タグをつける-->
			<thead><th>郵便番号</th><th>事業所名</th></thead>
			<tbody>
				<tr><td>2068601</td><td>稲城市役所</td></tr>
				<tr><td>1948540</td><td>東京都　町田都税事務所</td></tr>
				<tr><td>1438565</td><td>大森税務署</td></tr>
				<tr><td>1358383</td><td>東京都江東区役所</td></tr>
				<tr><td>1168507</td><td>荒川区がん予防・健康づくりセンター</td></tr>
			</tbody>
		</table>
	</td>
	<td>
		<table class="tdemo">
			<caption><li>北海道</li></caption>		<!-- li タグをつける-->
			<thead><th>郵便番号</th><th>事業所名</th></thead>
			<tbody>
				<tr><td>0985595</td><td>中頓別町役場</td></tr>
				<tr><td>0048613</td><td>札幌市清田区役所</td></tr>
				<tr><td>0908585</td><td>北見社会保険事務所</td></tr>
			</tbody>
		</table>
	</td>
	</tr></table>
	<table><tr>
	<td style="padding:1em 2em 0 0;">
		<table class="tdemo">
			<caption><li>愛知県</li></caption>		<!-- li タグをつける-->
			<thead><th>郵便番号</th><th>事業所名</th></thead>
			<tbody>
				<tr><td>4688513</td><td>愛知県警察運転免許試験場</td></tr>
				<tr><td>4768601</td><td>東海市役所</td></tr>
				<tr><td>4413695</td><td>田原市役所　渥美支所</td></tr>
			</tbody>
		</table>
	</td>
	<td>
		<table class="tdemo">
			<caption><li>神奈川県</li></caption>		<!-- li タグをつける-->
			<thead><th>郵便番号</th><th>事業所名</th></thead>
			<tbody>
				<tr><td>2368651</td><td>神奈川県立循環器呼吸器病センター</td></tr>
				<tr><td>2418515</td><td>神奈川県立　がんセンター</td></tr>
				<tr><td>2548686</td><td>平塚市役所</td></tr>
				<tr><td>2518533</td><td>神奈川県聴覚障害者福祉センター</td></tr>
			</tbody>
		</table>
	</td>
	</tr></table>
</ol>

2. スタイルシート

ol.jisaku{
	counter-reset:item 10;	/*カウンターを10にリセットして11から開始する*/
}
ol.jisaku li{		/*リストの設定*/
	list-style-type:none;	/*リストの先頭に表示するマーカー文字の種類を指定*/
	white-space:nowrap;		/*自動的に改行しない*/
/*	margin-left:-1em;*/
	color:#cc0000;			/*色の指定*/
}
ol.jisaku li:before {		/*リストの左側の設定*/
	counter-increment: item;							/*カウンタ名を定義する*/
	content:"(" counter(item,decimal) ")" " " "<- ";	/*表示するデータ*/
	color:green;
	margin-left:-2em;									/*表示位置を調整*/
}
ol.jisaku li:after {	/*リストの右側の設定*/	
	content:" ->";	/*表示するデータ*/
	color:blue;		/*色の指定*/
}
table.tdemo{
	margin-left:2em;
}
table.tdemo caption{
	text-align:left;
}
table.tdemo thead{
	background-color:#ffdddd;
}
table.tdemo th,
table.tdemo td{
	border:1px #cc0000 solid;
	padding:0.2em 0.3em;
}
table.tdemo tbody td:{
	text-align:right;
}

3. 実行結果

東京都 郵便番号 事業所名 2068601 稲城市役所 1948540 東京都　町田都税事務所 1438565 大森税務署 1358383 東京都江東区役所 1168507 荒川区がん予防・健康づくりセンター

北海道 郵便番号 事業所名 0985595 中頓別町役場 0048613 札幌市清田区役所 0908585 北見社会保険事務所

愛知県 郵便番号 事業所名 4688513 愛知県警察運転免許試験場 4768601 東海市役所 4413695 田原市役所　渥美支所

神奈川県 郵便番号 事業所名 2368651 神奈川県立循環器呼吸器病センター 2418515 神奈川県立　がんセンター 2548686 平塚市役所 2518533 神奈川県聴覚障害者福祉センター