table１４ ■自動■　tableリンク１行（画像）

※バナー画像は見本なので、該当サイトの本物のバナーではありません。
※2015/01/29　リンクのターゲット指定ができるようにしました。
※2015/01/30　HTML5では、画像は中央より少し上の位置に表示されるので、中央位置になるようCSSで修正しました。

２．CSSで背景色指定（バナー画像の背景色と説明文の背景色）

データ項目が複数の、JavaScriptの自動作成のtableです。データのサイト説明文に、タグが使用できます。
■データを記述するだけで、１行に１個の、説明文付きのサイトのリンクが作成できます。
・バナー画像マウスオンで、サイト名が出ます。
・バナー画像をクリックするとリンク先に飛びます。
・もしバナー画像が無い時は、サイト名が画像の代わりに表示されます。

下にJavaScriptのソースを２個掲載しています。
１はJavaScriptのソースの中に、背景色の２色指定がしてあります。
２はその指定が無く、CSSで背景色を指定しています。

今回のJavaScriptは、いままでの「自動table」とは、データの意味が違います。
いままでは、データ１個に付きtableのセルが１個、割り当てられました。
今回は、データの中のバナー画像に、URLやtitleを付けてリンクを貼り、その隣にリンクを貼ったサイトの説明文を載せます。
JavaScriptの記述の意味の分かる方は、自分好みにいろいろ改造して下さい。
横のデータの数を増やして、tableの組立部分を変更してもかまいません。

１. tableのセルのデータ記述方法
１行の中に記述するデータは４個です。そして、下記の順番を必ず守って下さい。
Tco[i++]=["画像","サイト名","サイトURL","サイト説明文"];
この横に並ぶ順番を間違うと、正しく表示されません。もちろんいままでどおり、縦の行の入れ替えは自由にできます。

Tco[i++]=["frc11.gif","Dynamic Drive","http://www.dynamicdrive.com/","英語サイトですが、たくさんのJavaScriptのソースがあります。 利用規約はスクリプト上のクレジットを削除しないこと。"];
　　　：
　　　：
Tco[i++]=["","京栄一級建築士事務所","http://kyoei.arrow.jp/jissai.html","旧名『ぱーぷりんの溜まり場』。 メニューのテンプレートから行けます。 降る上る浮く関連のJavaScriptの宝庫。"];

上記が今回のtableのデータの記述です。
いままでの「自動table」と同じように、行はいくらでも増加可能です。

違うのは、前述したように横のデータは４個で、４個の順番を必ず守ること。
そしてもしもバナー画像が無い時は、最終行の見本のように、「""」と記述して下さい。
それからタグを使用できるのは、４番目に書く「サイト説明文」の内容の中だけです。
タグの使用見本は１行目にあります。
ここでも注意することがあります。使用するタグには「 " 」は使用できません。
必ず「 ' 」を使用して下さい。
１行目の見本では、と書きます。と書いてはダメです。データ行でタグを使用する時は「 ' 」を使うという事は、この「自動table」のJavaScriptの全部の共通点です。

２．位置指定の方法
いろいろと面倒なので、位置指定は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に背景色を指定してみるとわかります。

他のJavaScriptとの記述の違い
項目が１個だけでも複数でも、このtableのJavaScriptは、他の当サイトのJavaScriptと大きく違う点があります。
それはデータ番号を記述する場所に、数字が入ってない点です。普通は
Tco[0]=～～～
Tco[1]=～～～
Tco[2]=～～～
と、数字が入っているところが、
Tco[i++]=～～～
Tco[i++]=～～～
Tco[i++]=～～～
となっています。
これは行の入れ替えを簡単にするためです。数字を入れていると、下の行を上にしたり途中の行を丸ごと削除した時には、番号を付け直す必要があります。

じゃあ、他のJavaScriptもそうすればいい？
いえいえ、たとえばコメント付きの簡単スライドショーの場合を考えてみて下さい。
数字を付けることで、ga[0]の画像にmes[0]のコメントが記述しやすくなります。
数字が無いと間違えて ga[3]の画像に、mes[4]のコメントを付けてしまったりします。間違えた場合、どの行を間違ったのかの把握も難しいです。
でも画像だけのスライドショーの場合は、ga[i++]で記述してあれば、最新の画像を一番上に記述して、数字を書き直す必要がないというメリットはあります。
ケース・バイ・ケースでどうぞ。
tableの場合も、「行の入れ替えや削除をする必要が全くない」か、「入れ替えたり削除したら、自分で数字を書き直す」のであれば、
Tco[0]=～～～
Tco[1]=～～～
Tco[2]=～～～
と記述しても、大丈夫です。

