素材工房 まさん房素材置き場TOPアイコン集選択画面>テーブル素材の使い方
テーブル素材の使い方 ここでは、テーブル用素材を配置してテーブルの枠のように使う方法を説明します。
説明と言っても、サンプルソースを書いてあるだけですけど。
手抜きですみません。
なお、ソースは行数が結構ありますのでスクロールして見てくださいね。
私流のやり方ですので効率の悪い部分や、「この書き方あんまりよくないよー」と言う部分もあるかもしれません。
あくまでも私流のやり方ですので、自分流にアレンジするか、手紙を書くのページからお知らせください。

ここでは、テーブル用素材「瑠璃」を使って説明していきます。
sample
k_lu.gif

k_ld.gif

k_ru.gif

k_rd.gif

t_l.gif

t_r.gif

t_u.gif

t_d.gif

juji.gif

line_h.gif

line_v.gif
方法としては大きく分けて3種類です。
    1.HTMLのみで記述
    2.CSS(カスケーディング・スタイル・シート)も織り交ぜて記述
    3.テーブルを使わずCSSで位置や大きさを指定。

私個人としては、2番目の方法がオススメです。
なぜならば、CSSファイルを別にすることで、編集の際見やすいと言うことと、
CSSを編集することで、少ない労力で一括してスタイルを変更したり出来るからです。
3番目の方法はテーブルで配置すると表示がずれてしまうブラウザ用です。 この方法は労力が大きいですが、一応ずれてしまっては元も子もないので、私はこの方法でテーブル素材を配置しています。

しかし、私自身もまだまだ、使いこなせてるとは言えないし、
ブラウザの対応状況もどうなっているのか詳しくはわかりません。
ただ、有名なブラウザはほぼ完全にスタイルを再現できていると思うし、
使い勝手も、ソースの見やすさも断然良いと思います。
1.HTMLのみで記述する方法
ファイルの構成が以下のような状態の時のソースファイルです。
[sample.html]のソース
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=x-sjis">
<title>テーブル素材の使い方〜サンプル</title>
<META NAME="author" CONTENT="まさん坊">
</head>
<body>

<table cellspacing="0" cellpadding="0">
<tr>
<td width="30px" height="30px"><img src="image/k_lu.gif" alt="左上カド" width="30px" height="30px"></td>
<td width="60px" height="30px"><img src="image/line_h.gif" alt="水平線" width="60px" height="30px"></td>
<td width="30px" height="30px"><img src="image/t_u.gif" alt="T字上" width="30px" height="30px"></td>
<td width="60px" height="30px"><img src="image/line_h.gif" alt="水平線" width="60px" height="30px"></td>
<td width="30px" height="30px"><img src="image/k_ru.gif" alt="右上カド" width="30px" height="30px"></td>
</tr>
<tr>
<td width="30px" height="60px"><img src="image/line_v.gif" alt="垂直線" width="30px" height="60px"></td>
<td></td>
<td width="30px" height="60px"><img src="image/line_v.gif" alt="垂直線" width="30px" height="60px"></td>
<td></td>
<td width="30px" height="60px"><img src="image/line_v.gif" alt="垂直線" width="30px" height="60px"></td>
</tr>
<tr>
<td width="30px" height="30px"><img src="image/t_l.gif" alt="T字左" width="30px" height="30px"></td>
<td width="60px" height="30px"><img src="image/line_h.gif" alt="水平線" width="60px" height="30px"></td>
<td width="30px" height="30px"><img src="image/juji.gif" alt="十字" width="30px" height="30px"></td>
<td width="60px" height="30px"><img src="image/line_h.gif" alt="水平線" width="60px" height="30px"></td>
<td width="30px" height="30px"><img src="image/t_r.gif" alt="T字右" width="30px" height="30px"></td>
</tr>
<tr>
<td width="30px" height="60px"><img src="image/line_v.gif" alt="垂直線" width="30px" height="60px"></td>
<td></td> <td width="30px" height="60px"><img src="image/line_v.gif" alt="垂直線" width="30px" height="60px"></td>
<td></td> <td width="30px" height="60px"><img src="image/line_v.gif" alt="垂直線" width="30px" height="60px"></td>
</tr>
<tr>
<td width="30px" height="30px"><img src="image/k_ld.gif" alt="左下カド" width="30px" height="30px"></td>
<td width="60px" height="30px"><img src="image/line_h.gif" alt="水平線" width="60px" height="30px"></td>
<td width="30px" height="30px"><img src="image/t_d.gif" alt="T字下" width="30px" height="30px"></td>
<td width="60px" height="30px"><img src="image/line_h.gif" alt="水平線" width="60px" height="30px"></td>
<td width="30px" height="30px"><img src="image/k_rd.gif" alt="右下カド" width="30px" height="30px"></td>
</tr>
</table>

