Create an HTML table: Difference between revisions

Content added Content deleted

Inline

Revision as of 14:04, 29 April 2011

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

	X	Y	Z
0	0	1	2
1	3	4	5
2	6	7	8
3	9	10	11
4	12	13	14

</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

 <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

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

	X	Y	Z
1	6040	4697	7055
2	2525	5468	6901
3	8851	3727	8379
4	5313	4396	1765
5	4013	5924	6082

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>