I have a spreadsheet which looks like this:
The above is saved as HTML from Excel and consists of the following folder and files:
If I click on the html file it opens as works. If I copy the folder/files onto the server and copy the HTML into a page in BD as Raw HTML, I just get the title and the rest is ignored.
So, the basic user approach of "dump it in and see what happens" has failed.
Any advice on the best (simplest, quickest) way to create a webpage in BackdropCMS?
If you Google "Excel to HTML converter" there are options online to generate HTML version of the file, that you could then paste in to a node body. You may have to use the "Raw HTML" editor mode to allow all tags to be displayed. That usually preserves spacing and font colors, but at the expense of lots of extraneous HTML and inline CSS.
Alternatively (things I've tried before):
If you Google "Excel to HTML converter" there are options online to generate HTML version of the file, that you could then paste in to a node body. You may have to use the "Raw HTML" editor mode to allow all tags to be displayed. That usually preserves spacing and font colors, but at the expense of lots of extraneous HTML and inline CSS.
Alternatively (things I've tried before):
Couple of ideas:
Ah. Silly me. I was thinking Microsoft > Save as HTML was the way to go but it leaves loads of c**p in the html.
As suggested I tried several converters but they only converted individual sheets and most didn't cope with most of the formatting.
Found www.aspose.app and it does the whole workbook! I have tweaked the html as the last div was called "footer" and resulted in the workbook 'tabs' appearing superimposed over of the page footer. Just changed the div name to "bottom" and the 'tabs' now appear on the page under the table and above the footer.
https://www.egtsc.co.uk/results/meridian-2014-results-aspose
I'm now on the boundaries of my knowledge. Why doesn't the text line up with the columns? The downloaded converted html file looks fine in a browser.
It's just when it's in BD.
Vary interesting theme. Both the question and the answers are helpful.
Some time ago, with Drupal 7, I tried publishing external files with an iframe external HTML files and opening them in a new window via an image gallery modules which had the additional possibility of displaying iframes over the main content, since large and complex spreadsheets usually require the full display size.
From my experience I would like to share also the following reflections that such experience has led me to.
Publishing a large spreadsheets on a site is extremely problematic when the web page needs to be optimized for devices with a small screen size.
Spreadsheets are designed for a desktop computer, for work with spreadsheet software (like Excel), and this imposes limitations that simply cannot be overcome when publishing them on a website - there the viewing tool is the browser and presenting medium - HTML, and this imposes limitations - presenting the data like as Excel does, it's often simply impossible.
But then we may remember one basic concept of the modern Internet design - the principle of separating content from design. And tables the par excellence are example of mixing content and design, and that's exactly why in the early stages of web technology they were used for web design development.
I have faced this task and achieved some successful solutions when the same content is presented in a new, web- and small-screen-appropriate way. This is done by splitting the original large spreadsheet table into several smaller ones or even breaking it into separate peaces of content - fields or even nodes. Modern techniques like the Paragraphs module make this task easier.
HTML links (hyperlinks) allow us to connect data in a way that is much more efficient than in Excel or with the printed form of a given spreadsheet, which may also require a printed sheet of paper of A3 or A2 size for example. I don't think it's possible to present such a large data structure in exactly the same way on a smartphone.
With such an approach (separating content from design), it may even turn out that the tabular form is not necessary and some parts of the data can be presented with plain texts and lists.
Finally, let me point out the possibility of using the tablefield module
https://backdropcms.org/project/tablefield
It's an extremely powerful tool in a mature stage of development, with many more features than CKEditor's "table" button - including copying and pasting data from Excel. This module does not replace Excel, but at least it helps. And when combined with modules allowing field classes, it even allows CSS control over the design of table elements - rows and cells, thead and tbody elements separately.
I can also remember of a few modules for Drupal 7 that are an effort in the same direction. This doesn't solve your specific problem, but it may inform future work in developing the Backdrop pool of modules:
https://www.drupal.org/project/google_sheets_table
https://www.drupal.org/project/exceltable
https://www.drupal.org/project/sheetnode
"...CKEditor's "table" button ..."
I only have:
How do I get the table button?
I have to paste html in using RAW HTML otherwise FILTERED HTML strips out all the table codes.
Largest sheet is A4 landscape so I'm not too worried about small screens, they'll just have to scroll around a bit.
Looks like I have further investigations to do! It may be a while before I get back to this.
This is your culprit. What you'll need to do is override these tables using a selector at the top to limit to these tables. Now it could be possible by creating a subtheme, but I know you don't want to do that. There is a module called CSS Injector that could allow just adding an override to this page. Something like:
.node-results-os td {
padding: 0;
}
I agree with the points amilenkov made; this is not going to work well on mobile and there may be better ways to enter this and display this, but if you want to continue with the direction you're going, then CSS Injector and that snippet should work. I've tested with a Chrome extension.
If you're around, feel free to drop into Office Hours until 11:30
This is your culprit. What you'll need to do is override these tables using a selector at the top to limit to these tables. Now it could be possible by creating a subtheme, but I know you don't want to do that. There is a module called CSS Injector that could allow just adding an override to this page. Something like:
.node-results-os td { padding: 0; }I agree with the points amilenkov made; this is not going to work well on mobile and there may be better ways to enter this and display this, but if you want to continue with the direction you're going, then CSS Injector and that snippet should work. I've tested with a Chrome extension.
If you're around, feel free to drop into Office Hours until 11:30