table２１ ■可変■　tableに左右の入れ子（画像）

※バナー画像は見本なので、該当サイトの本物のバナーではありません。

●2016/03/05：即時関数で囲んで、グローバル変数を消しました。
横の列、縦の行の指定数値を変更するだけで簡単にtableの形が変えられる可変tableのセルの中に、別の小さなtableを入れました。
大きなtableのセルの中に、小さなtableが１個ずつ入る、入れ子式のJavaScriptです。
小さなtableは、左に画像、右に説明文が入ります。
つまり「table１９■table■可変tableに上下の入れ子（画像）」の上下の位置関係を左右に変更した形です。
見本は横３×縦３の指定ですが、数値を変更するだけで、横１×縦８とか横２×縦４のtableになります。

データ項目が４個の、JavaScriptの可変tableです。今回は、データの４個目の要素の「サイト説明文」にだけ、タグが使用できます。
■データを記述するだけで、説明文付きのリンク画像が、１行に複数作成できます。
・画像マウスオンで、サイト名が出ます。
・画像をクリックするとリンク先に飛びます。
・画像が無い時は、サイト名が画像の代わりに表示されます。
・横列、縦行の変更が数値変更するだけで可能。

１. 最初にtableのセルの数を考えて、縦と横の指定をする
最初に表示したいデータの数を考えます。見本は８個なので、
var col=3;//★横に並べる列の数
var row=3;//★縦に並べる行の数

セルを横１×縦８で並べることも可能ですし、横２×縦４にすることもできます。この２つの数値を修正するだけです。余ったセルは空白表示になります。
◆◇◆　実際には、var row=●;の縦の行の数は、キッチリではなく多めに指定しても大丈夫です。何もデータの無い行は、表示自体がされません。データのある行だけ表示されます。その代わりデータの数よりセルの数が少ないと、表示しきれないデータがでてきます。◆◇◆

２. tableのセルのデータ記述方法
１行の中に記述するデータは４個です。Tga[k++]=["画像","サイト名","サイトURL","サイト説明文"];という形になります。
この４個の記述順番は必ず守って下さい。
もちろんいままでどおり、データの入れ替え、増減は自由にできます。
Tga[k++]=["pt1s.jpg","eWeb","http://javascript.eweb-design.com/index.html","初心者向けに<span style='color:red;'>コピペの注意書き等あり</span>。古いサイトですが、しっかり動くjavascriptに感動。"];
　　　：
　　　：
Tga[k++]=["","HIMAJIN","http://himajin.moo.jp/","コピペですぐに使えるJavaScript。<br>マウスストーカー、グラデーション文字など有り。"];

上記が今回のtableのデータの記述です。
もしも画像が無い時は、最終行の見本のように、「""」と記述して下さい。
いままでの自動、可変tableと同じように、行はいくらでも増加可能です。
他の自動、可変tableと同じく、データにタグを記述する時は、「"」ではなく「'」を使用します。

３．位置指定の方法
いろいろと面倒なので、位置指定はdivの#wakuTではなく、tableの#Tbでします。
そのまえに、この二つの説明をします。
この自動、可変tableは、bodyに＜table id="Tb"＞＜/table＞と記述しても表示しないので、tableを＜div id="wakuT"＞＜table id="Tb"＞～～～＜/table＞＜/div＞で囲む形で表示しています。
ただし、＜table id="Tb"＞～～～＜/table＞の部分はJavaScriptのソースの中に記述してあります。
いろいろな文章の下にこのtableを表示したい時、そのbodyの中の場所に＜div id="wakuT"＞＜/div＞を記述することで、tableの位置指定ができるのです。

ところがdivは、は左から●px、上から●pxという位置指定は簡単ですが、中央配置するには、横幅サイズを指定しないとできません。
サイズ指定ができれば問題ないのですが、大量のデータを並べると具体的なサイズが不明です。
しかしtableは、具体的な横幅がなくても中央配置が可能です。だからtableの#Tbで位置指定する方が、簡単なのです。
#wakuTと#Tbの関係は、ためしに#wakuTに背景色を指定してみるとわかります。

なお参考にしたサイトがたくさんあります。代表的なものを２つだけ紹介します。
行と列を指定してtableを作る方法は、HAKUHIN's home pageから。
２次元配列に連番を付ける方法は、＠ITから。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>table２１ ■可変■　tableに左右の入れ子（画像）</title>

<!--★ここからコピー-->
<style type="text/css"><!--
/*★大きな可変tableの位置と装飾指定用*/
#Tb{
margin:40px auto ;/*★中央指定*/
border-spacing:5px 20px;/*★左右　上下の間隔指定。入れ子table同士の間隔になる*/
}

/*★ここから入れ子の小さなtable指定*/
.sTb{
border-collapse:collapse;/*★セルの隙間を空けない*/
font-size:80%;/*★文字サイズ指定 */
width:250px;/*★小さなtableの横幅指定。必須。指定しないとtableが崩れます*/
height:140px;/*★小さなtableの縦幅指定。必須。指定しないとtableが崩れます*/
border:solid 1px #aaa;/*★小さなtableの外枠線　灰色*/
background:#feb;/*★背景色　薄い黄色*/
}
.sTb td {
padding:10px;/*★説明文のセルと文字の隙間*/
}
.sTb th {
padding:5px;/*★画像のセルと文字の隙間*/
width:100px;/*★画像のセルの横幅*/  
}
/*★HTML5では画像は中央より少し上の位置に表示されるので、修正のため下記指定。不要なら削除*/
.sTb img{vertical-align: bottom;}
/*★ここまで入れ子の小さなtable指定*/

