How to Display Google Sheets Data in a Table and Show Details on an HTML Page

Sandip Nigam | July 25, 2023 | Google Apps Script | 1 Comment

Display Google Sheets Data in a Table, Learn how to showcase Google Sheets data effectively by displaying it in a well-organized table format on an HTML page. Discover how to present detailed information seamlessly, making your data visually appealing and easily accessible to users, Google Sheets Data in a Table.

क्या आप अपने वेबसाइट पर अपने गूगल शीट्स (Google Sheets) डेटा को एक सुव्यवस्थित और User Friendly तरीके से Display करने की तलाश में हैं? चिंता न करें! इस ट्यूटोरियल में, हम आपको बताएंगे कि कैसे आप अपने गूगल शीट्स डेटा को HTML पेज पर एक शानदार Table के रूप मे रूपांतरित कर सकते हैं।

हम आपको दिखाएंगे कि कैसे आप Dynamic और Interactive Table बना सकते हैं जो आपके Viewer को आकर्षित करेंगी और उन्हें खींचेगी। कुछ सरल Steps के साथ, आप अपने Google Sheet के Data को अपनी वेबसाइट में Integrate कर सकते हैं और अपने User को विवरणों का सुविधाजनक ढंग से खोजने दे सकते हैं।

इस Tutorial के अंत तक, आपके पास Google Sheet Data की एक Table Display होगी, जो user को Search और विशेष विवरणों को सहजता से देखने की अनुमति देगी। अपनी वेबसाइट पर एक सौंदर्यपूर्ण और कार्यात्मक डेटा प्रस्तुति से अपने दर्शकों को प्रभावित करें, जो आपकी वेबसाइट को एक नए स्तर पर उठा देगी।

Step 1 : Create a Google Sheet

सबसे पहले आप निम्न Format मे एक Google Sheet बना लीजीए , इसमे आपको दो Sheet बनाना हैं , एक का नाम Inv रखना हैं और दूसरे का नाम Item रखना हैं,

Inv वाली Sheet मे Invoice से Related Data हैं, आप अपने कार्य के अनुसार यहाँ पर Data ले सकते हैं ।

निम्न Sheet जिसका नाम Item हैं इसमे हमने Item का Data लिया हैं । यहाँ पर भी आप अपने व्यवसाय के अनुसार लिस्ट का उपयोग कर सकते हैं ।

उपरोक्त दोनों ही Sheet का नाम का आपको विशेष ध्यान रखना हैं पहली Sheet ओर दूसरी Sheet दोनों मे ही आपको I Capital मे ही लेना हैं । यदि आपने Capital मे नहीं लिया तो Link होने मे इशू आएंगे ।

Step 2 : Apps Script Code

अब आपको Extension मे जा कर Apps Script Open करना हैं ।

Apps Script मे आपको यह निम्न Code Paste करना हैं ।

code.gs
let MySheets  = SpreadsheetApp.getActiveSpreadsheet();  //01
let InvSheet  = MySheets.getSheetByName("Inv");                   
let ItemSheet = MySheets.getSheetByName("Item");

function doPost(e)          //02 
{
  let Inv = e.parameters; 
  let Qtys = Inv.qty;     
  let IsNew = Inv.IsNew;

  if (IsNew == 'Y') {
    InvSheet.appendRow([Inv.inv_no[0], Inv.inv_dt[0], Inv.cust_nm[0], Inv.addr[0], Inv.city[0]]);    //06

    let i = 0;
    Qtys.forEach(function (value, index)                       //07
    {
      if (i > 0) {
        InvSheet.appendRow(["", "", "", "", "", Inv.item_nm[index], value, Inv.rate[index], Inv.amt[index]]);  //08
      }
      i++;


    });
  }
  else {

    InvSheet.getRange(Inv.StartRow, 1, 1, 5).setValues([[Inv.inv_no[0], Inv.inv_dt[0], Inv.cust_nm[0], Inv.addr[0], Inv.city[0]]]);

    let NextRow = Inv.StartRow;
    let DeleteRow = +Inv.StartRow + 1;
    InvSheet.deleteRows(DeleteRow, Inv.RowCount);

    let i = 0;
    Qtys.forEach(function (value, index)                       //07
    {
      if (i > 0) {
        NextRow++;
        InvSheet.insertRows(NextRow, 1);
        InvSheet.getRange(NextRow, 1, 1, 9).setValues([["", "", "", "", "", Inv.item_nm[index], value, Inv.rate[index], Inv.amt[index]]]);

      }
      i++;
    });
  }
  return ContentService.createTextOutput("Data Submitted"); //09
}

