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.



Output (with example screenshot):

          <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>
          <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>
          <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>


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.

  • 1
    \$\begingroup\$ Table layouts >:( \$\endgroup\$ – Ry- Sep 29 '13 at 2:16
  • 1
    \$\begingroup\$ @minitech They're not layouts :P and anything goes in code golf :D \$\endgroup\$ – Doorknob Sep 29 '13 at 2:18

12 Answers 12


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


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]}"
  • 1
    \$\begingroup\$ ooh, interesting language! I'm going to look in to that :D \$\endgroup\$ – Doorknob Sep 29 '13 at 2:24

Mathematica 148 139


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


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


  • \$\begingroup\$ 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) \$\endgroup\$ – Doorknob Sep 29 '13 at 2:20
  • \$\begingroup\$ 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. \$\endgroup\$ – DavidC Sep 29 '13 at 2:25
  • \$\begingroup\$ lettercount.com says 147 for the current code? Missed to update it ? \$\endgroup\$ – C5H8NNaO4 Oct 1 '13 at 10:55
  • \$\begingroup\$ -> and :> are single characters in Mathematica. And <newline> is included only for readability. \$\endgroup\$ – DavidC Oct 1 '13 at 12:09

JavaScript, 203 146

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

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)




<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.

  • \$\begingroup\$ Nice improvement, especially the colorfinding =) \$\endgroup\$ – C5H8NNaO4 Oct 2 '13 at 9:47
  • \$\begingroup\$ wait did you just copy mine,replaced the color object and moved 2 vars inside the for ? =P +1 anyway \$\endgroup\$ – C5H8NNaO4 Oct 2 '13 at 9:55

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.


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.


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.)

  • \$\begingroup\$ Could you name your language ECMAScript 6? As the latest firefox is currently the only browser supporting it, it would avoid confusion \$\endgroup\$ – C5H8NNaO4 Oct 1 '13 at 13:43
  • 1
    \$\begingroup\$ 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. ;)) \$\endgroup\$ – manatwork Oct 1 '13 at 13:53
  • \$\begingroup\$ =) 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 \$\endgroup\$ – C5H8NNaO4 Oct 1 '13 at 14:22

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


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]>";}?>
  • \$\begingroup\$ You could change b=>'00f' to b=>blue to save 1 character, and remove cellpadding=50 to save 15. \$\endgroup\$ – Doorknob Oct 3 '13 at 23:41
  • \$\begingroup\$ @Doorknob Nice catch, but removing the cellpadding would make the boxes 2px x 2px; wouldn't that be cheating out of the assignment specification? \$\endgroup\$ – TheBigB Oct 4 '13 at 17:13

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><?}?>




<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. ;-)


Python 2.7 (176)

for r in I:
 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


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>'
  • \$\begingroup\$ 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>'. \$\endgroup\$ – manatwork Oct 1 '13 at 10:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.