--></style>
<!--★ここまでコピー。bodyにもコピーがあります-->

</head>
<body>

<!--★ここからコピー。下の１行がtableの表示位置です-->
<div id="wakuT"></div>

<script type="text/JavaScript"><!--
/*============================================================================================
★可変tableに左右の入れ子（画像）：2016/03/05
参考サイト：http://hakuhin.jp/js/array.html　　//行と列を指定してtableを作る
参考サイト：http://www.atmarkit.co.jp/ait/articles/1412/15/news119_4.html 　//２次元配列に連番を付ける
=============================================================================================*/
(function (){  var k=0,i=0,j=0; //即時関数で囲んでグローバル変数を消すため、この行はこのままで

var Target="_new";//★リンクターゲット _top _self _blank _parent _new　等から選択。指定不要ならTarget="";で。
var col=3;//★横に並べる列の数
var row=3;//★縦に並べる行の数

/*★↓tableのデータ。　["画像","サイト名","サイトURL","サイト説明文"];　の４個をこの順番で記述。サイトの説明文にだけ、タグが使用可能です。タグ使用時は「"」ではなく「'」を使用★*/
var Tga = new Array;

//★１行目←この１行目、２行目のコメントは見やすくするためで、不要なら削除
Tga[k++]=["pt1s.jpg","eWeb","http://javascript.eweb-design.com/index.html","初心者向けに<span style='color:red;'>コピペの注意書き等あり</span>。古いサイトですが、しっかり動くjavascriptに感動。"];

Tga[k++]=["pt2s.jpg","JavaScriptスタイルシートサンプル集","http://javascript123.seesaa.net/","バリバリ更新中。解説有り。"];

Tga[k++]=["pt3s.jpg","イヌでもわかるJavaScript講座","http://www.red.oit-net.jp/tatsuya/java/","初心者向けの詳しい解説。それでもわからない私は、犬以下だと思ったのでした…。"];


//★２行目
Tga[k++]=["pt4s.jpg","JAVAスクリプト～サンプル置き場","http://www3.ocn.ne.jp/~motiya/","画像関連のJavaScriptが大量にあるのですが、ほとんどブラウザIE専用。"];

Tga[k++]=["pt5s.jpg","雛形倶楽部","http://ayanaotakashun.com/","Outlook Expressのメール専用のユニークなjavascript。ブラウザIE以外でも動作可能のJavaScript有り。"];

Tga[k++]=["frc23.gif","とらねこ庵","http://homepage2.nifty.com/toraneko/index.html","GIFアニメとJavaScript素材。『動く背景』が、とても便利。"];


//★３行目
Tga[k++]=["pt6s.jpg","便利eelife","http://eelife.org/java/java_top.html","javascriptサンプル集。『キラキラ星』有り。"];

Tga[k++]=["","HIMAJIN","http://himajin.moo.jp/","コピペですぐに使えるJavaScript。<br>マウスストーカー、グラデーション文字など有り。"];


var ttt="<table id='Tb'>";                      //★id='Tb'はtableのid
var array = new Array();                        //■１次元配列を作成する
for(i=0;i<row;i++){                             /*■縦の行指定*/
ttt+="<tr>";
array[i] = new Array();                         //■１次元配列の各番地に、配列を作成して格納する
for(j=0;j<col;j++){　　  　　　　　　　         /*■横の列指定*/
array[i][j]=Tga[i*col+j];                       //■２次元配列を連番に直す
if (array[i][j]==undefined) {array[i][j] ="";}  //■データが無い時は空白
/*■画像が無い時は、画像部分にサイト名*/
else if (Tga[i*col+j][0]=="") {array[i][j] ="<table class='sTb'><tr><th><a href='"+Tga[i*col+j][2]+"' target='"+Target+"'>"+Tga[i*col+j][1]+"</a></th><td>"+Tga[i*col+j][3]+"</td></tr></table>";}
/*■そうでない時は画像*/
else {array[i][j] ="<table class='sTb'><tr><th><a href='"+Tga[i*col+j][2]+"' target='"+Target+"'><img src='"+Tga[i*col+j][0]+"' title='"+Tga[i*col+j][1]+"'></a></th><td>"+Tga[i*col+j][3]+"</td></tr></table>";}
ttt+="<td>"+array[i][j]+"</td>";
}
ttt+="</tr>";
}
ttt+="</table>";
document.getElementById("wakuT").innerHTML =ttt; //★"wakuT"はtableの位置表示用のid。body記述用
}());//即時関数終了
//--></script>
<!--★ここまでコピー-->

</body>
</html>

table２１ ■可変■ tableに左右の入れ子（画像） 最終修正日 : 2016/03/05

　table２１ ■可変■　tableに左右の入れ子（画像）　　　　最終修正日 : 2016/03/05