表を作りたい

<?xml version="1.0" encoding="UTF-8" ?>

<Module>

  <ModulePrefs title="Go to Photo Album" height="250" scaling="false" />

  <Content type="html">

  <![CDATA[ 

<STYLE type="text/css">

table {

  border-spacing: 0;

  font-size:12px;

}

table th {

  color: #fff;

  padding: 8px 15px;

  background: #258;

  background:-moz-linear-gradient(rgba(34,85,136,0.7), rgba(34,85,136,0.9) 70%);

  background:-webkit-gradient(linear, 100% 0%, 100% 50%, from(rgba(34,85,136,0.7)), to(rgba(34,85,136,0.9)));

  font-weight: bold;

  border-left:1px solid #258;

  border-top:1px solid #258;

  border-bottom:1px solid #258;

  line-height: 120%;

  text-align: center;

  text-shadow:0 -1px 0 rgba(34,85,136,0.9);

  box-shadow: 0px 1px 1px rgba(255,255,255,0.3) inset;

}

table th:first-child {

  border-radius: 5px 0 0 0;

}

table th:last-child {

  border-radius:0 5px 0 0;

  border-right:1px solid #258;

  box-shadow: 2px 2px 1px rgba(0,0,0,0.1),0px 1px 1px rgba(255,255,255,0.3) inset;

}

table tr td {

  padding: 8px 15px;

  border-bottom: 1px solid #84b2e0;

  border-left: 1px solid #84b2e0;

  text-align: center;

}

table tr td:last-child {

  border-right: 1px solid #84b2e0;

  box-shadow: 2px 2px 1px rgba(0,0,0,0.1);

}

table tr {

  background: #fff;

}

table tr:nth-child(2n+1) {

  background: #f1f6fc;

}

table tr:last-child td {

  box-shadow: 2px 2px 1px rgba(0,0,0,0.1);

}

table tr:last-child td:first-child {

  border-radius: 0 0 0 5px;

}

table tr:last-child td:last-child {

  border-radius: 0 0 5px 0;

}

table tr:hover {

  background: #bbd4ee;

  cursor:pointer;

}

</STYLE>

<div>

<table>

<tbody>

<tr>

<th style="width:20%">ゲームの名前</td>

<th style="width:20%">ジャンル</td>

<th style="width:10%">価格</td>

<th style="width:10%">面白さ</td>

<th style="width:10%">リンク</td>

</tr>

<tr>

<td>&nbsp;グランツーリスモ２</td>

<td>&nbsp;シミュレーション</td>

<td>&nbsp;5,980円</td>

<td>★★★★</td>

<td>&nbsp;<b><a href="http://www.amazon.co.jp/%E3%82%BD%E3%83%8B%E3%83%BC%E3%83%BB%E3%82%B3%E3%83%B3%E3%83%94%E3%83%A5%E3%83%BC%E3%82%BF%E3%82%A8%E3%83%B3%E3%82%BF%E3%83%86%E3%82%A4%E3%83%B3%E3%83%A1%E3%83%B3%E3%83%88-%E3%82%B0%E3%83%A9%E3%83%B3%E3%83%84%E3%83%BC%E3%83%AA%E3%82%B9%E3%83%A22/dp/B00005OVU9" target="_blank">amazon</a></b></td>

</tr>

<tr>

<td>&nbsp;チョコボの不思議なダンジョン２</td>

<td>&nbsp;RPG</td>

<td>&nbsp;2,271円</td>

<td>★★★★</td>

<td>&nbsp;<b><a href="http://www.amazon.co.jp/%E3%82%B9%E3%82%AF%E3%82%A6%E3%82%A7%E3%82%A2-%E3%83%81%E3%83%A7%E3%82%B3%E3%83%9C%E3%81%AE%E4%B8%8D%E6%80%9D%E8%AD%B0%E3%81%AA%E3%83%80%E3%83%B3%E3%82%B8%E3%83%A7%E3%83%B32/dp/B00005OVVB" target="_blank">amazon</a></b></td>

</tr>

<tr>

<td>&nbsp;アストロノーカ</td>

<td>&nbsp;シミュレーション</td>

<td>&nbsp;1,500円</td>

<td>★★</td>

<td>&nbsp;<b><a href="http://www.amazon.co.jp/%E3%82%A8%E3%83%8B%E3%83%83%E3%82%AF%E3%82%B9-%E3%82%A2%E3%82%B9%E3%83%88%E3%83%AD%E3%83%8E%E3%83%BC%E3%82%AB/dp/B00005OVW9" target="_blank">amazon</a></b></td>

</tr>

<tr>

<td>&nbsp;ドラゴンクエストIV</td>

<td>&nbsp;RPG</td>

<td>&nbsp;8,400円</td>

<td>&nbsp;★★★★★</td>

<td>&nbsp;<b><a href="http://www.amazon.co.jp/%E3%82%A8%E3%83%8B%E3%83%83%E3%82%AF%E3%82%B9-%E3%83%89%E3%83%A9%E3%82%B4%E3%83%B3%E3%82%AF%E3%82%A8%E3%82%B9%E3%83%88IV-%E5%B0%8E%E3%81%8B%E3%82%8C%E3%81%97%E8%80%85%E3%81%9F%E3%81%A1/dp/B00005RTU9" target="_blank">amazon</a></b></td>

</tr>

</tbody>

</table>

</div>

  ]]> 

  </Content>

