Create an HTML table: Difference between revisions
(Protium) |
m (moved Show a table with row and column headings to Create an HTML table: More concise.) |
(No difference)
| |
Revision as of 07:42, 9 March 2011
Display a table of random or sequential integers (4 digits or less for whitespace considerations) in 3 columns labelled "X", "Y", and "Z" with numbered rows. If possible, show the numbers aligned (any way) in each column.
HTML + JavaScript
<lang html><html><head>
<title>Show a table with row and column headings</title>
<style type="text/css">
th:first-child, td { padding: 0 .5em; text-align: right; }
</style>
<script>
function fill(table) {
for (var i = 1; i <= 100; i++) {
var row = document.createElement("tr");
var hcell = document.createElement("th");
hcell.appendChild(document.createTextNode(""+i));
row.appendChild(hcell);
for (var j = 0; j < 3; j++) {
var cell = document.createElement("td");
cell.appendChild(document.createTextNode(""+Math.floor(Math.random()*10000)));
row.appendChild(cell);
}
table.appendChild(row);
}
}
</script>
</head><body>
| X | Y | Z |
|---|
<script>fill(document.getElementById("x"));</script> </body></html></lang>
Protium
Opcodes of interest: SDC -- simple document; R!I -- ranged random integer; SE! -- random structure element
<lang html><@ SDCLIT> <@ LETCNSLSTLIT>alig|left^right^center^justify</@> <@ DTBLIT> <@ DTRLITLIT> <@ DTDLITLIT>|[style]background-color:white</@> <@ DTD>X</@> <@ DTD>Y</@> <@ DTD>Z</@>|[style]width:100%; background-color:brown;color:white; text-align:center</@> <@ ITEFORLIT>10| <@ DTRLITCAP> <@ DTDPOSFORLIT>...|[style]background-color:Brown; color:white; text-align:right</@> <@ DTDCAPCAP><@ SAYR!ILI2>1|9999</@>|[style]width:50;text-align:<@ SAYSE!LST>alig</@></@> <@ DTDCAPCAP><@ SAYR!ILI2>1|9999</@>|[style]width:50;text-align:<@ SAYSE!LST>alig</@></@> <@ DTDCAPCAP><@ SAYR!ILI2>1|9999</@>|[style]width:50;text-align:<@ SAYSE!LST>alig</@></@> |[style]background-color:white;color:black</@> </@> </@> |Number Table</@></lang>