　☆ Sanctuary ☆　　Smile for you

TABLEタグ（５）

||　フリーページ一覧表へ戻る　||　ＴＡＢＬＥタグ（４）へ　||　ＴＡＢＬＥタグ（６）へ　||

テーブルタグ　<table>　の使い方を覚えよう！！（５）

table タグはページの作成に欠かせないものです。table タグを使うと写真や文章などを縦横に整理して並べたりすることができます。
それでは table タグの便利な使い方を見てみましょう。。

● セルを結合するには？

今回は、このＨＰにある「偉人伝ヘルメス」の１コマを作ってみましょう！
↓こんな感じの。

☆ ヘルメスとアフロディーテの結婚 ☆

ヘルメスは、ディロス島の王女アフロディーテと結婚しました。花嫁として迎えられたアフロディーテは、泡から生まれた美の女神と言われたほど美しく、透き通った歌声は、まるで天使のようでした。青年になった２７才のヘルメスが、１８才の輝くばかりのアフロディーテにささやきました。

( ・o・)b さて、ここで問題があります。１列目の絵は２行分の領域に収まってますね。
２列目はそのまま２行になっています。こういう表はどうやって作ればいいのでしょうか？
まずは、手順を追って作って行くことにしましょう！

とりあえずは、写真を１行１列目に、緑の題を１行２列目に、
２行１列目には何も入れずに、説明文を２行２列目にあてはめてみましょう！
全体の幅を 500 として、１列目の幅を 200 に、２列目の幅を 300 にしてみます。

<table bgcolor="#FFFFFF" border="1" width="500">
<tr>
<td width="200">
<img src="http://plaza.rakuten.co.jp/img/user/98/02/1639802/66.jpg" width="170" height="135" alt="ヘルメスとアフロディーテの結婚"></td>
<td width="300">
<font color="green"><b>☆ ヘルメスとアフロディーテの結婚 ☆</b></font></td>
</tr>
<tr>
<td width="200"></td>
<td width="300">
ヘルメスは、ディロス島の王女アフロディーテと結婚しました。花嫁として迎えられたアフロディーテは、泡から生まれた美の女神と言われたほど美しく、透き通った歌声は、まるで天使のようでした。青年になった２７才のヘルメスが、１８才の輝くばかりのアフロディーテにささやきました。</td>
</tr>
</table>

	☆ ヘルメスとアフロディーテの結婚 ☆
*	ヘルメスは、ディロス島の王女アフロディーテと結婚しました。花嫁として迎えられたアフロディーテは、泡から生まれた美の女神と言われたほど美しく、透き通った歌声は、まるで天使のようでした。青年になった２７才のヘルメスが、１８才の輝くばかりのアフロディーテにささやきました。

( ・o・)b あれれ！とっても体裁が悪いですね。
それでは、まず１列目の絵を２行分の領域に納めてみましょう！
そのためには、td タグに rowspan="2" を追加します。
rowspan="2" は２行を１つにまとめるということを意味します。

<table bgcolor="#FFFFFF" border="1" width="500">
<tr>
<td rowspan="2" width="200">
<img src="http://plaza.rakuten.co.jp/img/user/98/02/1639802/66.jpg" width="170" height="135" alt="ヘルメスとアフロディーテの結婚"></td>
<td width="300">
<font color="green"><b>☆ ヘルメスとアフロディーテの結婚 ☆</b></font></td>
</tr>
<tr>
<td width="200"></td> ← このグレーの部分を削除します。
<td width="300">
ヘルメスは、ディロス島の王女アフロディーテと結婚しました。花嫁として迎えられたアフロディーテは、泡から生まれた美の女神と言われたほど美しく、透き通った歌声は、まるで天使のようでした。青年になった２７才のヘルメスが、１８才の輝くばかりのアフロディーテにささやきました。</td>
</tr>
</table>

※注意 ( ・o・)b グレーの部分は、２行１列目にあたります。１行１列目で、２行分にまとめたので、この部分は削除しないといけません。

↓こんな感じになります。

☆ ヘルメスとアフロディーテの結婚 ☆

( ・o・)b これでひとまずうまく収まりましたので、もう少しきれいにしてみましょう！

・絵の位置を、横中央、縦中央に配置します。( td align="center" valign="middle" )
・絵を縁取りしましょう。( img border="1" )
・全体の文字サイズを小さくしてみましょう。( style="font-size:10pt;" )

