Import Excel content into Webpage

 
Sometimes you may need to import an Excel spreadsheet as content into a page on your website. Unfortunately, this is now a simple copy and paste function as all of the formatting is stripped by the RadEditor. In order to maintain the look and feel of the Excel content, we'll need to perform a couple if unusual functions if you're not familiar with HTML. 
 
Quick Summary:
  1. Save the Excel spreadsheet as HTML
  2. Edit the HTML markup
  3. Make table responsive if required
  4. Paste content as HTML
Steps to Import Excel content as HTML.
See also:
 
  1. Create the desired spreadsheet in Excel Tip: Review spreadsheet in Print Preview
  2. HIghlight desired content to be saved.
  3. Save Spreadsheet as HTML
    1. Click FIle> Save As> "Name"> Web Page (*.htm, *html)
  4. Click More Options to save Workbook or Selected: Sheet 
  5. Click SAVE
  6. Next, open the Webpage (.htm or . html) file in Notepad, Notepad 2 or Notepad++
  7. Next, edit Table Size to ensure the spreadsheet fits on the website. FYI, the website size is 960px by default. If the Excel page width is greater than 960px, the content will "overflow" into the right margin as shown below. 
  8. Next set the Table size
    • Scroll through HTML file to find the Table Size elements shown in red below. It is typically found after this heading.
      • <!----------------------------->
        <!--START OF OUTPUT FROM EXCEL PUBLISH AS WEB PAGE WIZARD -->
        <!----------------------------->
        <div id="Playoff Round One_17135" align=center x:publishsource="Excel">
        <table border=0 cellpadding=0 cellspacing=0 width=1652 style='border-collapse:
         collapse;table-layout:fixed;width:1239pt'>
      • Make the table "fluid" so that it fits within the width of the  webpage. We'll need to edit the following content shown in red to change the table from a "fixed width" measured in pixels or points to a "fluid" table based on a percentage of the website page width.

      • Original: <table border=0 cellpadding=0 cellspacing=0 width=1652 style='border-collapse: collapse; table-layout:fixed; width:1239pt'>
      • Edited: <table border=0 cellpadding=0 cellspacing=0 width=1652 style='border-collapse:
         collapse; table-layout:auto; width:100%'>
      •  
      • A responsive table will display a horizontal scroll bar if the screen is too small to display the full content. To create a responsive table, add a container element with overflow-x:auto around the <table>:

      • Example

        <div style="overflow-x:auto;">
          <table>
            ...
          </table>
        </div>
      • Save the edited html webpage file as .txt
  9. Next, copy all of the text file from the <head> element to the very last line of content a the bottom of the page.
<head>
<meta http-equiv=Content-Type content="text/html; charset=windows-1252">
<meta name=ProgId content=Excel.Sheet>
<meta name=Generator content="Microsoft Excel 15">
<link rel=File-List href="Playoff%20Round%20One_files/filelist.xml">
<style id="Playoff Round One_17135_Styles">
...
...
...
</table>
</div>

<!----------------------------->
<!--END OF OUTPUT FROM EXCEL PUBLISH AS WEB PAGE WIZARD-->
<!----------------------------->
</body>
</html>
 
  1. Insert the copied HTML content into the RadEditor 
    1. Click HTML next to Design to open the HTML text editor.
    2. Delete the line Add Content ...
    3. Paste the HTML text copied from the Notepad.
    4. Click Design or Preview to see new table.
    5. If content appears as desired, click SAVE 
 

Add Feedback