6-7-3-3. 文字間の空白表示（Table の使い方)

1. 画像のタイトルを表示する場合の例

画像のタイトルを下図の様に表示したい場合、文字間を空白で埋めると、ブラウザによって位置がずれる。


そこで、これを解消するために Table を使用。


2. style での Table 定義

3つの画像を並べるためのサンプル。

<style type="text/css">
<!--
.table3 {
 	border-collapse: collapse;
 	border-color: #000000;
  	width: 520px;
	}
.table3 th {
 	background-color: #e0ffff;
 	width: 160px;
 	height: 15px;
 	font-size: 11px;
 	color: #000000;
 	text-align: center;
 	font-weight: normal;
	}
.table3 td {
 	background-color: #e0ffff;
 	width: 170px;
 	height: 127px;
	}
-->
</style>

3. Body での Table 定義

3つの画像を並べたサンプル。
th でタイトルを表示し、td で画像を表示しています。

<p>
<table class="table3" border="1" cellspacing="0" cellpadding="0">
	<tr>
		<th>足利庭園入口</th>
		<th hspace="12">足利庭園</th>
		<th hspace="22">足利庭園</th>
	</tr>
	<tr>
		<td><a href="./img11/asikaga1.jpg" rel="lightbox[miti]" title="足利庭園入口">
		<img src="./img11/asikaga1.jpg" width="171" height="127" align="left"></a></td>
		<td><a href="./img11/asikaga2.jpg" rel="lightbox[miti]" title="足利庭園">
		<img src="./img11/asikaga2.jpg" width="171" height="127" align="left"></a></td>
		<td><a href="./img11/asikaga4.jpg" rel="lightbox[miti]" title="足利庭園">
		<img src="./img11/asikaga4.jpg" width="171" height="127" align="left"></a></td>
	</tr>
</table>
</p>

◆Tableでの表示例


4. Table の属性

<table style="font-size: 13px;" border="0" cellspacing="10">

border : 外枠線の幅を指定する　 border="0"にすると、枠線無しとなる

cellspacing="10" : セルの右側に余白を設ける


Table の上下に余白を設ける・・・ダミー画像を入れる
　<tr><td><img src="./img4-00/space.gif" width="5" height="5" alt=""></td></tr>






PAGE TOP ▲

開発ノウハウ等