Create an HTML table: Difference between revisions
mNo edit summary |
|||
| Line 124: | Line 124: | ||
=={{header|C++}}== |
=={{header|C++}}== |
||
<lang>#include <fstream> |
<lang cpp>#include <fstream> |
||
#include <boost/array.hpp> |
#include <boost/array.hpp> |
||
#include <string> |
#include <string> |
||
Revision as of 03:11, 3 July 2011
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.
Ada
<lang Ada>with Ada.Text_IO; with Ada.Numerics.Discrete_Random;
procedure HTML_Table is
use Ada.Text_IO;
function Blanks(N: Natural) return String is
begin
if N=0 then
return "";
else
return " " & Blanks(N-1);
end if;
end Blanks;
package Table is
type Four_Digits is mod 10_000;
package Rand is new Ada.Numerics.Discrete_Random(Four_Digits);
Gen: Rand.Generator;
type object is tagged null record;
procedure Print(T: Object; Rows: Natural);
procedure Print_Header(T: Object);
procedure Print_Body(T: Object; Rows: Natural);
procedure Print_Row(T: Object; Row_Number: Positive);
end Table;
package body Table is
procedure Print_Row(T: Object; Row_Number: Positive) is
begin
Put(Blanks(4) & "" & Positive'Image(Row_Number) & "");
for I in 1 .. 3 loop
Put("" & Four_Digits'Image(Rand.Random(Gen)) & "");
end loop;
Put_Line(""); end Print_Row; procedure Print_Body(T: Object; Rows: Natural) is begin Put_Line(Blanks(2)&"<tbody align = ""right"">"); for I in 1 .. Rows loop T.Print_Row(I); end loop; Put_Line(Blanks(2)&"</tbody>"); end Print_Body; procedure Print_Header(T: Object) is begin Put_Line(Blanks(2) & "<thead align = ""right"">"); Put_Line(Blanks(4) & "XY" & "Z");
Put_Line(Blanks(2) & "</thead>");
end Print_Header;
procedure Print(T: Object; Rows: Natural) is
begin
Put_Line("
"); T.Print_Header; T.Print_Body(Rows); Put_Line("");
end Print;
begin
Rand.Reset(Gen);
end Table;
T: Table.Object;
begin
T.Print(Rows => 4);
end HTML_Table;</lang>
Each time you run the program, you get different random values for the table. Here is a sample output:
<table>
<thead align = "right">
<tr><th></th><td>X</td><td>Y</td><td>Z</td></tr>
</thead>
<tbody align = "right">
<tr><td> 1</td><td> 5091</td><td> 395</td><td> 6319</td></tr>
<tr><td> 2</td><td> 7099</td><td> 746</td><td> 173</td></tr>
<tr><td> 3</td><td> 1701</td><td> 3897</td><td> 2124</td></tr>
<tr><td> 4</td><td> 8539</td><td> 1696</td><td> 1417</td></tr>
</tbody>
</table>
Viewing the output with Lynx:
X Y Z 1 5091 395 6319 2 7099 746 173 3 1701 3897 2124 4 8539 1696 1417
C
<lang C>#include <stdio.h>
- include <stdlib.h>
int main() { int i;
printf("
" "");for (i = 0; i < 4; i++) {
printf("", i,rand() % 10000, rand() % 10000, rand() % 10000); }
printf("| X | Y | Z | |
|---|---|---|---|
| %d | %d | %d | %d |
");
return 0;
}</lang>output (wiki doesn't like tbody/thead tags):
| X | Y | Z | |
|---|---|---|---|
| 0 | 2777 | 886 | 9383 |
| 1 | 8335 | 7793 | 6915 |
| 2 | 6649 | 492 | 5386 |
| 3 | 27 | 2362 | 1421 |
C++
<lang cpp>#include <fstream>
- include <boost/array.hpp>
- include <string>
- include <cstdlib>
- include <ctime>
- include <sstream>
void makeGap( int gap , std::string & text ) {
for ( int i = 0 ; i < gap ; i++ )
text.append( " " ) ;
}
int main( ) {
boost::array<char , 3> chars = { 'X' , 'Y' , 'Z' } ;
int headgap = 3 ;
int bodygap = 3 ;
int tablegap = 6 ;
int rowgap = 9 ;
std::string tabletext( "<html>\n" ) ;
makeGap( headgap , tabletext ) ;
tabletext += "<head></head>\n" ;
makeGap( bodygap , tabletext ) ;
tabletext += "<body>\n" ;
makeGap( tablegap , tabletext ) ;
tabletext += "
\n" ; makeGap( tablegap + 1 , tabletext ) ; tabletext += "<thead align=\"right\">\n" ; makeGap( tablegap, tabletext ) ; tabletext += "" ; for ( int i = 0 ; i < 3 ; i++ ) {
tabletext += "" ;
}
tabletext += "\n" ;
makeGap( tablegap + 1 , tabletext ) ;
tabletext += "</thead>" ;
makeGap( tablegap + 1 , tabletext ) ;
tabletext += "<tbody align=\"right\">\n" ;
srand( time( 0 ) ) ;
for ( int row = 0 ; row < 5 ; row++ ) {
makeGap( rowgap , tabletext ) ;
std::ostringstream oss ;
tabletext += "" ;
}
tabletext += "\n" ;
}
makeGap( tablegap + 1 , tabletext ) ;
tabletext += "</tbody>\n" ;
makeGap( tablegap , tabletext ) ;
tabletext += "" ;
tabletext += *(chars.begin( ) + i ) ;tabletext += " | |
" ;
oss << row ;
tabletext += oss.str( ) ;
for ( int col = 0 ; col < 3 ; col++ ) {
oss.str( "" ) ; int randnumber = rand( ) % 10000 ; oss << randnumber ; tabletext += " | " ;
tabletext.append( oss.str( ) ) ; tabletext += " |
\n" ;
makeGap( bodygap , tabletext ) ; tabletext += "</body>\n" ; tabletext += "</html>\n" ; std::ofstream htmltable( "testtable.html" , std::ios::out | std::ios::trunc ) ; htmltable << tabletext ; htmltable.close( ) ; return 0 ;
}</lang> Output ( of testtable.html ):
<html>
<head></head>
<body>
<table>
<thead align="right">
<tr><th></th><td>X</td><td>Y</td><td>Z</td></tr>
</thead>
<tbody align="right">
<tr><td>0<td>1274</td><td>6847</td><td>352</td></tr>
<tr><td>1<td>846</td><td>6577</td><td>4612</td></tr>
<tr><td>2<td>7543</td><td>1644</td><td>8143</td></tr>
<tr><td>3<td>4928</td><td>5714</td><td>8186</td></tr>
<tr><td>4<td>3436</td><td>7493</td><td>9344</td></tr>
</tbody>
</table>
</body>
</html>
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}
| X | Y | Z | |
|---|---|---|---|
| {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>
Icon and Unicon
<lang Icon>procedure main()
printf("
\n ")every r := 1 to 4 do {
printf("\n ",r) every 1 to 3 do printf("",?9999) # random 4 digit numbers per cell}printf("\n
| X | Y | Z | |
|---|---|---|---|
| %d | %d |
\n")
end
link printf </lang>
Sample Output:
<table>
<tr><th></th><th>X</th><th>Y</th><th>Z</th></tr>
<tr><td>1</td><td>3129</td><td>3294</td><td>7013</td></tr>
<tr><td>2</td><td>5045</td><td>169</td><td>5761</td></tr>
<tr><td>3</td><td>7001</td><td>963</td><td>4183</td></tr>
<tr><td>4</td><td>1695</td><td>1158</td><td>1240</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
| 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.
Java
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>
| X | Y | Z |
|---|
<script>fill(document.getElementById("x"));</script> </body></html></lang>
Modula-2
<lang modula2>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("| Index | Length | Content |
|---|---|---|
');
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>
Perl
<lang Perl>my @heading = qw(X Y Z); my $rows = 5;
print '
<thead>" } @heading),"</thead><tbody>";
for (1 .. $rows) {
print "", (map { "" } @heading), ""; } print "</tbody>| ', (map { " | $_ |
|---|---|
| $_ | ".int(rand(10000))." |
";</lang>
Note that this is a rather inane way (because of the inane task specification) of generating structured document. For serious work, one should use a module such as XML or HTML for well-formedness instead of this ad hoc method.
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>PL/I
<lang PL/I> /* Create an HTML table. 6/2011 */
create: procedure options (main);
create_table: procedure (headings, table_contents);
declare headings(*) character (10) varying; declare table_contents(*, *) fixed; declare (i, row, col) fixed;put skip edit ('
/* For an empty column heading */ do i = 1 to hbound(headings);put edit (' ' ) (a);
end;put edit ('') (a); /* Table contents. */ do row = 1 to hbound(table_contents, 1); /* row number */ put skip edit (' ') (a);
/* row contents */
do col = 1 to hbound(table_contents, 2);
put edit (' ' ) (a);
end;put edit ('') (a); end; put skip edit ('
| ', headings(i), ' | |
|---|---|
| ', row, ' | ', table_contents(row, col), ' |
' ) (a);
end create_table;
declare headings (3) character (1) static initial ('X', 'Y', 'Z');
declare table_contents(3, 3) fixed static initial (
4, -3, 8,
7, 2, -6,
11, 1, 15);
call create_table (headings, table_contents);
end create;
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.
<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
<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>
Tcl
<lang tcl># Make ourselves a very simple templating lib; just two commands proc TAG {name args} {
set body [lindex $args end]
set result "<$name"
foreach {t v} [lrange $args 0 end-1] {
append result " $t=\"" $v "\""
} append result ">" [string trim [uplevel 1 [list subst $body]]] "</$name>"
} proc FOREACH {var lst str} {
upvar 1 $var v
set result {}
set s [list subst $str]
foreach v $lst {append result [string trim [uplevel 1 $s]]}
return $result
}
- Build the data we're displaying
set titles {"" "X" "Y" "Z"} set data {} for {set x 0} {$x < 4} {incr x} {
# Inspired by the Go solution, but with extra arbitrary digits to show 4-char wide values lappend data [list \
[expr {$x+1}] [expr {$x*3010}] [expr {$x*3+1298}] [expr {$x*2579+2182}]] }
- Write the table to standard out
puts [TAG table border 1 {
[TAG tr bgcolor #f0f0f0 {
[FOREACH head $titles { [TAG th {$head}] }]
}]
[FOREACH row $data {
[TAG tr bgcolor #ffffff { [FOREACH col $row { [TAG td align right {$col}] }] }]
}]
}]</lang>