</body>
</html>
2.CSS(カスケーディング・スタイル・シート)も織り交ぜて記述
ファイルの構成が以下のような状態の時のソースファイルです。
CSSはHTMLの中に直接記述しても良いのですが、私は使い勝手がよいことから、
別ファイルにしてHTMLの冒頭で読み込んでいます。
[samp_css.css]のソース
.table_ktj{
    width:30px;
    height:30px;
    background-color:#FFFFFF;
}
.table_lh{
    width:60px;
    height:30px;
    background-color:#FFFFFF;
}
.table_lv{
    width:30px;
    height:60px;
    background-color:#FFFFFF;
}
.table_none{
    background-color:#FFFFFF;
}
[sample.html]のソース
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=x-sjis">
<title>テーブル素材の使い方〜サンプル</title>
<LINK REL="STYLESHEET" TYPE="text/css" HREF="samp_css.css">
<META NAME="author" CONTENT="まさん坊">
</head>
<body>
<table cellspacing="0" cellpadding="0">
<tr>
<td class="table_ktj"><img src="image/k_lu.gif" alt="左上カド" class="table_ktj"></td>
<td class="table_lh"><img src="image/line_h.gif" alt="水平線"class="table_lh"></td>
<td class="table_ktj"><img src="image/t_u.gif" alt="T字上" class="table_ktj"></td>
<td class="table_lh"><img src="image/line_h.gif" alt="水平線" class="table_lh"></td>
<td class="table_ktj"><img src="image/k_ru.gif" alt="右上カド" class="table_ktj"></td>
</tr>
<tr>
<td class="table_lv"><img src="image/line_v.gif" alt="垂直線" class="table_lv"></td>
<td class="table_none"></td>
<td class="table_lv"><img src="image/line_v.gif" alt="垂直線" class="table_lv"></td>
<td class="table_none"></td>
<td class="table_lv"><img src="image/line_v.gif" alt="垂直線" class="table_lv"></td>
</tr>
<tr>
<td class="table_ktj"><img src="image/t_l.gif" alt="T字左" class="table_ktj"></td>
<td class="table_lh"><img src="image/line_h.gif" alt="水平線" class="table_lh"></td>
<td class="table_ktj"><img src="image/juji.gif" alt="十字" class="table_ktj"></td>
<td class="table_lh"><img src="image/line_h.gif" alt="水平線" class="table_lh"></td>
<td class="table_ktj"><img src="image/t_r.gif" alt="T字右" class="table_ktj"></td>
</tr>
<tr>
<td class="table_lv"><img src="image/line_v.gif" alt="垂直線" class="table_lv"></td>
<td class="table_none"></td>
<td class="table_lv"><img src="image/line_v.gif" alt="垂直線" class="table_lv"></td>
<td class="table_none"></td>
<td class="table_lv"><img src="image/line_v.gif" alt="垂直線" class="table_lv"></td>
</tr>
<tr>
<td class="table_ktj"><img src="image/k_ld.gif" alt="左下カド" class="table_ktj"></td>
<td class="table_lh"><img src="image/line_h.gif" alt="水平線" class="table_lh"></td>
<td class="table_ktj"><img src="image/t_d.gif" alt="T字下" class="table_ktj"></td>
<td class="table_lh"><img src="image/line_h.gif" alt="水平線" class="table_lh"></td>
<td class="table_ktj"><img src="image/k_rd.gif" alt="右下カド" class="table_ktj"></td>
</tr>
</table>

</body>
</html>
3.テーブルを使わずCSSで位置や大きさを指定。
ファイルの構成が以下のような状態の時のソースファイルです。
CSSはHTMLの中に直接記述しても良いのですが、私は使い勝手がよいことから、
別ファイルにしてHTMLの冒頭で読み込んでいます。
テーブル素材といって紹介しているのに、テーブルを使わずに配置してしまうとは・・・反則ですか?