</Module>

function doGet() {

  // シートの名前を取得

  var sheet = SpreadsheetApp.openById("0AjN10lCzkUqkdFFBeDZyTFBnZzlOSkxPWWs3TDJqaEE").

            getSheetByName("master");

  //特定のレンジを配列として取得

  var varValues = sheet.getRange("A2:K9").getValues();

  var dataTable = Charts.newDataTable();

  dataTable.addColumn(Charts.ColumnType.STRING, "年月");

  dataTable.addColumn(Charts.ColumnType.STRING, "西暦");

  dataTable.addColumn(Charts.ColumnType.NUMBER, "総合計");

  dataTable.addColumn(Charts.ColumnType.NUMBER, "増減数");

  dataTable.addColumn(Charts.ColumnType.NUMBER, "増減率");

  dataTable.addColumn(Charts.ColumnType.NUMBER, "出生児数");

  dataTable.addColumn(Charts.ColumnType.NUMBER, "死亡者数");

  dataTable.addColumn(Charts.ColumnType.NUMBER, "自然増減");

  dataTable.addColumn(Charts.ColumnType.NUMBER, "入国者数");

  dataTable.addColumn(Charts.ColumnType.NUMBER, "出国者数");

  dataTable.addColumn(Charts.ColumnType.NUMBER, "社会増減");

  //配列データをテーブルに格納

  var counter = Number(0);

  for(var i in dataTable) {

    var row = []; 

    row.push(String(varValues[counter][0]));

    row.push(String(varValues[counter][1]));

    row.push(Number(varValues[counter][2]));

    row.push(Number(varValues[counter][3]));

    row.push(Number(varValues[counter][4]));

    row.push(Number(varValues[counter][5]));

    row.push(Number(varValues[counter][6]));

    row.push(Number(varValues[counter][7]));

    row.push(Number(varValues[counter][8]));

    row.push(Number(varValues[counter][9]));

    row.push(Number(varValues[counter][10]));

    dataTable.addRow(row);

    counter++;

  }

  var data = dataTable.build();

  // フィルタの追加

  var typeFilter = Charts.newCategoryFilter()

      .setFilterColumnLabel("西暦")

      .build();

  //テーブルチャートの追加

  var tableChart = Charts.newTableChart()

      .setDimensions(800, 400)

      .build();

  //ダッシュボードの追加

  var dashboard = Charts.newDashboardPanel()

      .setDataTable(data)

      .bind(typeFilter, tableChart)

      .build();

  var app = UiApp.createApplication();

  dashboard.add(

    app.createVerticalPanel()

    .add(typeFilter)

    .add(tableChart)

    .setSpacing(10)

  );

  app.add(dashboard);

  return app;

}

<?xml version="1.0" encoding="UTF-8" ?>

<Module>

<ModulePrefs title="sample1" />

<Content type="html">

<![CDATA[

<html xmlns="http://www.w3.org/1999/xhtml">

  <head>

    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>

    <title>

      Google Visualization API Sample

    </title>

    <script type="text/javascript" src="//www.google.com/jsapi"></script>

    <script type="text/javascript">

      google.load('visualization', '1', {packages: ['table']});

    </script>

    <script type="text/javascript">

        //初期化処理

  var sourceSheet="https://spreadsheets.google.com/tq?&tq=&key=0AjN10lCzkUqkdFFBeDZyTFBnZzlOSkxPWWs3TDJqaEE&gid=2";

        var query = new google.visualization.Query(sourceSheet);

        query.send(handleResponse);

      }

      google.setOnLoadCallback(init);

       function handleResponse(response){

        var div = document.getElementById('res');

        if(response.isError()) {

          div.innerHTML = response.getDetailedMessage();

          return;

        }

        var data = response.getDataTable();

        var divTable  = new google.visualization.Table(div);

        divTable.draw(data);

       }

    </script>

  </head>

  <body style="font-family: Arial;border: 0 none;">

    <p id="res"></p>

  </body>

</html>

]]>

</Content>

</Module>