function doGet(e) {  //03

  let page = e.parameter.page;

  if (page == null || page == undefined) {
    page = "index";
    return HtmlService.createTemplateFromFile(page).evaluate();
  }
  else if (page == 'dropdown') {
    let table = ItemSheet.getRange("A:A").getValues().filter(r => r.every(Boolean));
    let str = JSON.stringify(table);
    return ContentService.createTextOutput(str);
  }
  else if (page == 'max') {
    let table = InvSheet.getRange("A:A").getValues().filter(Number);
    let myMax = Math.max(...table) + 1;
    return ContentService.createTextOutput(myMax);
  }
  else if (page == 'search') {
    let no = e.parameter.no;
    let ReturnData = InvSheet.getRange("A:A").createTextFinder(no).matchEntireCell(true).findAll();

    let StartRow = 0;
    let EndRow = 0;

    ReturnData.forEach(function (range) {
      StartRow = range.getRow();
    });

    if (StartRow > 0) {

      for (var i = StartRow + 1; i <= StartRow + 10; i = i + 1) {

        let val = InvSheet.getRange(i, 6).getValue();

        if (val == "") {
          EndRow = i - 1;
          break;
        }

      }

      let table = InvSheet.getRange("A" + StartRow + ":I" + EndRow).getValues();

      //let str = JSON.stringify(table);
      let cnt = EndRow - StartRow;
      let str = JSON.stringify({ record: table, SR: StartRow, CNT: cnt });

      return ContentService.createTextOutput(str);
    }
    else {
      let str = JSON.stringify("NOT FOUND");
      return ContentService.createTextOutput(str);
    }
  }

  else if (page == 'all') {
       let table = InvSheet.getRange("A:E").getValues().filter(r=>r.every(Boolean));
       let str = JSON.stringify(table);
       return ContentService.createTextOutput(str); 
  }

 
}

01 : इसमे हमने जो Sheet पर दो pages या sheet बनाई थी उन दोनों ही Sheet को Connect किया हैं ।
02 : यहाँ पर हमने Invoice ke Data को Save करने से Related Code लिखा हैं ।
03 : यहाँ पर हमें Parameter pass कर अलग – अलग तरह के टास्क किए हैं ।
- Dropdown : इससे हमने Item की Dropdown मे Data दिखाया हैं ।
- Max : इससे हमने जो Invoice open करते ही New Number आता हैं उसे Generate करवाया हैं ।
- Search : इससे हम दिए गए Invoice No पर Record को Open करवाते हैं ।
- All : इससे हमने एक साथ सभी Invoice की List जो Show All Data Click करने से आती हैं उसे दिखाया हैं ।

इसके बाद आपको इस Apps Script को डिप्लॉइ करना हैं । डिप्लॉइ कैसे किया जाता हैं इसके बारे मे मेरे द्वारा Article बनाया गया हैं आप निम्न Article की Help से Deploy कर सकते हैं ।

Article : DEPLOYING APPS SCRIPT AS A WEB API: A STEP-BY-STEP GUIDE

Successfully Deploy होने के बाद आपको एक Link मिलता हैं उस लिंक को आपको copy करना हैं और जो हम JavaScript लिखेंगे तब उस Link को आपको Paste करना होगी , जो निम्न प्रकार से होगी ।

https://script.google.com/macros/s/AKfy……XOQ/exec

Step 3 : Create HTML Page for Display Google Sheets Data

इसके बाद आप अपने local Computer या जिस भी Server पर Google Sheet का Data दिखाना चाहते हैं वहाँ पर एक HTML का Page बना लीजिए जिसका नाम आपको index.html रखना हैं या आप अपने हिसाब से भी रख सकते हैं ।

इस HTML Code के form tag पर action मे हमे Apps Script से Deploy कर जो लिंक आई थी वही Paste करना हैं , ऐसा करने से जब हम form को save करेंगे तो Data Google Sheet पर Store हो जाएगा ।

