Create an HTML table: Difference between revisions

From Rosetta Code
Content added Content deleted
No edit summary
Line 68: Line 68:
<script>fill(document.getElementById("x"));</script>
<script>fill(document.getElementById("x"));</script>
</body></html></lang>
</body></html></lang>

=={{header|Modula-2}}==
<lang Modula-2>MODULE testCGI;

FROM InOut IMPORT WriteCard, WriteLn, WriteString, WriteBf;
FROM Arguments IMPORT ArgTable, GetEnv;
FROM Strings IMPORT Assign, Length, String;

VAR EnvVars : ArgTable;

PROCEDURE ReadEnvVar;

VAR Value : String;
i : CARDINAL;

BEGIN
WriteString ('<table border="1" cellpadding="4" width="80%" align="center">');
WriteString ('<tr><th>Index</th><th>Length</th><th>Content</th></tr>');
i := 0;
LOOP
IF EnvVars^ [i] = NIL THEN EXIT END;
Assign (Value, EnvVars^ [i]^);
WriteString ('<tr><td align="center">');
WriteCard (i, 2);
WriteString ('</td><td align="center">');
WriteCard (Length (Value), 3);
WriteString ('</td><td>'); WriteString (Value);
WriteString ("</td></tr>");
WriteLn;
INC (i)
END;
WriteString("</table>");
END ReadEnvVar;

BEGIN
GetEnv (EnvVars);
WriteString ('Content-type:text/html');
WriteLn;
WriteLn;
WriteString ('<html><head>');
WriteString ('<title>CGI with the Mocka Modula-2 compiler</title>');
WriteString ('</head><body>');
WriteLn;
WriteString ('<center><h2>CGI environment passed along by your browser</h2></center><p>');
ReadEnvVar;
WriteString ('</body></html>');
WriteLn;
WriteBf
END testCGI.</lang>


=={{header|Oz}}==
=={{header|Oz}}==

Revision as of 20:14, 19 May 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.

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.

J

We can define:

<lang j>ele=:4 :0 

 nm=. x-.LF
 lf=. x-.nm
 ;('<',nm,'>') ,L:0 y ,L:0 '</',nm,'>',lf

)

hTbl=:4 :0 

 rows=. 'td' <@ele"1 ":&.>y
 'table' ele ('tr',LF) <@ele ('th' ele x); rows

)</lang>

With these definitions:

<lang j> (;;:'X Y Z') hTbl ":&.>(i.5),.i.5 3

XYZ
0012
1345
2678
391011
4121314

</lang>

Or, if running under jhs:

<lang j>jhtml (;;:'X Y Z') hTbl ":&.>(i.5),.i.5 3</lang>

to display the table inline, as 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>

Modula-2

<lang Modula-2>MODULE testCGI;

FROM InOut IMPORT WriteCard, WriteLn, WriteString, WriteBf; FROM Arguments IMPORT ArgTable, GetEnv; FROM Strings IMPORT Assign, Length, String;

VAR EnvVars  : ArgTable;

PROCEDURE ReadEnvVar;

VAR Value  : String; 

     i              : CARDINAL;

BEGIN

