Create an HTML table

From Rosetta Code
Revision as of 23:02, 3 June 2011 by rosettacode>Markhobley (promoted to task)
Task
Create an HTML table
You are encouraged to solve this task according to the task description, using any language you may know.

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.

Go

Template is a package in the standard library. <lang go>package main

import ( 

   "fmt"
   "os"
   "template"

)

type Row struct { 

   RN, X, Y, Z int

}

var tmpl = `

   {.repeated section @}

   {.end}
XYZ
{RN}{X}{Y}{Z}

`

func main() { 

   // create template
   ct := template.MustParse(tmpl, nil)

   // make up data
   data := make([]Row, 4)
   for r := range data {
       data[r] = Row{r+1, r*3, r*3+1, r*3+2}
   }

   // open output file
   hf, err := os.Create("table.html")
   if err != nil {
       fmt.Println(err)
       return
   }
   defer hf.Close()

   // apply template to data
   ct.Execute(hf, data)

}</lang> Output in table.html: 

<table>
    <tr><th></th><th>X</th><th>Y</th><th>Z</th></tr>
    <tr><td>1</td><td>0</td><td>1</td><td>2</td></tr>
    <tr><td>2</td><td>3</td><td>4</td><td>5</td></tr>
    <tr><td>3</td><td>6</td><td>7</td><td>8</td></tr>
    <tr><td>4</td><td>9</td><td>10</td><td>11</td></tr>
</table>

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.

Java

Works with: Java version 1.5+

This example assumes the header row is the first row in the given array and does not add row numbers. They will need to be added by the programmer when constructing the array. <lang java5>public class HTML {

public static String array2HTML(Object[][] array){ StringBuilder html = new StringBuilder(

"

"); for(Object elem:array[0]){ html.append("");

} for(int i = 1; i < array.length; i++){ Object[] row = array[i];

html.append(""); for(Object elem:row){ html.append("");

}

html.append(""); } html.append("
" + elem.toString() + "
" + elem.toString() + "

");

return html.toString(); }

public static void main(String[] args){ Object[][] ints = {{"","X","Y","Z"},{1,1,2,3},{2,4,5,6},{3,7,8,9},{4,10,11,12}}; System.out.println(array2HTML(ints)); } }</lang> Output: 

<table><th></th><th>X</th><th>Y</th><th>Z</th><tr><td>1</td><td>1</td><td>2</td><td>3</td></tr><tr><td>2</td><td>4</td><td>5</td><td>6</td></tr><tr><td>3</td><td>7</td><td>8</td><td>9</td></tr><tr><td>4</td><td>10</td><td>11</td><td>12</td></tr></table>

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=174641"