Skip to content

Instantly share code, notes, and snippets.

@jiffyclub
Created October 28, 2012 04:32
Show Gist options
  • Save jiffyclub/3967522 to your computer and use it in GitHub Desktop.
Save jiffyclub/3967522 to your computer and use it in GitHub Desktop.
A demo of IPython's HTML and Javascript display functions to create a table and modify the color of its cells.
{
"metadata": {
"name": "TableFormatterDemo"
},
"nbformat": 3,
"nbformat_minor": 0,
"worksheets": [
{
"cells": [
{
"cell_type": "code",
"collapsed": false,
"input": [
"from IPython.display import Javascript, display, HTML"
],
"language": "python",
"metadata": {},
"outputs": [],
"prompt_number": 1
},
{
"cell_type": "code",
"collapsed": false,
"input": [
"outer = '<table>{}</table>'"
],
"language": "python",
"metadata": {},
"outputs": [],
"prompt_number": 2
},
{
"cell_type": "code",
"collapsed": false,
"input": [
"nrows = 25\n",
"ncols = 25"
],
"language": "python",
"metadata": {},
"outputs": [],
"prompt_number": 3
},
{
"cell_type": "code",
"collapsed": false,
"input": [
"tr = '<tr>{}</tr>'\n",
"td = '<td id=\"{}\"></td>'\n",
"rows = ''\n",
"for i in xrange(nrows):\n",
" row = ''\n",
" for j in xrange(ncols):\n",
" row += td.format(':'.join((str(i), str(j))))\n",
" rows += tr.format(row)\n",
"table = outer.format(rows)"
],
"language": "python",
"metadata": {},
"outputs": [],
"prompt_number": 4
},
{
"cell_type": "code",
"collapsed": false,
"input": [
"display(HTML(table))"
],
"language": "python",
"metadata": {},
"outputs": [
{
"html": [
"<table><tr><td id=\"0:0\"></td><td id=\"0:1\"></td><td id=\"0:2\"></td><td id=\"0:3\"></td><td id=\"0:4\"></td><td id=\"0:5\"></td><td id=\"0:6\"></td><td id=\"0:7\"></td><td id=\"0:8\"></td><td id=\"0:9\"></td><td id=\"0:10\"></td><td id=\"0:11\"></td><td id=\"0:12\"></td><td id=\"0:13\"></td><td id=\"0:14\"></td><td id=\"0:15\"></td><td id=\"0:16\"></td><td id=\"0:17\"></td><td id=\"0:18\"></td><td id=\"0:19\"></td><td id=\"0:20\"></td><td id=\"0:21\"></td><td id=\"0:22\"></td><td id=\"0:23\"></td><td id=\"0:24\"></td></tr><tr><td id=\"1:0\"></td><td id=\"1:1\"></td><td id=\"1:2\"></td><td id=\"1:3\"></td><td id=\"1:4\"></td><td id=\"1:5\"></td><td id=\"1:6\"></td><td id=\"1:7\"></td><td id=\"1:8\"></td><td id=\"1:9\"></td><td id=\"1:10\"></td><td id=\"1:11\"></td><td id=\"1:12\"></td><td id=\"1:13\"></td><td id=\"1:14\"></td><td id=\"1:15\"></td><td id=\"1:16\"></td><td id=\"1:17\"></td><td id=\"1:18\"></td><td id=\"1:19\"></td><td id=\"1:20\"></td><td id=\"1:21\"></td><td id=\"1:22\"></td><td id=\"1:23\"></td><td id=\"1:24\"></td></tr><tr><td id=\"2:0\"></td><td id=\"2:1\"></td><td id=\"2:2\"></td><td id=\"2:3\"></td><td id=\"2:4\"></td><td id=\"2:5\"></td><td id=\"2:6\"></td><td id=\"2:7\"></td><td id=\"2:8\"></td><td id=\"2:9\"></td><td id=\"2:10\"></td><td id=\"2:11\"></td><td id=\"2:12\"></td><td id=\"2:13\"></td><td id=\"2:14\"></td><td id=\"2:15\"></td><td id=\"2:16\"></td><td id=\"2:17\"></td><td id=\"2:18\"></td><td id=\"2:19\"></td><td id=\"2:20\"></td><td id=\"2:21\"></td><td id=\"2:22\"></td><td id=\"2:23\"></td><td id=\"2:24\"></td></tr><tr><td id=\"3:0\"></td><td id=\"3:1\"></td><td id=\"3:2\"></td><td id=\"3:3\"></td><td id=\"3:4\"></td><td id=\"3:5\"></td><td id=\"3:6\"></td><td id=\"3:7\"></td><td id=\"3:8\"></td><td id=\"3:9\"></td><td id=\"3:10\"></td><td id=\"3:11\"></td><td id=\"3:12\"></td><td id=\"3:13\"></td><td id=\"3:14\"></td><td id=\"3:15\"></td><td id=\"3:16\"></td><td id=\"3:17\"></td><td id=\"3:18\"></td><td id=\"3:19\"></td><td id=\"3:20\"></td><td id=\"3:21\"></td><td id=\"3:22\"></td><td id=\"3:23\"></td><td id=\"3:24\"></td></tr><tr><td id=\"4:0\"></td><td id=\"4:1\"></td><td id=\"4:2\"></td><td id=\"4:3\"></td><td id=\"4:4\"></td><td id=\"4:5\"></td><td id=\"4:6\"></td><td id=\"4:7\"></td><td id=\"4:8\"></td><td id=\"4:9\"></td><td id=\"4:10\"></td><td id=\"4:11\"></td><td id=\"4:12\"></td><td id=\"4:13\"></td><td id=\"4:14\"></td><td id=\"4:15\"></td><td id=\"4:16\"></td><td id=\"4:17\"></td><td id=\"4:18\"></td><td id=\"4:19\"></td><td id=\"4:20\"></td><td id=\"4:21\"></td><td id=\"4:22\"></td><td id=\"4:23\"></td><td id=\"4:24\"></td></tr><tr><td id=\"5:0\"></td><td id=\"5:1\"></td><td id=\"5:2\"></td><td id=\"5:3\"></td><td id=\"5:4\"></td><td id=\"5:5\"></td><td id=\"5:6\"></td><td id=\"5:7\"></td><td id=\"5:8\"></td><td id=\"5:9\"></td><td id=\"5:10\"></td><td id=\"5:11\"></td><td id=\"5:12\"></td><td id=\"5:13\"></td><td id=\"5:14\"></td><td id=\"5:15\"></td><td id=\"5:16\"></td><td id=\"5:17\"></td><td id=\"5:18\"></td><td id=\"5:19\"></td><td id=\"5:20\"></td><td id=\"5:21\"></td><td id=\"5:22\"></td><td id=\"5:23\"></td><td id=\"5:24\"></td></tr><tr><td id=\"6:0\"></td><td id=\"6:1\"></td><td id=\"6:2\"></td><td id=\"6:3\"></td><td id=\"6:4\"></td><td id=\"6:5\"></td><td id=\"6:6\"></td><td id=\"6:7\"></td><td id=\"6:8\"></td><td id=\"6:9\"></td><td id=\"6:10\"></td><td id=\"6:11\"></td><td id=\"6:12\"></td><td id=\"6:13\"></td><td id=\"6:14\"></td><td id=\"6:15\"></td><td id=\"6:16\"></td><td id=\"6:17\"></td><td id=\"6:18\"></td><td id=\"6:19\"></td><td id=\"6:20\"></td><td id=\"6:21\"></td><td id=\"6:22\"></td><td id=\"6:23\"></td><td id=\"6:24\"></td></tr><tr><td id=\"7:0\"></td><td id=\"7:1\"></td><td id=\"7:2\"></td><td id=\"7:3\"></td><td id=\"7:4\"></td><td id=\"7:5\"></td><td id=\"7:6\"></td><td id=\"7:7\"></td><td id=\"7:8\"></td><td id=\"7:9\"></td><td id=\"7:10\"></td><td id=\"7:11\"></td><td id=\"7:12\"></td><td id=\"7:13\"></td><td id=\"7:14\"></td><td id=\"7:15\"></td><td id=\"7:16\"></td><td id=\"7:17\"></td><td id=\"7:18\"></td><td id=\"7:19\"></td><td id=\"7:20\"></td><td id=\"7:21\"></td><td id=\"7:22\"></td><td id=\"7:23\"></td><td id=\"7:24\"></td></tr><tr><td id=\"8:0\"></td><td id=\"8:1\"></td><td id=\"8:2\"></td><td id=\"8:3\"></td><td id=\"8:4\"></td><td id=\"8:5\"></td><td id=\"8:6\"></td><td id=\"8:7\"></td><td id=\"8:8\"></td><td id=\"8:9\"></td><td id=\"8:10\"></td><td id=\"8:11\"></td><td id=\"8:12\"></td><td id=\"8:13\"></td><td id=\"8:14\"></td><td id=\"8:15\"></td><td id=\"8:16\"></td><td id=\"8:17\"></td><td id=\"8:18\"></td><td id=\"8:19\"></td><td id=\"8:20\"></td><td id=\"8:21\"></td><td id=\"8:22\"></td><td id=\"8:23\"></td><td id=\"8:24\"></td></tr><tr><td id=\"9:0\"></td><td id=\"9:1\"></td><td id=\"9:2\"></td><td id=\"9:3\"></td><td id=\"9:4\"></td><td id=\"9:5\"></td><td id=\"9:6\"></td><td id=\"9:7\"></td><td id=\"9:8\"></td><td id=\"9:9\"></td><td id=\"9:10\"></td><td id=\"9:11\"></td><td id=\"9:12\"></td><td id=\"9:13\"></td><td id=\"9:14\"></td><td id=\"9:15\"></td><td id=\"9:16\"></td><td id=\"9:17\"></td><td id=\"9:18\"></td><td id=\"9:19\"></td><td id=\"9:20\"></td><td id=\"9:21\"></td><td id=\"9:22\"></td><td id=\"9:23\"></td><td id=\"9:24\"></td></tr><tr><td id=\"10:0\"></td><td id=\"10:1\"></td><td id=\"10:2\"></td><td id=\"10:3\"></td><td id=\"10:4\"></td><td id=\"10:5\"></td><td id=\"10:6\"></td><td id=\"10:7\"></td><td id=\"10:8\"></td><td id=\"10:9\"></td><td id=\"10:10\"></td><td id=\"10:11\"></td><td id=\"10:12\"></td><td id=\"10:13\"></td><td id=\"10:14\"></td><td id=\"10:15\"></td><td id=\"10:16\"></td><td id=\"10:17\"></td><td id=\"10:18\"></td><td id=\"10:19\"></td><td id=\"10:20\"></td><td id=\"10:21\"></td><td id=\"10:22\"></td><td id=\"10:23\"></td><td id=\"10:24\"></td></tr><tr><td id=\"11:0\"></td><td id=\"11:1\"></td><td id=\"11:2\"></td><td id=\"11:3\"></td><td id=\"11:4\"></td><td id=\"11:5\"></td><td id=\"11:6\"></td><td id=\"11:7\"></td><td id=\"11:8\"></td><td id=\"11:9\"></td><td id=\"11:10\"></td><td id=\"11:11\"></td><td id=\"11:12\"></td><td id=\"11:13\"></td><td id=\"11:14\"></td><td id=\"11:15\"></td><td id=\"11:16\"></td><td id=\"11:17\"></td><td id=\"11:18\"></td><td id=\"11:19\"></td><td id=\"11:20\"></td><td id=\"11:21\"></td><td id=\"11:22\"></td><td id=\"11:23\"></td><td id=\"11:24\"></td></tr><tr><td id=\"12:0\"></td><td id=\"12:1\"></td><td id=\"12:2\"></td><td id=\"12:3\"></td><td id=\"12:4\"></td><td id=\"12:5\"></td><td id=\"12:6\"></td><td id=\"12:7\"></td><td id=\"12:8\"></td><td id=\"12:9\"></td><td id=\"12:10\"></td><td id=\"12:11\"></td><td id=\"12:12\"></td><td id=\"12:13\"></td><td id=\"12:14\"></td><td id=\"12:15\"></td><td id=\"12:16\"></td><td id=\"12:17\"></td><td id=\"12:18\"></td><td id=\"12:19\"></td><td id=\"12:20\"></td><td id=\"12:21\"></td><td id=\"12:22\"></td><td id=\"12:23\"></td><td id=\"12:24\"></td></tr><tr><td id=\"13:0\"></td><td id=\"13:1\"></td><td id=\"13:2\"></td><td id=\"13:3\"></td><td id=\"13:4\"></td><td id=\"13:5\"></td><td id=\"13:6\"></td><td id=\"13:7\"></td><td id=\"13:8\"></td><td id=\"13:9\"></td><td id=\"13:10\"></td><td id=\"13:11\"></td><td id=\"13:12\"></td><td id=\"13:13\"></td><td id=\"13:14\"></td><td id=\"13:15\"></td><td id=\"13:16\"></td><td id=\"13:17\"></td><td id=\"13:18\"></td><td id=\"13:19\"></td><td id=\"13:20\"></td><td id=\"13:21\"></td><td id=\"13:22\"></td><td id=\"13:23\"></td><td id=\"13:24\"></td></tr><tr><td id=\"14:0\"></td><td id=\"14:1\"></td><td id=\"14:2\"></td><td id=\"14:3\"></td><td id=\"14:4\"></td><td id=\"14:5\"></td><td id=\"14:6\"></td><td id=\"14:7\"></td><td id=\"14:8\"></td><td id=\"14:9\"></td><td id=\"14:10\"></td><td id=\"14:11\"></td><td id=\"14:12\"></td><td id=\"14:13\"></td><td id=\"14:14\"></td><td id=\"14:15\"></td><td id=\"14:16\"></td><td id=\"14:17\"></td><td id=\"14:18\"></td><td id=\"14:19\"></td><td id=\"14:20\"></td><td id=\"14:21\"></td><td id=\"14:22\"></td><td id=\"14:23\"></td><td id=\"14:24\"></td></tr><tr><td id=\"15:0\"></td><td id=\"15:1\"></td><td id=\"15:2\"></td><td id=\"15:3\"></td><td id=\"15:4\"></td><td id=\"15:5\"></td><td id=\"15:6\"></td><td id=\"15:7\"></td><td id=\"15:8\"></td><td id=\"15:9\"></td><td id=\"15:10\"></td><td id=\"15:11\"></td><td id=\"15:12\"></td><td id=\"15:13\"></td><td id=\"15:14\"></td><td id=\"15:15\"></td><td id=\"15:16\"></td><td id=\"15:17\"></td><td id=\"15:18\"></td><td id=\"15:19\"></td><td id=\"15:20\"></td><td id=\"15:21\"></td><td id=\"15:22\"></td><td id=\"15:23\"></td><td id=\"15:24\"></td></tr><tr><td id=\"16:0\"></td><td id=\"16:1\"></td><td id=\"16:2\"></td><td id=\"16:3\"></td><td id=\"16:4\"></td><td id=\"16:5\"></td><td id=\"16:6\"></td><td id=\"16:7\"></td><td id=\"16:8\"></td><td id=\"16:9\"></td><td id=\"16:10\"></td><td id=\"16:11\"></td><td id=\"16:12\"></td><td id=\"16:13\"></td><td id=\"16:14\"></td><td id=\"16:15\"></td><td id=\"16:16\"></td><td id=\"16:17\"></td><td id=\"16:18\"></td><td id=\"16:19\"></td><td id=\"16:20\"></td><td id=\"16:21\"></td><td id=\"16:22\"></td><td id=\"16:23\"></td><td id=\"16:24\"></td></tr><tr><td id=\"17:0\"></td><td id=\"17:1\"></td><td id=\"17:2\"></td><td id=\"17:3\"></td><td id=\"17:4\"></td><td id=\"17:5\"></td><td id=\"17:6\"></td><td id=\"17:7\"></td><td id=\"17:8\"></td><td id=\"17:9\"></td><td id=\"17:10\"></td><td id=\"17:11\"></td><td id=\"17:12\"></td><td id=\"17:13\"></td><td id=\"17:14\"></td><td id=\"17:15\"></td><td id=\"17:16\"></td><td id=\"17:17\"></td><td id=\"17:18\"></td><td id=\"17:19\"></td><td id=\"17:20\"></td><td id=\"17:21\"></td><td id=\"17:22\"></td><td id=\"17:23\"></td><td id=\"17:24\"></td></tr><tr><td id=\"18:0\"></td><td id=\"18:1\"></td><td id=\"18:2\"></td><td id=\"18:3\"></td><td id=\"18:4\"></td><td id=\"18:5\"></td><td id=\"18:6\"></td><td id=\"18:7\"></td><td id=\"18:8\"></td><td id=\"18:9\"></td><td id=\"18:10\"></td><td id=\"18:11\"></td><td id=\"18:12\"></td><td id=\"18:13\"></td><td id=\"18:14\"></td><td id=\"18:15\"></td><td id=\"18:16\"></td><td id=\"18:17\"></td><td id=\"18:18\"></td><td id=\"18:19\"></td><td id=\"18:20\"></td><td id=\"18:21\"></td><td id=\"18:22\"></td><td id=\"18:23\"></td><td id=\"18:24\"></td></tr><tr><td id=\"19:0\"></td><td id=\"19:1\"></td><td id=\"19:2\"></td><td id=\"19:3\"></td><td id=\"19:4\"></td><td id=\"19:5\"></td><td id=\"19:6\"></td><td id=\"19:7\"></td><td id=\"19:8\"></td><td id=\"19:9\"></td><td id=\"19:10\"></td><td id=\"19:11\"></td><td id=\"19:12\"></td><td id=\"19:13\"></td><td id=\"19:14\"></td><td id=\"19:15\"></td><td id=\"19:16\"></td><td id=\"19:17\"></td><td id=\"19:18\"></td><td id=\"19:19\"></td><td id=\"19:20\"></td><td id=\"19:21\"></td><td id=\"19:22\"></td><td id=\"19:23\"></td><td id=\"19:24\"></td></tr><tr><td id=\"20:0\"></td><td id=\"20:1\"></td><td id=\"20:2\"></td><td id=\"20:3\"></td><td id=\"20:4\"></td><td id=\"20:5\"></td><td id=\"20:6\"></td><td id=\"20:7\"></td><td id=\"20:8\"></td><td id=\"20:9\"></td><td id=\"20:10\"></td><td id=\"20:11\"></td><td id=\"20:12\"></td><td id=\"20:13\"></td><td id=\"20:14\"></td><td id=\"20:15\"></td><td id=\"20:16\"></td><td id=\"20:17\"></td><td id=\"20:18\"></td><td id=\"20:19\"></td><td id=\"20:20\"></td><td id=\"20:21\"></td><td id=\"20:22\"></td><td id=\"20:23\"></td><td id=\"20:24\"></td></tr><tr><td id=\"21:0\"></td><td id=\"21:1\"></td><td id=\"21:2\"></td><td id=\"21:3\"></td><td id=\"21:4\"></td><td id=\"21:5\"></td><td id=\"21:6\"></td><td id=\"21:7\"></td><td id=\"21:8\"></td><td id=\"21:9\"></td><td id=\"21:10\"></td><td id=\"21:11\"></td><td id=\"21:12\"></td><td id=\"21:13\"></td><td id=\"21:14\"></td><td id=\"21:15\"></td><td id=\"21:16\"></td><td id=\"21:17\"></td><td id=\"21:18\"></td><td id=\"21:19\"></td><td id=\"21:20\"></td><td id=\"21:21\"></td><td id=\"21:22\"></td><td id=\"21:23\"></td><td id=\"21:24\"></td></tr><tr><td id=\"22:0\"></td><td id=\"22:1\"></td><td id=\"22:2\"></td><td id=\"22:3\"></td><td id=\"22:4\"></td><td id=\"22:5\"></td><td id=\"22:6\"></td><td id=\"22:7\"></td><td id=\"22:8\"></td><td id=\"22:9\"></td><td id=\"22:10\"></td><td id=\"22:11\"></td><td id=\"22:12\"></td><td id=\"22:13\"></td><td id=\"22:14\"></td><td id=\"22:15\"></td><td id=\"22:16\"></td><td id=\"22:17\"></td><td id=\"22:18\"></td><td id=\"22:19\"></td><td id=\"22:20\"></td><td id=\"22:21\"></td><td id=\"22:22\"></td><td id=\"22:23\"></td><td id=\"22:24\"></td></tr><tr><td id=\"23:0\"></td><td id=\"23:1\"></td><td id=\"23:2\"></td><td id=\"23:3\"></td><td id=\"23:4\"></td><td id=\"23:5\"></td><td id=\"23:6\"></td><td id=\"23:7\"></td><td id=\"23:8\"></td><td id=\"23:9\"></td><td id=\"23:10\"></td><td id=\"23:11\"></td><td id=\"23:12\"></td><td id=\"23:13\"></td><td id=\"23:14\"></td><td id=\"23:15\"></td><td id=\"23:16\"></td><td id=\"23:17\"></td><td id=\"23:18\"></td><td id=\"23:19\"></td><td id=\"23:20\"></td><td id=\"23:21\"></td><td id=\"23:22\"></td><td id=\"23:23\"></td><td id=\"23:24\"></td></tr><tr><td id=\"24:0\"></td><td id=\"24:1\"></td><td id=\"24:2\"></td><td id=\"24:3\"></td><td id=\"24:4\"></td><td id=\"24:5\"></td><td id=\"24:6\"></td><td id=\"24:7\"></td><td id=\"24:8\"></td><td id=\"24:9\"></td><td id=\"24:10\"></td><td id=\"24:11\"></td><td id=\"24:12\"></td><td id=\"24:13\"></td><td id=\"24:14\"></td><td id=\"24:15\"></td><td id=\"24:16\"></td><td id=\"24:17\"></td><td id=\"24:18\"></td><td id=\"24:19\"></td><td id=\"24:20\"></td><td id=\"24:21\"></td><td id=\"24:22\"></td><td id=\"24:23\"></td><td id=\"24:24\"></td></tr></table>"
],
"output_type": "display_data",
"text": [
"<IPython.core.display.HTML at 0x10691aa90>"
]
}
],
"prompt_number": 5
},
{
"cell_type": "code",
"collapsed": false,
"input": [
"display(Javascript(\"\"\"\n",
"var i, j;\n",
"for (i = 0; i < {}; i++) {{\n",
" for (j = 0; j < {}; j++) {{\n",
" var cell = window.document.getElementById(i + ':' + j);\n",
" if (i % 2 == 0 && j % 2 == 0) {{\n",
" cell.style.backgroundColor = '{}';\n",
" }} else {{\n",
" cell.style.backgroundColor = '{}';\n",
" }};\n",
" }};\n",
"}};\"\"\".format(nrows, ncols, '#00FF55', 'black')))"
],
"language": "python",
"metadata": {},
"outputs": [
{
"javascript": [
"\n",
"var i, j;\n",
"for (i = 0; i < 25; i++) {\n",
" for (j = 0; j < 25; j++) {\n",
" var cell = window.document.getElementById(i + ':' + j);\n",
" if (i % 2 == 0 && j % 2 == 0) {\n",
" cell.style.backgroundColor = '#00FF55';\n",
" } else {\n",
" cell.style.backgroundColor = 'black';\n",
" };\n",
" };\n",
"};"
],
"output_type": "display_data",
"text": [
"<IPython.core.display.Javascript at 0x10691ac90>"
]
}
],
"prompt_number": 6
}
],
"metadata": {}
}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment