Create an HTML table
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
<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>
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>