なお参考にしたサイトがたくさんあります。代表的なものを４つだけ紹介します。
セルの背景色の２色カラーは、イヌでもわかるJavaScript講座から。
table作成をinnerHTMLで記述する方法は、OKWaveのzousan77さんの回答から。
データの項目のまとめ方は、無数のJavaスクリプトサンプル(SCRIPT OF ANGER)日本旭日党から。
配列の要素に別の配列リテラルを格納して多次元配列のように扱う方法は、AjaxTowerから。

◆全ソース◆背景色はJavaScript指定（行ごと）
ソースの中でマウスの右クリックで『すべて選択』→『コピー』
またはソースの中で左クリック後、キーボードで
「Ctrl」と「A」を同時押下して、右クリック『コピー』

<!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:50px auto;/*★中央指定*/
   border-spacing:0px;/*★セルの間隔をなくす*/
   font-size:80%;/*★文字サイズ指定 */
}

#Tb th, #Tb td {
   border:solid 2px;/*★全部のセルの枠線は実線で太さ2ピクセル */
   padding:5px;/*★全部のセルと文字の隙間*/
   border-color:#fff #aaa #aaa #fff;/*★全部のセルの枠線の色。上右下左の各色。白、灰色*/   
}

#Tb td {
   width:400px;/*★説明文のセルの横幅。お好みで*/
}

/*★HTML5では画像は中央より少し上の位置に表示されるので、修正のため下記指定*/
#Tb img{vertical-align: bottom;}
-->
</style>
<!--★ここまでコピー。bodyにもコピーがあります-->

</head>
<body>

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


<script type="text/JavaScript">
<!--
/*====================================================================
★自動table　項目複数・リンク１行　背景色２色指定　：2015/01/28
参考サイト：http://www.red.oit-net.jp/tatsuya/java/table.htm
参考サイト：http://okwave.jp/qa/q8093681.html
参考サイト：http://freett.com/nihonkyokujituto/download/javasc/brolnk5.htm　
参考サイト：http://www.ajaxtower.jp/js/array/index5.html
====================================================================*/
function myTb(){
var i=0;
var j=0;

Target="_new";//★リンクターゲット _top _self _blank _parent _new　等から選択。指定不要ならTarget="";で。

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

Tco[i++]=["frc11.gif","Dynamic Drive","http://www.dynamicdrive.com/","英語サイトですが、たくさんのJavaScriptのソースがあります。<br>利用規約は<span style='color:red;'>スクリプト上のクレジットを削除しない</span>こと。"];

Tco[i++]=["frc14.gif","Sna WORLD","http://homepage3.nifty.com/metis/","サイトの目次のScriptからJavaScriptのページへ。<br>雛形用目的ですが、ブラウザIE以外でも動作可能のJavaScript有り。"];

Tco[i++]=["frc13.gif","OpenSpace","http://www.openspc2.org/","JavaScriptに関する大量の例文や、書籍の説明サンプル。<br>広大な古旗(?)一浩氏のサイトの、ここが入口らしいです。"];

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

Tco[i++]=["frc24.gif","オリジナルJavaScript","http://jun88.6.ql.bz/","ブラウザIE6専用で現在は更新停止中。"];

Tco[i++]=["","京栄一級建築士事務所","http://kyoei.arrow.jp/jissai.html","旧名『ぱーぷりんの溜まり場』。<br>メニューのテンプレートから行けます。<br>降る上る浮く関連のJavaScriptの宝庫。"];


Tbc= new Array("#ddd","#adf"); //★セルの背景色。何色でも可能。,"●"で追加   


var ttt="<table id='Tb'>";
for (i=0; i<Tco.length; i++){ 
ttt+="<tr style='background:"+Tbc[i%Tbc.length]+";'>";  　//■行にセルの交互の背景色指定
if (Tco[i][0]=="") {
ttt+="<th><a href='"+Tco[i][2]+"' target='"+Target+"'><span title='"+Tco[i][1]+"'>"+Tco[i][1]+"</span></a></th>";
}else {
ttt+="<th><a href='"+Tco[i][2]+"' target='"+Target+"'><img src='"+Tco[i][0]+"' title='"+Tco[i][1]+"'></a></th>";
}
ttt+="<td>"+Tco[i][3]+"</td>";
ttt+="</tr>";
}
ttt+="</table>";
document.getElementById("wakuT").innerHTML =ttt;
}
window.onload =myTb;
//-->
</script>
<!--★ここまでコピー-->