इसके बारे मे अधिक जानकारी के लिए आप हमारा निम्न Article Read कर सकते है ।

Submit a HTML Form to Google Sheet using Apps Script

index.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Imagination Invoice Example</title>
    <!-- For Bootstrap-->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    
    <!-- CSS For Print Format -->
    <link rel="stylesheet" media="print" href="invoiceprint.css">
    
    <!-- CSS For Invoice -->
    <link rel="stylesheet"  href="invoice.css">

    <!-- jQuery CDN -->
    <!--<script src="https://code.jquery.com/jquery-3.6.2.slim.js" integrity="sha256-OflJKW8Z8amEUuCaflBZJ4GOg4+JnNh9JdVfoV+6biw=" crossorigin="anonymous"></script>-->
    <script src="https://code.jquery.com/jquery-3.6.3.js" ></script>
    <!-- For Invoice  -->
    <script src="invoice.js"></script>
    
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">

</head>
  <body>
    

    <div class="container ">

      <form method="POST" class="needs-validation" novalidate   action="https://script.google.com/macros/s/.../exec"   >

        <div class="card mt-3">
            <div class="card-header text-center">
             <h4>Imagination (INVOICE) Apps Script</h4>
            </div>
            <div class="card-body">
               <div class="row">
                    <div class="col-8">
                        <div class="input-group mb-3">
                            <span class="input-group-text" >Customer</span>
                            <input type="text" class="form-control"   
                                   placeholder="Customer" name="cust_nm" 
                                   required minlength="4"  >

                            <div class="invalid-feedback">
                                Please Enter Customer Name </div>                          
                        </div>
            
                        <div class="input-group mb-3">
                            <span class="input-group-text" >Address</span>
                            <input type="text" 
                                   class="form-control" placeholder="Address" 
                                   name="addr"  >
                        </div>
            
                        <div class="input-group mb-3">
                            <span class="input-group-text" >City</span>
                            <input type="text" class="form-control" 
                                   placeholder="City"  name="city">
                        </div>
                    </div>
                    <div class="col-4">
                      
                        <div class="input-group mb-3">
                            <span class="input-group-text" >Inv. No</span>
                            <input type="text" class="form-control" 
                                   placeholder="Inv. No"  id="inv_no" 
                                   name="inv_no" autocomplete="off" 
                                   required >
                            <div class="input-group-append">
                                  <button class="btn btn-outline-secondary"  
                                          type="button" onclick="Search();">
                                      <i class="bi bi-search"></i></button>
                            </div>
                            <div class="valid-feedback">Invoice No. is 
                            OK</div>
                        </div>

                        <div class="input-group mb-3">
                            <span class="input-group-text" >Inv. Date</span>
                            <input type="date" class="form-control" 
                                   placeholder="Inv. Date" name="inv_dt">
                        </div>
                    </div>
               </div>

               <input type="hidden"  id="IsNew"    name="IsNew"    value="Y">
               <input type="hidden"  id="StartRow" name="StartRow" value="0"> 
               <input type="hidden"  id="RowCount" name="RowCount" value="0"> 

                <table class="table table-bordered">
                    <thead class="table-success">
                      <tr>
                        <th scope="col">#</th>
                        <th scope="col">Particular</th>
                        <th scope="col" class="text-end">Qty</th>
                        <th scope="col" class="text-end">Rate</th>
                        <th scope="col" class="text-end">Amount</th>
                        <th scope="col" class="NoPrint">                         
                            <button type="button" 
                                    class="btn btn-sm btn-success" 
                                    onclick="BtnAdd()">+</button>
                        </th>

                      </tr>
                    </thead>
                    <tbody id="TBody">
                      <tr id="TRow" class="d-none">
                        <th scope="row">1</th>
                        <td>
                          <input class="form-control " name="item_nm" 
                                 list="mylist" autocomplete="off" 
                                 required value="a"  >
                          <datalist id="mylist" ></datalist>
                        </td>
                        <td><input type="number" 
                                   class="form-control text-end" name="qty"  
                                   onchange="Calc(this);" ></td>
                        <td><input type="number" 
                                   class="form-control text-end" name="rate" 
                                   onchange="Calc(this);"></td>
                        <td><input type="number" 
                                   class="form-control text-end" name="amt" 
                                   value="0" readonly=""></td>
                        <td class="NoPrint">
                          <button type="button" class="btn btn-sm btn-danger" 
                                  onclick="BtnDel(this)">X</button></td>
                      </tr>
                    </tbody>
                  </table>

                  <div class="row">
                    <div class="col-8">
                        <button type="submit" 
                                class="btn btn-primary" >Submit</button>
                        <button type="button" class="btn btn-primary"  
                                onclick="GetPrint()">Print</button>
						<button type="button" class="btn btn-primary"  
                                onclick="ShowAllData()">Show All Data</button>
                    </div>
                    <div class="col-4">
                        <div class="input-group mb-3">
                            <span class="input-group-text" >Total</span>
                            <input type="number" 
                                   class="form-control text-end" id="FTotal" 
                                   name="FTotal" disabled="">
                        </div>
                        <div class="input-group mb-3">
                            <span class="input-group-text" >GST</span>
                            <input type="number" 
                                   class="form-control text-end" id="FGST" 
                                   name="FGST" onchange="GetTotal()">
                        </div>
                        <div class="input-group mb-3">
                            <span class="input-group-text" >Net Amt</span>
                            <input type="number" 
                                   class="form-control text-end" id="FNet" 
                                   name="FNet" disabled="">
                        </div>
                    </div>
                </div>
            </div>
          </div>
        </form>
    </div>
	
	<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">Show Invoice</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
       <table class="table table-striped">
		<tbody id="MyTBody"></tbody>
	   </table>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        
      </div>
    </div>
  </div>