<table bgcolor="#FFFFFF" border="1" width="500" style="font-size:10pt;" >
<tr>
<td rowspan="2" width="200" align="center" valign="middle" >
<img src="http://plaza.rakuten.co.jp/img/user/98/02/1639802/66.jpg" width="170" height="135" alt="ヘルメスとアフロディーテの結婚" border="1" ></td>
<td width="300">
<font color="green"><b>☆ ヘルメスとアフロディーテの結婚 ☆</b></font></td>
</tr>
<tr>
<td width="300">
ヘルメスは、ディロス島の王女アフロディーテと結婚しました。花嫁として迎えられたアフロディーテは、泡から生まれた美の女神と言われたほど美しく、透き通った歌声は、まるで天使のようでした。青年になった２７才のヘルメスが、１８才の輝くばかりのアフロディーテにささやきました。</td>
</tr>
</table>

↓こんな感じになります。

☆ ヘルメスとアフロディーテの結婚 ☆

( ・o・)b もうちょっとですね。それでは、
・緑の題の部分の横位置を中央に、縦位置も中央に配置し、( td align="center" valign="middle" )
・説明文の横位置を左寄せに、縦位置を上寄せに配置し、( td align="left" valign="top" )
てみましょう！

<table bgcolor="#FFFFFF" border="1" width="500" style="font-size:10pt;">
<tr>
<td rowspan="2" width="200" align="center" valign="middle">
<img src="http://plaza.rakuten.co.jp/img/user/98/02/1639802/66.jpg" width="170" height="135" alt="ヘルメスとアフロディーテの結婚" border="1"></td>
<td width="300" align="center" valign="middle" >
<font color="green"><b>☆ ヘルメスとアフロディーテの結婚 ☆</b></font></td>
</tr>
<tr>
<td width="300" align="left" valign="top" >
ヘルメスは、ディロス島の王女アフロディーテと結婚しました。花嫁として迎えられたアフロディーテは、泡から生まれた美の女神と言われたほど美しく、透き通った歌声は、まるで天使のようでした。青年になった２７才のヘルメスが、１８才の輝くばかりのアフロディーテにささやきました。</td>
</tr>
</table>

↓こんな感じになります。

☆ ヘルメスとアフロディーテの結婚 ☆

( ・o・)b ちょっと説明文の行間を空けてみましょう！( style="line-height:150%" )
150% は半行文の隙間を空けることになります。200% だと１行分の隙間になります。

<table bgcolor="#FFFFFF" border="1" width="500" style="font-size:10pt; line-height:150% ;">
<tr>
<td rowspan="2" width="200" align="center" valign="middle">
<img src="http://plaza.rakuten.co.jp/img/user/98/02/1639802/66.jpg" width="170" height="135" alt="ヘルメスとアフロディーテの結婚" border="1"></td>
<td width="300" align="center" valign="middle">
<font color="green"><b>☆ ヘルメスとアフロディーテの結婚 ☆</b></font></td>
</tr>
<tr>
<td width="300" align="left" valign="top">
ヘルメスは、ディロス島の王女アフロディーテと結婚しました。花嫁として迎えられたアフロディーテは、泡から生まれた美の女神と言われたほど美しく、透き通った歌声は、まるで天使のようでした。青年になった２７才のヘルメスが、１８才の輝くばかりのアフロディーテにささやきました。</td>
</tr>
</table>

↓こんな感じになります。

☆ ヘルメスとアフロディーテの結婚 ☆

( ^o^)b これでよくなりました。が、枠の太さが微妙に太いですね。
ページの先頭の表は、枠がすっきりとした印象になっています。( border="1" cellspacing="0" )
そして、また文章と枠の間の隙間がもうちょっと広くなっています。( cellpadding="5" )

<table bgcolor="#FFFFFF" border="1" cellspacing="0" cellpadding="5" width="500" style="font-size:10pt;line-height:150%;">
<tr>
<td rowspan="2" width="200" align="center" valign="middle">
<img src="http://plaza.rakuten.co.jp/img/user/98/02/1639802/66.jpg" width="170" height="135" alt="ヘルメスとアフロディーテの結婚" border="1"></td>
<td width="300" align="center" valign="middle">
<font color="green"><b>☆ ヘルメスとアフロディーテの結婚 ☆</b></font></td>
</tr>
<tr>
<td width="300" align="left" valign="top">
ヘルメスは、ディロス島の王女アフロディーテと結婚しました。花嫁として迎えられたアフロディーテは、泡から生まれた美の女神と言われたほど美しく、透き通った歌声は、まるで天使のようでした。青年になった２７才のヘルメスが、１８才の輝くばかりのアフロディーテにささやきました。</td>
</tr>
</table>

↓こんな感じになります。

☆ ヘルメスとアフロディーテの結婚 ☆

( ^o^)b これで出来上がりました。
いかがでしたでしょうか？今回はセルの結合のしかたについて勉強しました。
それでは、みんなもく(￣Д￣)ﾉｶﾞﾝﾊﾞﾛｰｰｰ♪

table tag (5)

ジャンル別一覧