以下のソースをそのまま使うと、ブラウザでは上から[150pxcel]左から[200pixel]を起点として他のサンプルと同じ表が出来上がります。
ご自分で使う際は、CSSの「top」や「left」の値を変更して位置を変えたり、
横線(「l_h」で始まるid)の「width」や、縦線(「l_v」で始まるid)の「height」を変更して大きさを変えてみてください。
ただしこの方法だと表を小分けにしていけばその分だけCSSのクラスやidが増えてしまうので、あまり複雑な表には向かないかもしれません。
[samp_css.css]のソース
/* 1列目+++++++++++++++++++++++++++++++++++++++++++++++++++ */
#k_lu{
position:absolute;
top:150px;
left:200px;
width:30px;
height:30px;
}
#l_v_a_1{
position:absolute;
top:180px;
left:200px;
width:30px;
height:60px;
}
#t_l{
position:absolute;
top:240px;
left:200px;
width:30px;
height:30px;
}
#l_v_a_2{
position:absolute;
top:270px;
left:200px;
width:30px;
height:60px;
}
#k_ld{
position:absolute;
top:330px;
left:200px;
width:30px;
height:30px;
}
/* 2列目+++++++++++++++++++++++++++++++++++++++++++++++++++ */
#l_h_b_1{
position:absolute;
top:150px;
left:230px;
width:60px;
height:30px;
}
#l_h_b_2{
position:absolute;
top:240px;
left:230px;
width:60px;
height:30px;
}
#l_h_b_3{
position:absolute;
top:330px;
left:230px;
width:60px;
height:30px;
}
/* 3列目+++++++++++++++++++++++++++++++++++++++++++++++++++ */ #t_u{
position:absolute;
top:150px;
left:290px;
width:30px;
height:30px;
}
#l_v_c_1{
position:absolute;
top:180px;
left:290px;
width:30px;
height:60px;
}
#juji{
position:absolute;
top:240px;
left:290px;
width:30px;
height:30px;
}
#l_v_c_2{
position:absolute;
top:270px;
left:290px;
width:30px;
height:60px;
}
#t_d{
position:absolute;
top:330px;
left:290px;
width:30px;
height:30px;
}
/* 4列目+++++++++++++++++++++++++++++++++++++++++++++++++++ */
#l_h_d_1{
position:absolute;
top:150px;
left:320px;
width:60px;
height:30px;
}
#l_h_d_2{
position:absolute;
top:240px;
left:320px;
width:60px;
height:30px;
}
#l_h_d_3{
position:absolute;
top:330px;
left:320px;
width:60px;
height:30px;
}
/* 5列目+++++++++++++++++++++++++++++++++++++++++++++++++++ */
#k_ru{
position:absolute;
top:150px;
left:380px;
width:30px;
height:30px;
}
#l_v_e_1{
position:absolute;
top:180px;
left:380px;
width:30px;
height:60px;
}
#t_r{
position:absolute;
top:240px;
left:380px;
width:30px;
height:30px;
}
#l_v_e_2{
position:absolute;
top:270px;
left:380px;
width:30px;
height:60px;
}
#k_rd{
position:absolute;
top:330px;
left:380px;
width:30px;
height:30px;
}
[sample.html]のソース
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=x-sjis">
<title>テーブル素材の使い方〜サンプル</title>
<LINK REL="STYLESHEET" TYPE="text/css" HREF="samp_css.css">
<META NAME="author" CONTENT="まさん坊">
</head>
<body>

<img src="image/k_lu.gif" id="k_lu">
<img src="image/line_v.gif" id="l_v_a_1">
<img src="image/t_l.gif" id="t_l">
<img src="image/line_v.gif" id="l_v_a_2">
<img src="image/k_ld.gif" id="k_ld">
<img src="image/line_h.gif" id="l_h_b_1">
<img src="image/line_h.gif" id="l_h_b_2">
<img src="image/line_h.gif" id="l_h_b_3">

<img src="image/t_u.gif" id="t_u">
<img src="image/line_v.gif" id="l_v_c_1">
<img src="image/juji.gif" id="juji">
<img src="image/line_v.gif" id="l_v_c_2">
<img src="image/t_d.gif" id="t_d">

<img src="image/line_h.gif" id="l_h_d_1">
<img src="image/line_h.gif" id="l_h_d_2">
<img src="image/line_h.gif" id="l_h_d_3">

<img src="image/k_ru.gif" id="k_ru">
<img src="image/line_v.gif" id="l_v_e_1">
<img src="image/t_r.gif" id="t_r">
<img src="image/line_v.gif" id="l_v_e_2">
<img src="image/k_rd.gif" id="k_rd">

</body>
</html>