Create an HTML table: Difference between revisions

From Rosetta Code
Content added Content deleted
(HTML)
(avoid "justify")
Line 1: Line 1:
{{Draft task}}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 justified in each column.
{{Draft task}}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.


=={{header|HTML}} + {{header|JavaScript}}==
=={{header|HTML}} + {{header|JavaScript}}==

Revision as of 00:31, 9 March 2011

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.

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>

XYZ

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