Skip to main content

How to copy data in Google Sheets as HTML table

I often need to extract some sample data in Google Sheets and present it in my blog as an HTML table. However, when copying a selected range in Google Sheets and paste it outside the Google Sheets, I only get plain text. In this post, I explain how to copy data in Google Sheets as an HTML table by writing a small Apps Script program.

Concept

  • On a spreadsheet, users select a range that they want to copy as HTML table.
  • With the selected range, users trigger a command Copy AS HTML table. The command can be added to the toolbar, or to the contextual menu, or accessed via a keyboard shortcut.
  • The command is executed to transform the selected range into HTML code for table. The HTML code can be added to the clipboard or can be displayed somewhere so users can copy it manually.
  • The HTML table must consist of all displayed cells of the selected range and the widths between columns must be respected proportionally.

Implementation

  • Write a small Apps Script program copyAsHTMLTable() to transform the selected range in the active sheet into a HTML code for table
  • According to Apps Script documentation, getActiveRange() returns the selected range in the active sheet.
  • According to Apps Script documentation, getDisplayValues() returns the rectangular grid of values for a range.
  • From the rectangular grid of values:
    • Use 2 for loops to iterate row by row and then column by column
    • Each row is wrapped in a HTML row tag <tr></tr>
    • Each column is wrapped in a HTML column tag <td></td>
      • If the first row represents headers, its columns are wrapped in the tag <th></th>
    • In order to respect the proportion of width between columns:
      • Use the getColumnWidth(columnPosition) to get the width in pixel for a given column
      • Compute the total width in pixels for the whole table
      • Compute the percentage of each column in terms of width in the table
      • Add the inline style, like <table style="width: 100%;">, for the table
      • Add the inline style, like <th style="width:30.82191780821918%;">Date</th>, for each cell in the first row
  • Present the HTML table code in a dialog so that user can copy it manually
  • Add the program copyAsHTMLTable() to a menu on the toolbar to easily run it

Source Code

function onOpen() { var spreadsheet = SpreadsheetApp.getActive() var menuItems = [ { name: 'Copy as HTML table', functionName: 'copyAsHTMLTable' } ] spreadsheet.addMenu('Personal Toolbox', menuItems) } function copyAsHTMLTable() { let spreadsheet = SpreadsheetApp.getActive(); let activeRange = spreadsheet.getActiveRange(); let firstColumnPositionInTheSheet = activeRange.getColumn(); let tableWidth = 0; for (var i = 0; i < activeRange.getWidth(); i++) { tableWidth += spreadsheet.getColumnWidth(firstColumnPositionInTheSheet + i); } let values = activeRange.getDisplayValues(); let text = '<table style="width: 100%;">'; for (var i = 0; i < values.length; i++) { text += '<tr>'; for (let j = 0; j < values[0].length; j++) { if (i == 0) { let thisColumnWidth = spreadsheet.getColumnWidth(firstColumnPositionInTheSheet + j); let thisColumnWidthPercent = 100 * thisColumnWidth / tableWidth; text += '<th style="width:' + thisColumnWidthPercent + '%;">'; } else { text += '<td>'; } text += values[i][j]; if (i == 0) { text += '</th>'; } else { text += '</td>'; } } text += '</tr>'; } text += '</table>'; let ui = SpreadsheetApp.getUi(); ui.alert('Please manually select and copy the text below', text, ui.ButtonSet.OK); }

Demo

Copy sheets as HTML table

HTML table code

<table style="width: 100%;"> <tr> <th style="width:30.82191780821918%;">Date</th> <th style="width:35.38812785388128%;">Type</th> <th style="width:10.730593607305936%;">Symbol</th> <th style="width:12.32876712328767%;">Amount</th> <th style="width:10.730593607305936%;">Shares</th> </tr> <tr> <td>04/05/2021</td> <td>DIVIDEND</td> <td>83</td> <td>141.1</td> <td>83</td> </tr> <tr> <td>03/05/2021</td> <td>DIVIDEND</td> <td>165</td> <td>74.25</td> <td>165</td> </tr> <tr> <td>30/04/2021</td> <td>BUY</td> <td>13</td> <td>-479.55</td> <td>13</td> </tr> <tr> <td>30/04/2021</td> <td>DEPOSIT</td> <td></td> <td>120</td> <td></td> </tr> <tr> <td>21/04/2021</td> <td>DIVIDEND</td> <td>226</td> <td>354.82</td> <td>226</td> </tr> <tr> <td>13/04/2021</td> <td>BUY</td> <td>49</td> <td>-504.49</td> <td>49</td> </tr> </table>

