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

  1. One question: is it possible to copy the background color of the cell as well? (as in your case which date,type ect are with the yellow background). Thanks in advance

    ReplyDelete
    Replies
    1. Hi, I think it is possible to copy a range in google sheets as an HTML table while keeping the background color of cells. To do so, I think you need to use the getBackground method of the Apps Script API.
      For more information, check out the documentation. I'll update my blog post to include this feature. It might be helpful for future readers.
      Thanks
      https://developers.google.com/apps-script/reference/spreadsheet/range#getbackground

      Delete

Post a Comment

Popular posts

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.
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.
Create personal stock portfolio tracker with Google Sheets and Google Data Studio

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...
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?
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.
GOOGLEFINANCE Best Practices

GOOGLEFINANCE Best Practices

Anyone using Google Sheets to manage stock portfolio investment must know how to use the GOOGLEFINANCE function to fetch historical prices of stocks. As I have used it extensively to manage my stock portfolio investment in Google Sheets , I have learned several best practices for using the GOOGLEFINANCE function that I would like to share in this post.
Stock Correlation Analysis With Google Sheets

Stock Correlation Analysis With Google Sheets

Correlation is a statistical relationship that measures how related the movement of one variable is compared to another variable. For example, stock prices fluctuate over time and are correlated accordingly or inversely to one another. Understanding stock correlation and being able to perform analysis are very helpful in managing a stock portfolio investment. In this post, I explain in details how to perform correlation analysis among stocks in Google Sheets.
Manage Stock Transactions With Google Sheets

Manage Stock Transactions With Google Sheets

The first task of building a stock portfolio tracker is to design a solution to register transactions. A transaction is an event when change happens to a stock portfolio, for instance, selling shares of a company, depositing money, or receiving dividends. Transactions are essential inputs to a stock portfolio tracker and it is important to keep track of transactions to make good decisions in investment. In this post, I will explain step by step how to keep track of stock transactions with Google Sheets.
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.