<br><br><br>
</body>
</html>

◆全ソース◆背景色はCSS指定
ソースの中でマウスの右クリックで『すべて選択』→『コピー』
またはソースの中で左クリック後、キーボードで
「Ctrl」と「A」を同時押下して、右クリック『コピー』

<!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:50px auto;/*★中央指定*/
   border-spacing:0px;/*★セルの間隔をなくす*/
   font-size:80%;/*★文字サイズ指定 */
}

#Tb th, #Tb td {
   border:solid 2px;/*★全部のセルの枠線は実線で太さ2ピクセル */
   padding:5px;/*★全部のセルと文字の隙間*/
   border-color:#fff #aaa #aaa #fff;/*★全部のセルの枠線の色。上右下左の各色。白、灰色*/
}

#Tb th {
   background:#adf;/*★画像のセルの背景色。水色*/  
}

#Tb td {
   width:400px;/*★説明文のセルの横幅。お好みで*/
   background: #eee;/*★説明文のセルの背景色。薄い灰色*/   
}

/*★HTML5では画像は中央より少し上の位置に表示されるので、修正のため下記指定*/
#Tb img{vertical-align: bottom;}
-->
</style>
<!--★ここまでコピー。bodyにもコピーがあります-->

</head>
<body>

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


<script type="text/JavaScript">
<!--
/*====================================================================
★自動table　項目複数・リンク１行　：2015/01/28
参考サイト：http://www.red.oit-net.jp/tatsuya/java/table.htm
参考サイト：http://okwave.jp/qa/q8093681.html
参考サイト：http://freett.com/nihonkyokujituto/download/javasc/brolnk5.htm　
参考サイト：http://www.ajaxtower.jp/js/array/index5.html
====================================================================*/
function myTb(){
var i=0;
var j=0;

Target="_new";//★リンクターゲット _top _self _blank _parent _new　等から選択。指定不要ならTarget="";で。

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

Tco[i++]=["frc11.gif","Dynamic Drive","http://www.dynamicdrive.com/","英語サイトですが、たくさんのJavaScriptのソースがあります。<br>利用規約は<span style='color:red;'>スクリプト上のクレジットを削除しない</span>こと。"];

Tco[i++]=["frc14.gif","Sna WORLD","http://homepage3.nifty.com/metis/","サイトの目次のScriptからJavaScriptのページへ。<br>雛形用目的ですが、ブラウザIE以外でも動作可能のJavaScript有り。"];

Tco[i++]=["frc13.gif","OpenSpace","http://www.openspc2.org/","JavaScriptに関する大量の例文や、書籍の説明サンプル。<br>広大な古旗(?)一浩氏のサイトの、ここが入口らしいです。"];

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

Tco[i++]=["frc24.gif","オリジナルJavaScript","http://jun88.6.ql.bz/","ブラウザIE6専用で現在は更新停止中。"];

Tco[i++]=["","京栄一級建築士事務所","http://kyoei.arrow.jp/jissai.html","旧名『ぱーぷりんの溜まり場』。<br>メニューのテンプレートから行けます。<br>降る上る浮く関連のJavaScriptの宝庫。"];


var ttt="<table id='Tb'>";
for (i=0; i<Tco.length; i++){ 
ttt+="<tr>";
if (Tco[i][0]=="") {
ttt+="<th><a href='"+Tco[i][2]+"' target='"+Target+"'><span title='"+Tco[i][1]+"'>"+Tco[i][1]+"</span></a></th>";
}else {
ttt+="<th><a href='"+Tco[i][2]+"' target='"+Target+"'><img src='"+Tco[i][0]+"' title='"+Tco[i][1]+"'></a></th>";
}
ttt+="<td>"+Tco[i][3]+"</td>";
ttt+="</tr>";
}
ttt+="</table>";
document.getElementById("wakuT").innerHTML =ttt;
}
window.onload =myTb;
//-->
</script>
<!--★ここまでコピー-->

<br><br><br>
</body>
</html>

table１４ ■自動■ tableリンク１行（画像） UP日時 : 2015/01/28

　table１４ ■自動■　tableリンク１行（画像）　　　　UP日時 : 2015/01/28