Make a colorful table

6

For this challenge, you must accept input as a comma-separated list (columns) of a run (rows) of the first letters of any of the colors red, orange, yellow, green, blue, or purple, and output (to stdout) the HTML for a table of those colors.

This is fairly hard to understand, so I'll just give a simple example.

Input:

rgb,gbr,grb

Output (with example screenshot):

<html>
  <head>
  </head>
  <body>
    <table>
      <tbody>
        <tr>
          <td style="background-color: red" width="50" height="50"></td>
          <td style="background-color: green" width="50" height="50"></td>
          <td style="background-color: blue" width="50" height="50"></td>
        </tr>
        <tr>
          <td style="background-color: green" width="50" height="50"></td>
          <td style="background-color: blue" width="50" height="50"></td>
          <td style="background-color: red" width="50" height="50"></td>
        </tr>
        <tr>
          <td style="background-color: green" width="50" height="50"></td>
          <td style="background-color: red" width="50" height="50"></td>
          <td style="background-color: blue" width="50" height="50"></td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

image

Note that the HTML you output need not be valid; it just has to work. By "work", I mean that your output will be pasted into a .html file and viewed in the latest (currently, 9/28/13) Chrome (v 29.0.1547.76). The squares must be 50 pixels width and height. You may have whatever padding between them as you want (Chrome automatically uses 1 pixel of padding, even when you specify padding: 0px, so I can't control that).

Input will always be valid (letters will be one of roygbp), but the rows are not guaranteed to have equal amounts of squares in them. For example, roygbp,ooo is valid and should output

image 2

This is , shortest code wins.

Doorknob

Posted 2013-09-28T19:57:26.227

Reputation: 68 138

1Table layouts >:( – Ry- – 2013-09-29T02:16:24.800

1@minitech They're not layouts :P and anything goes in code golf :D – Doorknob – 2013-09-29T02:18:34.937

Answers

7

Perl: 153 126 124 116 114 characters

s!\w!'<td bgcolor=#'.substr(ff00f90707,yrbxoxgp=~$&&&@-[0],3).' width=50 height=50>'!ge;s!,!<tr>!g;$_="<table>$_"

Sample run:

bash-4.1$ perl -p table.pl <<< 'rgb,oyp'
<table><td bgcolor=#f00 width=50 height=50><td bgcolor=#070 width=50 height=50><td bgcolor=#00f width=50 height=50><tr><td bgcolor=#f90 width=50 height=50><td bgcolor=#ff0 width=50 height=50><td bgcolor=#707 width=50 height=50>

Sample output:

bash-4.1$ perl -p table.pl <<< 'yrryyryyryyyrrr,ryyyryryryyyryy,ryryryryryyyrry,yrryyryyrrryryy'

colorful table sample output

manatwork

Posted 2013-09-28T19:57:26.227

Reputation: 17 865

4

Razor Leaf, 136

table for r in prompt().split(",")
    tr for x in r
        td bgcolor:"##{"rf00of90yff0g070b00fp707".match(x+"(...)")[1]}"width:"50"height:"50"

Razor Leaf. The indentation is tabs, by the way.

You might have some trouble running this in a browser, so try Node.js and define global.prompt to return a fixed output. :)

var fs = require("fs");
var razorleaf = require("razorleaf");

global.prompt = function() {
    return "rgb,byp";
};

console.log(razorleaf.compile(fs.readFileSync("test.leaf", "utf-8"))());

Using other people’s tricks is 126, but that’s no good.

table cellpadding:"26"for r in prompt().split(",")
    tr for x in r
        td bgcolor:"##{"rf00rof90oyff0yg070gb00fbp707".split(x)[1]}"

Ry-

Posted 2013-09-28T19:57:26.227

Reputation: 5 283

1ooh, interesting language! I'm going to look in to that :D – Doorknob – 2013-09-29T02:24:25.987

3

Mathematica 148 139

d_~f~n_:=Export[n,Grid@ToExpression@Characters@d/.{r->Red,o->Orange,y->Yellow,g->Green,
b->Blue,p->Purple}/.{x_RGBColor:>Graphics@{x,Rectangle[]}}]

f, defined above, is a simple function that takes the color strings as input and outputs an HTML file.

Usage

f[{"rgb","gbr","grb"}, "ColorfulTable.html"]

The HTML code that is output to file "ColorfulTable.html":

< ?xml version="1.0" encoding="UTF-8"?>
< ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN"
"HTMLFiles/xhtml-math11-f.dtd" >
< ! --Created by Wolfram Mathematica 9.0 : www.wolfram.com-- >
< html xmlns = "http://www.w3.org/1999/xhtml" >
< head >
< title > Untitled
< /title >
< link href = "HTMLFiles/ColorfulTable.css" rel = "stylesheet" type = "text/css"/ >
 < /head >
 < body >
 < p class = "Output" >
  < img src = "HTMLFiles/ColorfulTable.gif" alt = "ColorfulTable.gif" width = "360" height = "360"   
   style = "vertical-align:middle"/ >
       < /p >
       < div style = "font-family:Helvetica; font-size:11px; width:100%; border:1px none #999999; border-top-style:solid; padding-top:2px; margin-top:20px;" >
        < a href = "http://www.wolfram.com/products/mathematica/" style = "color:#000; text-decoration:none;" >
          < img src = "HTMLFiles/spikeyIcon.png" alt = "Spikey" width = "20" height = "21" style = "padding-right:2px; border:0px solid white; vertical-align:middle;"/ >
               < span style = "color:#555555" > Created with < /span > Wolfram < span style = "font-style: italic;" > Mathematica < /span > 9.0
< /a >
< /div >
< /body >
< /html >

HTML rendering in Chrome

Chrome

DavidC

Posted 2013-09-28T19:57:26.227

Reputation: 24 524

Hmm... this is stretching the rules a lot... input is very different from specified and it outputs to a file, not stdout. I'm afraid that this breaks too many rules, but very creative :D (oh, and btw I count 171 chars) – Doorknob – 2013-09-29T02:20:35.480

too bad. In principal, I ought to be able to input the HTML as a string, leaving it in standard output. But I haven't figured out how to do it yet. The byte count seems to be correct. I used the automatic-counter from Wolfram's One-Liner Competition. The spaces are by and large optional. And :> is a single character in Mathematica. – DavidC – 2013-09-29T02:25:47.530

lettercount.com says 147 for the current code? Missed to update it ? – C5H8NNaO4 – 2013-10-01T10:55:06.633

-> and :> are single characters in Mathematica. And <newline> is included only for readability. – DavidC – 2013-10-01T12:09:20.510

3

JavaScript, 203 146

for(h='<table cellpadding=26>',p=prompt(),i=0;c=p[i++];)
h+=","==c?"<tr>":'<td bgcolor=#'+'rF00roFA0oyFF0yg080gb00Fbp808'.split(c)[1]+'>';
alert(h)

Credit to @C5H8NNaO4 for the single loop & cellpadding ideas. I'm using a split string to find the right color. (the line breaks were added for readability)

Input: 

rgb,bgroyp

Output:

<table cellpadding=26><td bgcolor=#F00><td bgcolor=#080><td bgcolor=#00F><tr><td bgcolor=#00F><td bgcolor=#080><td bgcolor=#F00><td bgcolor=#FA0><td bgcolor=#FF0><td bgcolor=#808>

Here's the JSFiddle

Does anyone know how to use unicode characters in JSFiddle? I could shave a few more characters off, but some characters wouldn't paste in correctly.

bendytree

Posted 2013-09-28T19:57:26.227

Reputation: 211

Nice improvement, especially the colorfinding =) – C5H8NNaO4 – 2013-10-02T09:47:12.670

