Excel Interactive Tables


Error message

  • Deprecated function: implode(): Passing glue string after array is deprecated. Swap the parameters in drupal_get_feeds() (line 394 of /homepages/10/d394373203/htdocs/puttingthedanindanger/includes/common.inc).
  • Deprecated function: The each() function is deprecated. This message will be suppressed on further calls in menu_set_active_trail() (line 2385 of /homepages/10/d394373203/htdocs/puttingthedanindanger/includes/menu.inc).
Impressive (relatively) new feature from Microsoft. Here are Interactive HTML Tables by Excel. This feature has now been deprecated, sorry. Please see my more recent article on Embedding Excel in a website to see how you do it now
Month Revenue Cost Profit
January 3432 454 2978
February 565 3455 -2890
March 4566 423 4143
April 7675 4277 3398
May 435 566 -131
June 45676 2243 43433
July 23423 56477 -33054
August 4565 324 4241
September 12334 54 12280
October 98809 576 98233
November 2342 7 2335
December 5643 575 5068
See that green button on the top? Give it a click. All of that was created with two lines of code. I'm serious, two lines of code and an export from excel. Note: If you can't see the button, clear your recent cache on your browser and refresh the page, I promise, it's there. Let's do an example. Say you've got a table in excel: Does that look familiar? It should, it's the one I used in the example! Now I'm going to show you how to put it into a website. First thing is to get the table into html. Make sure all your cell values fit within the cell boarders (change your column widths if needed) then go to file > save as... then select "Web Page" Choose your file name and location and select to publish just the sheet (or republish in my case): It doesn't matter where you save it, as long as you can find it, odds are you will just be ripping out the HTML anyway. The last step in generating the HTML table is to click "Publish." Now we have a file containing our HTML table! Go ahead and open this file in a browser and check to see if any values are getting cut off. If you see this: Expand your columns in the original excel file and re-export. Believe me, this will make your life much easier! Next we need to open up this file in an editor. Use whatever you like, I like Notepad++ but just regular notepad is fine. You'll find that Excel put a bunch of crap in here, ignore all the extra HTML, all we care about are the "table" tags, and the stuff between them. Here's what the top table tag will look like: And the bottom: Now that you have the HTML table, it's time to add the code. Put this snippet above the first "table" tag: <a href="#" name="MicrosoftExcelButton" data-xl-buttonStyle="Small" data-xl-tabletitle="My Table Title"></a> Next put the following javascript snippet above the closing "body" tag: <script src="http://r.office.microsoft.com/r/rlidExcelButton?v=1&kip=1" type="text/javascript"></script> Now you can make cool tables on any website! If you want to try it yourself, here's a link to my source code for the table: https://www.dropbox.com/s/n0jsltzx1jjeoqn/ExcelTableTest.htm This is the code produced by the excel export so you can get an idea of what the actual output and code looks like. To view this in a browser, simply open the file with your browser of choice and it should work perfectly. It's that easy!