Create an HTML table

From Rosetta Code
Revision as of 14:14, 9 March 2011 by rosettacode>Mwn3d (Since the task is to generate HTML, it may be interesting to people looking for HTML help)
Create an HTML table is a draft programming task. It is not yet considered ready to be promoted as a complete task, for reasons that should be found in its talk page.

Create an HTML table.

  • The table body should have at least three rows of three columns.
  • Each of these three columns should be labelled "X", "Y", and "Z".
  • An extra column should be added at either the extreme left or the extreme right of the table that has no heading, but is filled with sequential row numbers.
  • The rows of the "X", "Y", and "Z" columns should be filled with random or sequential integers having 4 digits or less.
  • The numbers should be aligned in the same fashion for all columns.

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>

XYZ

<script>fill(document.getElementById("x"));</script> </body></html></lang>

Protium

Opcodes of interest: SDC -- simple document; R!I -- ranged random integer

<lang html><@ SDCLIT> <@ 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</@> <@ DTDCAPLIT><@ SAYR!ILI2>1|9999</@>|[style]width:50;text-align:right</@> <@ DTDCAPLIT><@ SAYR!ILI2>1|9999</@>|[style]width:50;text-align:right</@> <@ DTDCAPLIT><@ SAYR!ILI2>1|9999</@>|[style]width:50;text-align:right</@> |[style]background-color:white;color:black</@> </@> </@> |Number Table</@></lang>