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.

Copy sheets as HTML table

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

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.

Disclaimer

The post is only for informational purposes and not for trading purposes or financial advice.

Feedback

If you have any feedback, question, or request please:

Support this blog

If you value my work, please support me with as little as a cup of coffee! I appreciate it. Thank you!

Share with your friends

If you read it this far, I hope you have enjoyed the content of this post. If you like it, share it with your friends!

Comments

Popular posts

How to convert column index into letters with Google Sheets

How to convert column index into letters with Google Sheets

In Google Sheets, rows are indexed numerically, starting from 1, but columns are indexed alphabetically, starting from A. Hence, it is pretty straightforward to work with rows and trickier to work with columns as we need to convert between column index and corresponding letters. For example, what are the letters of column 999th in Google Sheets? In this post, we will look at how to convert a column index into its corresponding letters by using the built-in functions of Google Sheets. What are letters of the column 999th in a spreadsheet? Unfortunately, Google Sheets does not provide a ready-to-use function that takes a column index as an input and returns corresponding letters as output. However, there is a little trick of combining other available built-in functions to do the task. In Google Sheets, there is the ADDRESS function that returns the cell reference, according to the specified row index (first parameter) and column index (second parameter) in the input. For example,
Create a dividend income tracker with Google Sheets by simply using pivot tables

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 for a stock investment portfolio with Google Sheets by simply using pivot tables.
Use SPARKLINE to create 52-week range price indicator chart for stocks in Google Sheets

Use SPARKLINE to create 52-week range price indicator chart for stocks in Google Sheets

The 52-week range price indicator chart shows the relative position of the current price compared to the 52-week low and the 52-week high price. It visualizes whether the current price is closer to the 52-week low or the 52-week high price. In this post, I explain how to create a 52-week range price indicator chart for stocks by using the SPARKLINE function and the GOOGLEFINANCE function in Google Sheets.
How to convert column index into letters with Google Apps Script

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.
Compute daily evolution of a stock investment portfolio by using only built-in functions of Google Sheets

Compute daily evolution of a stock investment portfolio by using only built-in functions of Google Sheets

To effectively track a stock investment portfolio, it is necessary to know its evolution in the past. As I use Google Sheets to track my stock investment portfolio, I have researched and successfully implemented several solutions. In this post, I am happy to share in detail how to compute the daily evolution of a stock investment portfolio by simply using only the available built-in functions in Google Sheets.
Slice array in Google Sheets

Slice array in Google Sheets

Many functions in Google Sheets return an array as the result. However, I find that there is a lack of built-in support functions in Google Sheets when working with an array. For example, the GOOGLEFINANCE function can return the historical prices of a stock as a table of two columns and the first-row being headers Date and Close. How can I ignore the headers or remove the headers from the results?
Create dividend income tracker with Google Data Studio

Create dividend income tracker with Google Data Studio

With transactions registered, it is easy to create a dividend income tracker with Google Sheets. However, a dividend income tracker in Google Sheets is not interactive. Instead of having different pivot tables and switching forth and back among them, I can create an interactive dividend income tracker with a single-page report on Google Data Studio. In this post, I explain how to create a dividend income tracker with Google Data Studio.
Compute cost basis of stocks with FIFO method in Google Sheets

Compute cost basis of stocks with FIFO method in Google Sheets

After selling a portion of my holdings in a stock, the cost basis for the remain shares of that stock in my portfolio is not simply the sum of all transactions. When selling, I need to decide which shares I want to sell. One of the most common accounting methods is FIFO (first in, first out), meaning that the shares I bought earliest will be the shares I sell first. As you might already know, I use Google Sheets extensively to manage my stock portfolio investment, but, at the moment of writing this post, I find that Google Sheets does not provide a built-in formula for FIFO. Luckily, with lots of effort, I succeeded in building my own FIFO solution in Google Sheets, and I want to share it on this blog. In this post, I explain how to implement FIFO method in Google Sheets to compute cost basis in stocks investing.