画像＋リンク＆文字のランダム表示

画像＋リンク＋文字のランダム表示について

復数ある画像、リンク、文字のなかからランダムで数個（かぶらないように）表示させたいのです。
それもテーブルタグの中に。
（画像Ａには必ずリンクＡと文字Ａがせっとになるようにです）

初心者なのでどのようにしたら良いのか、またこんな事ができるのかどうかもわかりませんが・・・
おわかりになる方、詳しく教えてください。

一応ＨＴＭＬでＨＰをつくっているので、このように書いたら良いよ・・・という見本のようなモノを作って頂けると幸いです。
宜しくお願いします。

解りづらいかもしれませんが、よろしくお願いします。

（画像Ａには必ずリンクＡと文字Ａがせっとになるようにです）

テーブルのセルの１つ１つに
画像，リンク，文字
のようになるんでしょうか？

それとも１つのセルに、
<a href="リンクアドレス"><img src="画像アドレス" alt="文字"></a>
のようなまとめた感じになるんでしょうか？

試しに作ってみました。

<!-- 画像をランダムに指定した数テーブルに追加する -->
<table id="image_table" >
<tbody id="image_table_body"></tbody>
</table>
<script type="text/javascript"><!--
(function(n){
    var image_list = [
    /*  { src:画像のアドレス, alt:画像の説明, href:リンクアドレス } */
        { src:"01.jpg",  alt:"画像１", href:"page01.html"},
        { src:"02.jpg",  alt:"画像２", href:"page02.html"},
        { src:"03.jpg",  alt:"画像３", href:"page03.html"},
        { src:"04.jpg",  alt:"画像４", href:"page04.html"},
        { src:"05.jpg",  alt:"画像５", href:"page05.html"}
    ];
 
    var template = function (str, vars){
        var result=str;
        for(var v in vars){
            var re = new RegExp("{"+v+"}","g");
            result=result.replace(re, vars[v]);
        }
        return result;
    };
 
    var ramdomSelect = function (a){
        return a.splice(Math.floor(Math.random()*a.length),1)[0];
    };
 
    var insertRowObj = function (obj){
        var table_body = document.getElementById("image_table_body");
        var newTR = table_body.insertRow(table_body.rows.length);
        var newTD = newTR.insertCell(0);
        newTD.innerHTML = template('<a href="{href}"><img src="{src}" alt="{alt}" \/></a>', obj);
    };
    for(var i=0 ;i<n;i++){
        insertRowObj(ramdomSelect(image_list));
    }

})(3);//リスト(image_list)からランダムに選んだ３コを挿入する。
//-->
</script>