</div>
	
	
	<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js" integrity="sha384-fbbOQedDUMZZ5KreZpsbe1LCZPVmfTnH7ois6mU1QK+m14rQ1l2bGBq41eYeM/fS" crossorigin="anonymous"></script>

  </body>
</html>

Step 4 : Create CSS File

अब हमे एक CSS फाइल बनाना होगी जीसे हमने HTML (index.html) पर लिंक किया हैं । जिसका नाम हमने invoice.css रखा हैं ।

invoice.css
.input-group-text {
   width: 85px;
}

Step 5: Create CSS Media Print File for Print View

हमने यहा पर इसी HTML का एक Print View भी बनाया हैं जिसके लिए हमने invoiceprint.css का उपयोग किया हैं जीसे भी हमने HTML (index.html) से लिंक किया हैं । इसकी मदद से हम जैसा भी हमारा Print View बनाना चाहते है आसानी से बना सकते हैं ।

invoiceprint.css

.btn , .NoPrint 
{
    display: none;
}

.form-control
{
    border: 0px;
}

.input-group-text
{
    border: 0px;
    background-color: white;
}

table 
{
    border : 1px solid black;
}

Step 6 : Create JavaScript File

इसके बाद हमने एक JavaScript file बनाना होगी जिससे की सभी Event को handle करना होगा ।

इसमे आपको जो Link Apps Script Code को Deploy करने के बाद प्राप्त हूई थी उसे पेस्ट करना हैं । ध्यान रहे केवल जो https://script.google.com/macros/s/ इसके बाद जो कोड होता हैं /exec के बीच का केवल उतना ही यहाँ पर आपको Paste करना हैं ।

invoice.js
var AppsScriptLink = "AKf......OQ";


function GetPrint()
{
    /*For Print*/
    window.print();
}

function BtnAdd()
{
    /*Add Button*/
    var v = $("#TRow").clone().appendTo("#TBody") ;
    $(v).find("input").val('');
    $(v).removeClass("d-none");
    $(v).find("th").first().html($('tr').length - 2);
}

function BtnDel(v)
{
    /*Delete Button*/
    $(v).parent().parent().remove();
    GetTotal();
    ReGenSrNo();
}

function ReGenSrNo()
{
     $("#TBody").find("tr").each(
     function(index)
     {
          $(this).find("th").first().html(index);
     }
     );
}

function Calc(v)
{
    /*Detail Calculation Each Row*/
    var index = $(v).parent().parent().index();

    var qty = document.getElementsByName("qty")[index].value;
    var rate = document.getElementsByName("rate")[index].value;

    var amt = qty * rate;
    document.getElementsByName("amt")[index].value = amt;

    GetTotal();
}

