Create an HTML table: Difference between revisions
(Go solution) |
(promoted to task) |
||
Line 1: | Line 1: | ||
{{ |
{{task}}[[Category:HTML]] |
||
Create an HTML table. |
Create an HTML table. |
||
* The table body should have at least three rows of three columns. |
* The table body should have at least three rows of three columns. |
Revision as of 23:02, 3 June 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.
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>
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 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("
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>
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.
<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>