HTML table visualization

DateTypeSymbolAmountShares
04/05/2021DIVIDEND83141.183
03/05/2021DIVIDEND16574.25165
30/04/2021BUY13-479.5513
30/04/2021DEPOSIT120
21/04/2021DIVIDEND226354.82226
13/04/2021BUY49-504.4949

Getting Started

  • Open a sheet in Google Sheets
  • From the toolbar, click Tools and then Script Editor
  • Copy the code above in to the script editor
  • From the toolbar of the script editor, run the onOpen() function
  • Come back to the sheet you will see the Personal Toolbox on the toolbar
  • Select a range in the sheet that you want to copy as HTML table
  • From the toolbar, click Personal Toolbox and then Copy as HTML table
  • A dialog shows up containing HTML table code
  • Select the html code in the dialog and do Ctrl + C to copy it
  • Click OK to dismiss the dialog

Conclusion

In this post, I have explained step by step how to pull data from Google Sheets to an HTML table by writing a small Apps Script program. It is very useful for me to extract some sample data in Google Sheets and present it in my blog as an HTML table.

For further improvement, it is possible to make the apps script program send an email including an HTML table.

Comments

People also enjoyed…

Create personal stock portfolio tracker with Google Sheets and Google Data Studio

I have been investing in the stock market for a while. I was looking for a software tool that could help me better manage my portfolio, but, could not find one that satisfied my needs. One day, I discovered that the Google Sheets application has a built-in function called GOOGLEFINANCE which fetches current or historical prices of stocks into spreadsheets. So I thought it is totally possible to build my own personal portfolio tracker with Google Sheets. I can register my transactions in a sheet and use the pivot table, built-in functions such as GOOGLEFINANCE, and Apps Script to automate the computation for daily evolutions of my portfolio as well as the current position for each stock in my portfolio. I then drew some sort of charts within the spreadsheet to have some visual ideas of my portfolio. However, I quickly found it inconvenient to have the charts overlapped the table and to switch back and forth among sheets in the spreadsheet. That's when I came to know the existen

Create a dividend income tracker with Google Sheets by simply using pivot tables

As my investment strategy is to buy stocks that pay regular and stable dividends during a long-term period, I need to monitor my dividends income by stocks, by months, and by years, so that I can answer quickly and exactly the following questions: How much dividend did I receive on a given month and a given year? How much dividend did I receive for a given stock in a given year? Have a given stock's annual dividend per share kept increasing gradually over years? Have a given stock's annual dividend yield been stable over years? In this post, I explain how to create a dividend tracker with Google Sheets. Manage stock transactions with Google Sheets Create dividend tracker with Google Sheets Track annual dividend amount of stocks Track dividend amount by month and by year Track annual dividend per share of stocks Track annual dividend yield of stocks Demo Conclusion References Manage stock transactions with Google Sheets I use a spreadsheet on Goo

How to convert column index into letters with Google Apps Script

Although Google Sheets does not provide a ready-to-use function that takes a column index as an input and returns corresponding letters as output, we can still do the task by leveraging other built-in functions ADDRESS , REGEXEXTRACT , INDEX , SPLIT as shown in the post . However, in form of a formula, that solution is not applicable for scripting with Google Apps Script. In this post, we look at how to write a utility function with Google Apps Script that converts column index into corresponding letters. With the solution in the form of a formula , we don't even need to understand how column index and letters map each other. With apps script, we need to understand the mapping to come up with an algorithm. In a spreadsheet, columns are indexed alphabetically, starting from A. Obviously, the first 26 columns correspond to 26 alphabet characters, A to Z. The next 676 columns ( 26*26 ), from 27th to 702nd, are indexed with 2 letters. [AA, AB, ... AY, AZ], [BA, BB, ... BY, BZ],