WriteString ('

'); WriteString (''); 
  i := 0;
  LOOP
     IF  EnvVars^ [i] = NIL  THEN  EXIT  END;
     Assign (Value, EnvVars^ [i]^);
WriteString ('"); WriteLn; INC (i) END; WriteString("
IndexLengthContent
'); 
     WriteCard (i, 2);
WriteString ('		'); 
     WriteCard (Length (Value), 3);
WriteString ('		'); WriteString (Value); WriteString ("

");

END ReadEnvVar;

BEGIN 

  GetEnv (EnvVars);
  WriteString ('Content-type:text/html');
  WriteLn;
  WriteLn;
  WriteString ('<html><head>');
  WriteString ('<title>CGI with the Mocka Modula-2 compiler</title>');
  WriteString ('</head><body>');
  WriteLn;

WriteString ('

CGI environment passed along by your browser

'); 

  ReadEnvVar;
  WriteString ('</body></html>');
  WriteLn;
  WriteBf

END testCGI.</lang>

Oz

As a complete web application, using the "Roads" web programming library. Connect your browser to http://localhost:8080/table after starting the program. <lang oz>declare

[Roads] = {Module.link ['x-ozlib://wmeyer/roads/Roads.ozf']}

fun {Table Session} 

  html(
     head(title("Show a table with row and column headings")

style(type:"text/css" css(td 'text-align':center) )) 

     body(

{TagFromList table tr(th th("X") th("Y") th("Z")) | {CreateRows 3 5} })) end

fun {CreateRows NumCols NumRows} 

  {List.map {List.number 1 NumRows 1}
   fun {$ Row}
      {TagFromList tr

td( {Int.toString Row} ) | {List.map {List.number 1 NumCols 1} fun {$ Col} SequentialNumber = (Row-1)*NumCols + Col in td( {Int.toString SequentialNumber} ) end }} 

   end
  }

end

TagFromList = List.toTuple

in

{Roads.registerFunction table Table} {Roads.run}</lang>

PicoLisp

<lang PicoLisp>(load "@lib/xhtml.l")

(

NIL NIL '(NIL (NIL "X") (NIL "Y") (NIL "Z")) (for N 3 (<row> NIL N 124 456 789) ) )</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>

Python

<lang python> import random

def rand9999(): 

   return random.randint(1000, 9999)

def tag(attr=, **kwargs): 

   for tag, txt in kwargs.items():
       return '<{tag}{attr}>{txt}</{tag}>'.format(**locals())

if __name__ == '__main__': 

   header = tag(tr=.join(tag(th=txt) for txt in ',X,Y,Z'.split(','))) + '\n'
   rows = '\n'.join(tag(tr=.join(tag(' style="font-weight: bold;"', td=i)
                                   + .join(tag(td=rand9999())
                                             for j in range(3))))
                    for i in range(1, 6))
   table = tag(table='\n' + header + rows + '\n')
   print(table)</lang>

Sample output

XYZ
1604046977055
2252554686901
3885137278379
4531343961765
5401359246082

The raw HTML 

<table>
<tr><th></th><th>X</th><th>Y</th><th>Z</th></tr>
<tr><td style="font-weight: bold;">1</td><td>6040</td><td>4697</td><td>7055</td></tr>
<tr><td style="font-weight: bold;">2</td><td>2525</td><td>5468</td><td>6901</td></tr>
<tr><td style="font-weight: bold;">3</td><td>8851</td><td>3727</td><td>8379</td></tr>
<tr><td style="font-weight: bold;">4</td><td>5313</td><td>4396</td><td>1765</td></tr>
<tr><td style="font-weight: bold;">5</td><td>4013</td><td>5924</td><td>6082</td></tr>
</table>

Ruby

This creates a plain HTML table, without any CSS to draw borders or to set column widths.

Library: rexml

<lang ruby>def r; rand(10000); end table = [["", "X", "Y", "Z"], 

        [ 1,   r,   r,   r],
        [ 2,   r,   r,   r],
        [ 3,   r,   r,   r]]

require 'rexml/document'

xtable = REXML::Element.new("table") table.each do |row| 

 xrow = REXML::Element.new("tr", xtable)
 row.each do |cell|
   xcell = REXML::Element.new("td", xrow)
   REXML::Text.new(cell.to_s, false, xcell)
 end

end

formatter = REXML::Formatters::Pretty.new formatter.compact = true formatter.write(xtable, STDOUT)</lang>

Output: 

<table>
  <tr>
    <td></td>
    <td>X</td>
    <td>Y</td>
    <td>Z</td>
  </tr>
  <tr>
    <td>1</td>
    <td>1358</td>
    <td>6488</td>
    <td>6434</td>
  </tr>
  <tr>
    <td>2</td>
    <td>2477</td>
    <td>6493</td>
    <td>1330</td>
  </tr>
  <tr>
    <td>3</td>
    <td>240</td>
    <td>3038</td>
    <td>9849</td>
  </tr>
</table>

Scheme

Works with: Guile
Works with: Gauche

<lang scheme>(define table #( 

               #("" "X" "Y" "Z")
               #(1 1 2 3)
               #(2 4 5 6)
               #(3 7 8 9)))

(display "

") (do ((r 0 (+ r 1))) ((eq? r (vector-length table))) (display "") (do ((c 0 (+ c 1))) ((eq? c (vector-length (vector-ref table r)))) (if (eq? r 0) (display ""))) (display "")) (display "
")) 
               (if (> r 0)
(display "		")) 
               (display (vector-ref (vector-ref table r) c))
               (if (eq? r 0)
(display "")) (if (> r 0) (display "

")</lang>

Retrieved from "https://rosettacode.org/wiki/Create_an_HTML_table?oldid=174638"