Tip: you can modify some code before running
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Table</title> <style type="text/css">Div {margin-left: auto; margin-right: auto;} # divshow {position: relative; vertical-align: middle; overflow: hidden ;}</style> </head> <body> <input type="button" value="click" onclick="createTable()"> <br> <div id ="divshow" align="center"></div> <script type="text/javascript">/******************* Two layers **************/var divshow = document. getElementById ("divshow"); divshow. style. width = "800px"; divshow. style. height = "800px"; divshow. style. background = "#580850"; var annotation = document. createElement ("div"); annotation. style. position = "absolute"; annotation. style. left = "100px"; annotation. style. top = "100px" annotation. id = "annotation"; annotation. style. width = "500px"; annotation. style. height = "500px"; divshow. appendChild (annotation); annotation. style. background = "#454878"; var table1; var td1; var tr1; function createTable () // create a table to draw a line {table1 = document. createElement ("TABLE"); table1.id = "x"; table1.style. position = "absolute"; table1.style. top = '100px '; table1.style. left = '100px '; tr1 = table1.insertRow (); td1 = tr1.insertCell (); td1.style. background = "yellow" td1.width = "200" td1.height = "3"; annotation. appendChild (table1 );}</script> </body></html>
Tip: you can modify some code before running