table１４-１ ■自動■　tableリンク１行（文字）

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

「その他１４■table■自動tableリンク１行（画像）」と同じ構造のJavaScriptですが、こちらは画像専用ではなく、文字専用です。
そのため文字の位置に画像を入れる場合は、<img src='●' title='▲'>とタグを入れて下さい。
他の自動tableと同じく、データにタグを記述する時は、「"」ではなく「'」を使用します。

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

データ項目が複数の、JavaScriptの自動作成のtableです。データのサイト名とサイト説明文に、タグが使用できます。
■データを記述するだけで、１行に１個の、説明文付きのサイトのリンクが作成できます。
■CSSで文字を装飾すれば、説明文付きメニューの作成もできます。
その時は、["サイト名","サイトURL","サイト説明文"];を["メニュー名","メニューURL","メニュー説明文"];のように記述します。

・リンク文字をクリックするとリンク先に飛びます。
・リンク文字位置にタグを使用すれば、画像も表示できます。

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

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

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

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

違うのは、前述したように横のデータは３個で、３個の順番を必ず守ること。
それからタグを使用できるのは、１番目の「サイト名」と３番目に書く「サイト説明文」の内容の中です。
ここでも注意することがあります。使用するタグには「 " 」は使用できません。
必ず「 ' 」を使用して下さい。

「サイト名」に文字ではなく画像を使用する時は、「サイト名」の項にタグで画像を入れます。最終行の見本通りです。
<img src="frc12.gif" title="京栄１級建築士事務所">ではなく、
<img src='frc12.gif' title='京栄１級建築士事務所'>と記述します。
「サイト説明文」の使用見本は１行目にあります。
ではなく、
と記述します。
データ行でタグを使用する時は「 ' 」を使うという事は、この「自動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%;/*★文字サイズ指定 */
}


/*★セルの縦幅を揃えるなら、↓でheight指定をして下さい*/
#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/02/01
参考サイト：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++]=["Dynamic Drive","http://www.dynamicdrive.com/","英語サイトですが、たくさんのJavaScriptのソースがあります。<br>利用規約は<span style='color:red;'>スクリプト上のクレジットを削除しない</span>こと。"];

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

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

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

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

Tco[i++]=["<img src='frc12.gif' title='京栄１級建築士事務所'>","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]+";'>";  　//■行にセルの交互の背景色指定
ttt+="<th><a href='"+Tco[i][1]+"' target='"+Target+"'>"+Tco[i][0]+"</a></th>";
ttt+="<td>"+Tco[i][2]+"</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%;/*★文字サイズ指定 */
}

/*★セルの縦幅を揃えるなら、↓でheight指定をして下さい*/
#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/02/01
参考サイト：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++]=["Dynamic Drive","http://www.dynamicdrive.com/","英語サイトですが、たくさんのJavaScriptのソースがあります。<br>利用規約は<span style='color:red;'>スクリプト上のクレジットを削除しない</span>こと。"];

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

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

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

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

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


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

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

table１４-１ ■自動■ tableリンク１行（文字） UP日時 : 2015/02/01

　table１４-１ ■自動■　tableリンク１行（文字）　　　　UP日時 : 2015/02/01