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

Comments

Popular posts from this blog

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

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, we will look at how to perform stock correlation analysis with Google Sheets. Understanding correlation and its applications in stock investing Stock correlation analysis with Google Sheets Getting started User guide Conclusion Understanding correlation and its applications in stock investing The most familiar correlation measure is the Pearson product-moment correlation coefficient . The strength of the relationship between two variables is expressed numerically between -1 and 1. For example: Two stocks are positively correlated when their prices always go up or go down together. Their coefficient

Demo stock portfolio tracker with Google Sheets

As explained in the post Create personal stock portfolio tracker with Google Sheets and Google Data Studio , a personal stock portfolio tracker consists of 2 main elements: a spreadsheet in Google Sheets and an interactive dashboard in Google Data Studio. You can take a look at the sample spreadsheet below to have an idea of how the data is organized and related. It is possible to make a copy of the spreadsheet to study it thoroughly. NOTE: An enhanced version was published at Create personal stock portfolio tracker with Google Sheets and Google Data Studio . Make a copy Note Disclaimer Make a copy Click here to make a copy Note To better understand the overall concept, please check out this post Create personal stock portfolio tracker with Google Sheets and Google Data Studio . Disclaimer The post is only for informational purposes and not for trading purposes or financial advice.

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. Define the structure of transactions Use Google Sheets to register transactions Demo Note References Define the structure of transactions In the example, I assume that a transaction generally has 5 main attributes: Date : It is the moment when a transaction happened. Type : It can be one of the following values: DEPOSIT : When money is added to the portfolio BUY : When money in the portfolio is used to buy shares of a company SELL : When money is added into