| <!DOCTYPE html> |
| <html> |
| <body style="font-family: Ahem; -webkit-font-smoothing: none;"> |
| <style> |
| div.table { display: table; } |
| div.section { display: table-row-group; } |
| div.caption { display: table-caption; } |
| div.colgroup { display: table-column-group; } |
| div.col { display: table-column; } |
| div.cell { display: table-cell; width: 50px; height: 50px; background-color: blue; } |
| div.row { display: table-row; } |
| div.block { width: 50px; height: 50px; background-color: blue; } |
| </style> |
| |
| <div class="table" id="table-1"> |
| <div class="cell"></div> |
| <div class="section" id="tbody-1"> |
| </div> |
| </div> |
| |
| <div class="table" id="table-2"> |
| <div class="cell"></div> |
| <div class="row" id="row"></div> |
| </div> |
| |
| <div class="table" id="table-3"> |
| <div class="cell"></div> |
| <div class="caption" id="caption"> |
| </div> |
| </div> |
| |
| <div class="table" id="table-4"> |
| <div class="cell"></div> |
| <div class="colgroup" id="colgroup"> |
| </div> |
| </div> |
| |
| <div class="table" id="table-5"> |
| <div class="cell"></div> |
| <div class="section" id="tbody-5"> |
| </div> |
| </div> |
| |
| <div class="table" id="table-6"> |
| <div class="cell"></div> |
| <div class="col" id="col-6"> |
| </div> |
| </div> |
| |
| <div class="table" id="table-7"> |
| <div class="cell"></div> |
| <div id="block"> |
| </div> |
| </div> |
| |
| <div class="table" id="table-8"> |
| <div class="block"></div> |
| <div class="cell" id="cell"></div> |
| </div> |
| |
| <script> |
| function createCell() |
| { |
| var cell = document.createElement("div"); |
| cell.className = "cell"; |
| return cell; |
| } |
| |
| function insertCell(tableID, beforeID) |
| { |
| var table = document.getElementById(tableID); |
| var before = document.getElementById(beforeID); |
| table.insertBefore(createCell(), before); |
| } |
| |
| function createRow() |
| { |
| var row = document.createElement("div"); |
| row.className = "row"; |
| return row; |
| } |
| |
| function insertRow(tableID, beforeID) |
| { |
| var table = document.getElementById(tableID); |
| var before = document.getElementById(beforeID); |
| table.insertBefore(createRow(), before); |
| } |
| |
| function createBlock() |
| { |
| var block = document.createElement("div"); |
| block.className = "block"; |
| return block; |
| } |
| |
| function insertBlock(tableID, beforeID) |
| { |
| var table = document.getElementById(tableID); |
| var before = document.getElementById(beforeID); |
| table.insertBefore(createBlock(), before); |
| } |
| |
| document.body.offsetTop; |
| |
| insertCell("table-1", "tbody-1"); |
| insertCell("table-2", "row"); |
| insertCell("table-3", "caption"); |
| insertCell("table-4", "colgroup"); |
| insertRow("table-5", "tbody-5"); |
| insertCell("table-6", "col-6"); |
| insertCell("table-7", "block"); |
| insertBlock("table-8", "cell"); |
| </script> |
| </body> |
| </html> |
