這個練習是要將報表的每一個小格子的資料讀出來。由於一個報表的小格子很多，無法每一個格子都設 ID，然後用 getElementById() 讀取其內容。這個練習使用以下的特徵與方法來讀取小格子內容：
- TABLE 元素：用來建立報表。
- TD 元素：用來存放小格子的內容。
- table.rows[]：報表的每一橫欄對應一個 rows[]，可藉此取得橫欄的物件。
- cells[]：用來取得小格子的物件。
- innerHTML：用來讀取小格子的內容。
下面的範例只用來讀取小格子的內容，但是只要加上其它程序碼，也可以更改小格子的內容。如果要增減報表的橫欄，則要用到 insertRow(), deleteRow() 兩個方法。
- 程式用法：
<table id='tbl' bgcolor='#333388' rules=all>
<caption>學生總成績</caption>
<thead>
<tr><th>學號<th>姓名<th>學科<th>成績
</thead>
<tbody>
<tr><td>51<td>螞蟻<td>物理<td>99
<tr><td>52<td>蚱蜢<td>物理<td>59
</tbody>
<tfoot>
<tr><td colspan=4>2009/1/6 製作
</tfoot>
</table>
<p>
<script type='text/javascript'>
var tb=document.getElementById('tbl');
for(var i=0; i < tb.rows.length; i++)
{
for( var j=0; j < tb.rows[i].cells.length; j++)
document.write( tb.rows[i].cells[j].innerHTML +' <b>|</b> ');
document.write('<br />');
}
</script> - 執行結果：
學生總成績 學號 姓名 學科 成績 51 螞蟻 物理 99 52 蚱蜢 物理 59 2009/1/6 製作 學號 | 姓名 | 學科 | 成績 |
51 | 螞蟻 | 物理 | 99 |
52 | 蚱蜢 | 物理 | 59 |
2009/1/6 製作 |