wait did you just copy mine,replaced the color object and moved 2 vars inside the for ? =P +1 anyway – C5H8NNaO4 – 2013-10-02T09:55:36.177

2

GolfScript, 154 144 119

'<table><tr>'\{:^44='<tr>'{"<td bgcolor="['red''orange''yellow''green''blue''purple']{0=^=}?" width=50 height=50>"}if}%

Online test

With credit to @bendytree for introducing the no-close-tags trend which allowed me to cut 25 chars.

Volatility

Posted 2013-09-28T19:57:26.227

Reputation: 3 206

1

Python 3 (158)

print('<table>',*['<tr>'+''.join('<td width=50 height=50 bgcolor=#%03x>'%dict(r=3840,o=3984,y=4080,g=96,b=15,p=1799)[c]for c in r)for r in input().split(',')])

Cool things:

  • This uses the * operator to pass multiple arguments to print, saving 6 characters compared to ''.join.

  • The colors are stored in decimal, then rendered as hex in the HTML. I found this to be much shorter than using string literals directly.

Lambda Fairy

Posted 2013-09-28T19:57:26.227

Reputation: 311

1

Javascript, 199 183 173 171 167 164 159 158 154

h="<table cellpadding=26>";p=prompt();for(i=0;c=p[i++];)h+=","==c?"<tr>":'<td bgcolor=#'+{r:"F00",o:"FA0",y:"FF0",g:"080",b:"00F",p:"808"}[c]+'>';alert(h)

just realized i don't need an opening <tr> tag
stupid me, i of course do not need to split the input string to access single chars
... as well as i of course do not need to initialise c
inlined the lookup object
you can actually leave out the px for width and height
changed width and height to cellpadding 26px
replaced </tr> with <tr> removed the ' around 26 at the cellpadding and from the bgcolor

Changin the for to a for .. in loop would save only one character, so i keep the for

Example Output for roygbp,ooo

