Table Headers and col- and row-spans can give the Table a bit more definition.
To create a Header use the th-tag instead of td-tag.
The Header will span accross multiple columns when you use the attribute colspan.
To span multiple rows : use rowspan.
<table border="1">
<tr>
<th style="text-align:centre" colspan="2">Phone List</th>
</tr>
<tr>
<th style="text-align:centre">Names </th>
<th style="text-align:centre">Phone Number </th>
</tr>
<tr>
<td>Katy</td>
<td>09-6666666</td>
</tr>
<tr>
<td>Joseph</td>
<td>04-6789542</td>
</tr>
</table>
<br><br><br>
<ul>
<li>Add in a third column header, eg cellPhone (9)</li>
<li>Change the colspan (4) </li>
<li>Add an extra td-tag with info for each name (14) </li>
<li>Experts: rotate the table 90 degrees </li>
</ul>
The Table Object has a number of Methods and Attributes that can make it
interactive for the user.
E.g. you can delete add and move rows.
TABLE Object Attributes & Methods
var myTable=document.getElementById('myTable');
var rows=myTable.rows...............gives collection of all rows in this table
var cells= myTable.cells............gives a collection of all cells in this table
myTable.deleteRow(0)................deletes first row
myTable.insertRow(2)................inserts row in third position
TR rows
var myTable=document.getElementById('myTable').rows[2];
tableRow_2.rowIndex.................position of this row in the collection of rows
tableRow_2.cells....................collection of all cells in this row
tableRow_2.deleteCell(2)............deletes the cell with given index
tableRow_2.insertCell(1)............inserts a cell in this row at given index position
TD or TH
var cell=document.getElementById('somecell');
cell.cellIndex=.....................position of this cell in its row.
cell.colSpan=.......................sets or gets number of collumns this cell spans.
cell.rowSpan=.......................sets or gets number of rows this cell spans.
headers.............................Sets or gets a list of header cell ids for the current data cell
Use Table Methods......... .... "TryoutPanel3"
<p>This Table is interactive. If you <b>double click</b> a row,
it will insert a new row on top. <b>Contenteditable</b> makes the Table ready to write in</p>
<script>
function addRow (row){
var table=document.getElementById('myTable'); // get table
var num= row.rowIndex; // get this row's index
var newRow=table.insertRow(num); //insert a new row + make var newRow
newRow.insertCell(0); // newRow inserts 2 cells
newRow.insertCell(0);
newRow.ondblclick=function(){addRow(this)}; // add ondbl click handler or this row can't make new row
}
</script>
<style>
th,td{border:1px solid;}
th{text-align:center;}
</style>
<table id='myTable' style="border:1px solid" contenteditable>
<tr ondblclick='addRow(this)' >
<th colspan="2">Phone List</th>
</tr>
<tr ondblclick='addRow(this)' >
<th >Names </th>
<th>Phone Number </th>
</tr>
<tr ondblclick='addRow(this)' >
<td >Katy</td>
<td >09-6666666</td>
</tr>
<tr ondblclick='addRow(this)' >
<td>Joseph</td>
<td>04-6789542</td>
</tr>
</table>
<br><br><br>
<ul>
<li>Make a cutRow function when rows are clicked.(deleteRow()).<br>
Don't forget to add onclick handler(23) in the tr-tag</li>
<li>Make addCell functions for the TD-cells: row.insertCell(num) cell.cellIndex</li>
<li>Experts:make mergeCells function_: row.deleteCell(num), cell.colSpan, cell.rowSpan </li>
</ul>
