Kids

Can

JavaScript

<-----Back        Next --->

Tables

Table Tag

example1:

How to make SHERBERT
click on the pictures to follow the instructions and enlarge pictures

Tables can present information in a clear and organized way .
Tables are made with the table-tags tr-tags(table row) and td-tags(table data)

 <table> 


 <tr> 
 <td> 
 row 1 cell 1 
 </td> 
 <td> 
 row 1 cell 2 
 </td> 
 </tr> 


 <tr> 
 <td> 
 row 2 cell 1 
 </td> 
 <td> 
 row2 cell 2 
 </td> 
 </tr> 


 </table> 


example2:

row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2


Table tag......... .... "TryoutPanel1"
<table border="1"> <tr> <td> row 1, cell 1</td> <td> row 1, cell 2</td> </tr> <tr> <td> row 2, cell 1</td> <td> row 2, cell 2</td> </tr> </table> <br><br><br> <ul> <li>Give the table more rows: <tr> </tr ></li> <li>Give the rows more cells: <td> </td ></li> </ul>



Headers and Colspan

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.


 <tr> 
 <th 
 colspan='2' 
 > 
 Phone List 
 </th> 
 </tr> 


 <tr> 
 <td> 
 Names 
 </td> 
 <td> 
 Phone numbers 
 </td> 
 </tr> 

example3:

Phone List
Names Phone Number
Katy 09-6666666
Joseph 04-6789542



Headers and colspan......... .... "TryoutPanel2"
<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>



Interactive Tables

example4:



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>

<-----Back        Next --->

This username already exists.

This username already exists.

Login or register to save your work.

User name field is empty.

Your username needs to be at least 7 characters long.

Your username can not contain any of the following characters: ",', <, > , < and whitespaces.

Please enter a correct email addresss .

This email address is not found in our database .

Your password needs to be at least 7 characters long.

login
username
password
forgot password
email
register
username
password
email