function GetTotal()
{
    /*Footer Calculation*/  

    var sum=0;
    var amts =  document.getElementsByName("amt");

    for (let index = 0; index < amts.length; index++)
    {
        var amt = amts[index].value;
        sum = +(sum) +  +(amt) ;
    }

    document.getElementById("FTotal").value = sum;

    var gst =  document.getElementById("FGST").value;
    var net = +(sum) + +(gst);
    document.getElementById("FNet").value = net;


}

$(document).ready(function () {
    FormValidation();
    SetCurrentDate();
    BtnAdd();
    FillDataList();
    MaxInv();
      
       
});


function FillDataList()
{
        $.getJSON("https://script.google.com/macros/s/"+AppsScriptLink+"/exec?page=dropdown",
       
        function (data) {

          var Options="";

          $.each(data, function(key, value)
          {
            Options = Options + '<option>' + value + '</option>';
          });

          $("#mylist").append(Options);
         
        });
}

function MaxInv()
{
        $.getJSON("https://script.google.com/macros/s/"+AppsScriptLink+"/exec?page=max",
        function (data) {
         
          $("input[name='inv_no']").val(data);

        });
}


function SetCurrentDate()
{
    const date = new Date();
    console.log(date);

    let d = date.getDate();
    let m = date.getMonth() + 1;
    let y = date.getFullYear();

    if (d < 10) d = '0' + d;
    if (m < 10) m = '0' + m;

    let CurrDate = y + '-' + m + '-' + d;

    $('input[name="inv_dt"]').val(CurrDate);

}


function FormValidation()
{
    // Example starter JavaScript for disabling form submissions if there are invalid fields
(function () {
    'use strict'
 
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.querySelectorAll('.needs-validation')
 
    // Loop over them and prevent submission
    Array.prototype.slice.call(forms)
      .forEach(function (form) {
        form.addEventListener('submit', function (event) {
          if (!form.checkValidity()) {
            event.preventDefault()
            event.stopPropagation()
          }
 
          form.classList.add('was-validated')
        }, false)
      })
  })()
}

function Search(pNo="")
{
        var no = $('#inv_no').val();

		if (pNo != "") no = pNo;

        $.getJSON("https://script.google.com/macros/s/"+AppsScriptLink+"/exec?page=search&no="+no,
        function (data) {

         
          //alert(data);
         // console.log(data);
          if (data == "NOT FOUND")
          {
            alert('Invoice No. Not Found...');

          }
          else
          {
            //var record = data;
            var record   = data.record;

            var StartRow = data.SR;
            var RowCount = data.CNT;

            $('#IsNew').val('N');
            $('#StartRow').val(StartRow);
            $('#RowCount').val(RowCount);
         
            var i = 0;
            $.each(record, function(key, value)
            {
           
              if (i == 0)
              {
                var dt = value[1].substring(0,10);
               
                document.getElementsByName("inv_dt")[0].value = dt;
                document.getElementsByName("cust_nm")[0].value = value[2];
                document.getElementsByName("addr")[0].value = value[3];
                document.getElementsByName("city")[0].value = value[4];
              }
              else
              {
                if (i > 1) BtnAdd();
               
             
                document.getElementsByName("item_nm")[i].value = value[5];
                document.getElementsByName("qty")[i].value     = value[6];
                document.getElementsByName("rate")[i].value    = value[7];
                document.getElementsByName("amt")[i].value     = value[8];

              }

              i = i + 1;
            });

            GetTotal();
			ReGenSrNo();

          }
        });
		$('#exampleModal').modal('hide');
		 
}

function ShowAllData()
{
	$(document).ready(function (){
		
		$.getJSON("https://script.google.com/macros/s/"+AppsScriptLink+"/exec?page=all",
        function (data) {
	
		var Table="", Rows="", Columns="";
		$.each(data, function(key, value)
		{
			var InvNo="";
			Columns ="";
			i=0;
			$.each(value, function(key1, value1)
			{
				i++;
				if (i ==2) 
				{
					value1 = "" + value1;
					value1 = value1.substring(0, 10);	
				}
				Columns = Columns + '<td>' + value1 + '</td>';
				if (InvNo == "") InvNo = value1;
				
				
			});
			Rows = Rows + '<tr onclick="Search('+InvNo+')">' + Columns + '</tr>';
		});
		
		$("#MyTBody").html(Rows);
		$('#exampleModal').modal('show');
	});	
	});			

}