<table cellpadding=26><td bgcolor=#F00><td bgcolor=#FA0><td bgcolor=#FF0><td bgcolor=#080><td bgcolor=#00F><td bgcolor=#808><tr><td bgcolor=#FA0><td bgcolor=#FA0><td bgcolor=#FA0>

enter image description here

C5H8NNaO4

Posted 2013-09-28T19:57:26.227

Reputation: 1 340

1

ECMAScript 6: 148 characters

alert('<table>'+prompt().replace(/./g,x=>x==','?'<tr>':'<td bgcolor='+'red green orange yellow blue purple'.match(x+'\\w+')+' width=50 height=50>'))

(Just to exercise the fat arrow syntax.)

manatwork

Posted 2013-09-28T19:57:26.227

Reputation: 17 865

Could you name your language ECMAScript 6? As the latest firefox is currently the only browser supporting it, it would avoid confusion – C5H8NNaO4 – 2013-10-01T13:43:58.107

1

Ok. And thanks for the information. (Sadly I had no time to test in other browsers. But one thing is sure: in Firefox is available since version 22, not only the latest. ;))

– manatwork – 2013-10-01T13:53:53.737

=) Thanks, ( I would love seeing chrome supporting ES6 soon). Well yeah :P "latest" is the wrong word here, I'm not using firefox and am not up to date with their versions. So i think "the newer firefox browsers" would have been more appropriate. Nice use of the regex engine to create the complete table! +1 – C5H8NNaO4 – 2013-10-01T14:22:20.170

1

PHP, 182 164 163 characters

Example input:

<?php $x = 'roygbp,ooo'; ?>

Update 1; if you silence (or just ignore) E_NOTICE you can remove the quotes around strings that start with letters, shaving off another 18 characters

Update 2; trimmed 1 character!

<?php echo'<table cellpadding=50><tr>';$a=[r=>f00,g=>'080',b=>blue,o=>fa0,p=>'808',y=>ff0];foreach(str_split($x)as$b){echo$b==','?'<tr>':"<td bgcolor=#$a[$b]>";}?>

TheBigB

Posted 2013-09-28T19:57:26.227

Reputation: 111

You could change b=>'00f' to b=>blue to save 1 character, and remove cellpadding=50 to save 15. – Doorknob – 2013-10-03T23:41:33.463

@Doorknob Nice catch, but removing the cellpadding would make the boxes 2px x 2px; wouldn't that be cheating out of the assignment specification? – TheBigB – 2013-10-04T17:13:29.573

0

Ruby, 221 187

I am presenting my own solution first, as always:

$><<'<table>'+gets.chop.split(?,).map{|r|'<tr>'+r.chars.map{|t|"<td bgcolor=#{'red green orange yellow blue purple'.match(t+'\w+')[0]} width=50 height=50></td>"}*''+'</tr>'}*''+'</table>'

Doorknob

Posted 2013-09-28T19:57:26.227

Reputation: 68 138

That can be reduced to 187 with some simple tricks: $><<'<table>'+gets.chop.split(?,).map{|r|'<tr>'+r.chars.map{|t|"<td bgcolor=#{'red green orange yellow blue purple'.match(t+'\w+')[0]} width=50 height=50></td>"}*''+'</tr>'}*''+'</table>'. – manatwork – 2013-10-01T10:24:25.117

0

PHP, 277 characters

<style>div div{display:inline-block;width:50px;height:50px}<?foreach(array(red,orange,yellow,green,blue,purple)as$c){echo".$c[0]{background-color:$c}";}?></style><?foreach(split(",",fgets(STDIN))as$r){?><div><?foreach(str_split($r)as$c)echo"<div class='$c'></div>"?></div><?}?>

Input:

rgb,bgr,gbr

Output:

<style>div div{display:inline-block;width:50px;height:50px}.r{background-color:red}.o{background-color:orange}.y{background-color:yellow}.g{background-color:green}.b{background-color:blue}.p{background-color:purple}</style><div><div class='r'></div><div class='g'></div><div class='b'></div></div><div><div class='b'></div><div class='g'></div><div class='r'></div></div><div><div class='g'></div><div class='b'></div><div class='r'></div></div>

Hmmm... the stylesheet is killing me here. I don't have time now, but I'll come back to have a look at this later.

And yes, I'm deliberately not using tables for layout. ;-)

Gareth

Posted 2013-09-28T19:57:26.227

Reputation: 11 678

0

Python 2.7 (176)

I=raw_input().split(",")
h="<table>"
c=dict(r=3840,o=3984,y=4080,g=96,b=15,p=1799)
for r in I:
 h+="<tr>"
 for x in r:h+="<td width=50 height=50 bgcolor='#%03x'>"%c[x]
print h

I pinched the use of dict and the insertion of Hex values from @Lambda Fairy

And for good measure, here is a jsfiddle with an example output

user8777

Posted 2013-09-28T19:57:26.227

Reputation:

Asked: 2013-09-28T19:57:26.227

Viewed: 755 times

Active: 2013-10-04T17:15:04.597