GetPrint() : इस Function से हम HTML Invoice का Print View देख सकत हैं और साथ ही मे Print निकाल सकते हैं ।
BtnAdd() : इस Function से हम Detail वाली Table मे Rows Add कर सकते हैं ।
BtnDel() : इस Function से हम Table से Rows को Delete कर सकत हैं ।
ReGenSrNo() : इस ReGenSrNo Function से हम Delete करने से Sr No को फिर से सही करते हैं ।
Calc() : इस Calc से हम Amount से Related Calculation करते हैं ।
GetTotal() : इस GetTotal Function से हम Header के Total को Footer मे Shift करते हैं ।
FillDataList() : इस FillDataList Function से हम Item की select लिस्ट मे Data को Fill करते हैं ।
MaxInv() : इस MaxInv Function से हम Open करने पर जो नई Invoice का No Generate होता हैं वह दिखाई देता है।
SetCurrentDate() : इस Function से हम Invoice पर आज की दिनांक सेट करते हैं ।
FormValidation() : इस FormValidation Function से हम Form के Validation से Related working करते हैं।
Search() : इस Search Function से हम Invoice no दे कर Google Sheet के data को HTML पर दिखाते हैं।
ShowAllData() : इस ShowAllData Function से हम Google Sheet के data को Modal मे display करवाते हैं जिससे की User उस पर Click कर data को HTML Page पर दिखा सके ।

Step 7: Preview HTML & Test Code

इसके बाद हम HTML (index.html) File को Browser पर run कर देखेंगे ।

Page Open होने के बाद आपको Show All Data Button पर click करना हैं ऐसा करने से कुछ ही समय मे आपको निम्न प्रकार से Show Invoice Dialog Box दिखाई देगा । इसमे आपको Display Google Sheets Data in a Table होने लगेगा।

उपरोक्त Dialog Box मे दिखाई देने वाली Entries मे से आप जिस पर भी Click करेंगे वह Open हो कर कुछ निम्न तरह से दिखाई देने लगेगा ।

आशा हैं मुझे की आपको किस तरह से HTML पर Google Sheet के डाटा को Display किया जाता हैं समझ मे आ गया होगा। आपको यह Display Google Sheets Data in a Table Article कैसा लगा बताना न भूले ।

हमारे अन्य आर्टिकल

आपका समय देने का धन्यवाद! हमें खुशी हुई कि आपने हमारे ब्लॉग को पढ़ा और विचार साझा किया। यदि आपको हमारे ब्लॉग से कुछ नया सिखने को मिला हो या यह आपके लिए उपयोगी रहा हो, तो कृपया इसे अपने दोस्तों और परिवार के साथ साझा करें। हमें और भी रोचक विषयों पर लिखने का इच्छुक है, इसलिए आप हमारे साथ जुड़े रहें और हमारे ब्लॉग को नियमित रूप से चेक करते रहें।

यदि आपके पास कोई सुझाव या प्रतिक्रिया है, तो कृपया हमें बताएं, हम आपके विचारों का स्वागत करेंगे। धन्यवाद फिर से और बिताए गए समय के लिए आपका धन्यवाद। साथ में आने वाले ब्लॉगों में भी मिलते रहें। आपका साथ हमारे लिए महत्वपूर्ण है।

One Comment

dadang March 20, 2024 Reply

wow nice..thanks to learning…

Developer Tips

How to Display Google Sheets Data in a Table and Show Details on an HTML Page

Table of Contents

Step 1 : Create a Google Sheet

Step 2 : Apps Script Code

Step 3 : Create HTML Page for Display Google Sheets Data

Step 4 : Create CSS File

Step 5: Create CSS Media Print File for Print View

Step 6 : Create JavaScript File

Step 7: Preview HTML & Test Code

हमारे अन्य आर्टिकल

Add a Comment

Table of Contents

Step 1 : Create a Google Sheet

Step 2 : Apps Script Code

Step 3 : Create HTML Page for Display Google Sheets Data

Step 4 : Create CSS File

Step 5: Create CSS Media Print File for Print View

Step 6 : Create JavaScript File

Step 7: Preview HTML & Test Code

हमारे अन्य आर्टिकल

Related Posts

Add a Comment