Taming HTML files generated by Excel

  • (2 Pages)
  • +
  • 1
  • 2

27 Replies - 1059 Views - Last Post: 17 February 2017 - 02:45 PM

#1 daverich   User is offline

  • New D.I.C Head

Reputation: -7
  • View blog
  • Posts: 42
  • Joined: 28-January 17

Taming HTML files generated by Excel

Posted 15 February 2017 - 03:18 PM

Hi!
I want to add horizontal row highlighting to the html table generated by Excel. I wonder if this is possible in the KNOWN UNIVERSE of human knowledge?:)/> Sometimes I think we have reached the edge with the Excel output). Please take a look and let me know if it is possible to replicate the highlighting shown on the good.html file – BUT PRESERVING THE ORIGINAL LAYOUT OF EXCEL GENERATED HTML.
Dave

here is the more or less good one: http://jsfiddle.net/1q7yqbdc
and here is the originally exported html file from excel: http://jsfiddle.net/h5e6kjwa/1

Is This A Good Question/Topic? 0
  • +

Replies To: Taming HTML files generated by Excel

#2 modi123_1   User is online

  • Suitor #2
  • member icon



Reputation: 15797
  • View blog
  • Posts: 63,297
  • Joined: 12-June 08

Re: Taming HTML files generated by Excel

Posted 15 February 2017 - 03:23 PM

Pretty much why you shouldn't use the over engineered generated CSS from anywhere.

Why not set a TR or the like with a background color in the css?

Gut the styling or build your own with a CSV for the data..

Example:
https://www.w3school...s/css_table.asp
Was This Post Helpful? 0
  • +
  • -

#3 daverich   User is offline

  • New D.I.C Head

Reputation: -7
  • View blog
  • Posts: 42
  • Joined: 28-January 17

Re: Taming HTML files generated by Excel

Posted 15 February 2017 - 03:45 PM

THANK YOU FOR YOUR REPLY...there will be over hundred of complex tables generated into html daily - I NEED TO FIND A WAY TO APPLY THIS HIGHLIGHT BEHAVIOUR AUTOMATICALLY - maybe via mass copy replace...cannot hand code each of them - thanks again!
Was This Post Helpful? 0
  • +
  • -

#4 modi123_1   User is online

  • Suitor #2
  • member icon



Reputation: 15797
  • View blog
  • Posts: 63,297
  • Joined: 12-June 08

Re: Taming HTML files generated by Excel

Posted 15 February 2017 - 03:47 PM

I would figure you can build an app that takes in the CSV then spits it out into a standard HTML file with what ever formatting you want, responsive, rollovers, etc. I mean I couldn't be too hard.. or for the right price.. ;)

Again - Anything generating HTML is going to be messed up.. Word, Excel, Dreamweaver, etc. They have to over architect the output to make the formatting fool proof and correct. I don't want to deal with the busted results and clean it up when I can take the clean data and apply just want I want.
Was This Post Helpful? 0
  • +
  • -

#5 daverich   User is offline

  • New D.I.C Head

Reputation: -7
  • View blog
  • Posts: 42
  • Joined: 28-January 17

Re: Taming HTML files generated by Excel

Posted 15 February 2017 - 03:53 PM

THANK YOU - I am not that familiar with the method you describe - is it possible to SIMPLY PLUG CSV INTO CSS table with little programming?

AND YES - YOU THINK THERE IS NO WAY TO ADD ROW HIGHLIGHTING TO EXCEL HTML?
Was This Post Helpful? 0
  • +
  • -

#6 modi123_1   User is online

  • Suitor #2
  • member icon



Reputation: 15797
  • View blog
  • Posts: 63,297
  • Joined: 12-June 08

Re: Taming HTML files generated by Excel

Posted 15 February 2017 - 03:56 PM

I am unclear if the random capitalization is supposed to mean or imply something, but that's odd.

Sure.. I would imagine there are a ton of javascript UI elements out there you can have pointing at a CSV, dive into something like https://d3js.org/ , or make your own generator.

Yes, you can by clearing out their styling that is happening on the row/cell level first.
Was This Post Helpful? 0
  • +
  • -

#7 andrewsw   User is offline

  • palpable absurdity
  • member icon

Reputation: 6905
  • View blog
  • Posts: 28,565
  • Joined: 12-December 12

Re: Taming HTML files generated by Excel

Posted 15 February 2017 - 04:05 PM

I take it you are referring to the highlighting the row on hover? If you really want to hack this together then you could just append or inject a style element into the HTML files.

It is far preferable, as suggested, and maintainable over the long term, to export as csv's and build a HTML table around the csv. Then you would have complete control over the formatting with CSS - and the files would be 1/10th the size.
Was This Post Helpful? 0
  • +
  • -

#8 ge∅   User is offline

  • D.I.C Lover

Reputation: 319
  • View blog
  • Posts: 1,335
  • Joined: 21-November 13

Re: Taming HTML files generated by Excel

Posted 15 February 2017 - 06:30 PM

I don't recommend CSV because people can put line returns inside Excel cells, merge cells in unexpected ways, use weird characters, etc. which can break everything

You can totally read an Excel file in JS, PHP or else and generate a clean table out of it. It may be possible to preserve the layout, depending on the library (at least, if it doesn't provide a method to output the HTML, it will provide methods to access the style attributes of the cells so you can write an HTML output function - but good luck with that). Importing Excel files instead of HTML files seems safer (you generally don't want to allow HTML in user inputs, it's too hard to sanitise) and more convenient (it spares the effort of exporting as HTML), but you will most likely need to style the tables in your app.

But it isn't necessary, you can override inline CSS with the !important rule http://jsfiddle.net/h5e6kjwa/13/

Note that you can normally set up Excel to export HTML with a style element and no inline styles, but since td elements will be referred to by their id attribute in the generated style element, you won't be able to override the style without the !important rule because specificity has more weight than order and no amount of selector overloading will be more specific than an id attribute.

This post has been edited by ge∅: 15 February 2017 - 06:36 PM

Was This Post Helpful? 0
  • +
  • -

#9 daverich   User is offline

  • New D.I.C Head

Reputation: -7
  • View blog
  • Posts: 42
  • Joined: 28-January 17

Re: Taming HTML files generated by Excel

Posted 15 February 2017 - 11:41 PM

View Postge∅, on 15 February 2017 - 06:30 PM, said:

I don't recommend CSV because people can put line returns inside Excel cells, merge cells in unexpected ways, use weird characters, etc. which can break everything

You can totally read an Excel file in JS, PHP or else and generate a clean table out of it. It may be possible to preserve the layout, depending on the library (at least, if it doesn't provide a method to output the HTML, it will provide methods to access the style attributes of the cells so you can write an HTML output function - but good luck with that). Importing Excel files instead of HTML files seems safer (you generally don't want to allow HTML in user inputs, it's too hard to sanitise) and more convenient (it spares the effort of exporting as HTML), but you will most likely need to style the tables in your app.

But it isn't necessary, you can override inline CSS with the !important rule http://jsfiddle.net/h5e6kjwa/13/

Note that you can normally set up Excel to export HTML with a style element and no inline styles, but since td elements will be referred to by their id attribute in the generated style element, you won't be able to override the style without the !important rule because specificity has more weight than order and no amount of selector overloading will be more specific than an id attribute.



Thank you for you SPECTACULAR reply..This will work in all browsers?..yes I am also very low on time to create CSV reader - need to override excel formatting and publish hundreds of different tables in the nearest time...each day I will need to regenerate these tables....I can just append the code you suggested to them all...I now need to make sure the first column is NOT HIGHLIGHTED....do you think it can be done (as it is the header)
thanking immensely!
Was This Post Helpful? 0
  • +
  • -

#10 daverich   User is offline

  • New D.I.C Head

Reputation: -7
  • View blog
  • Posts: 42
  • Joined: 28-January 17

Re: Taming HTML files generated by Excel

Posted 16 February 2017 - 02:25 AM

I was able to disable the first row highlighting as you can see in this another example:

https://jsfiddle.net/3n2qgzr2/

I have a few other questions - if you can help with any of these that would be AWESOME!

1) Can the highlighted text be uniform in color - like simple YELLOW?

2) Is it possible to add vertical column highlighting - especially RELEVANT FOR THIS MATRIX WHICH I ATTACHED.

3)This code uses this line to prevent first row highlighting:

tr:first-child:hover {
background-color: #333;
}

Can it be made to work on SECOND ROW as well?


Thankin you immensely - think I have found the best html forum on the planet!)
Was This Post Helpful? 0
  • +
  • -

#11 ge∅   User is offline

  • D.I.C Lover

Reputation: 319
  • View blog
  • Posts: 1,335
  • Joined: 21-November 13

Re: Taming HTML files generated by Excel

Posted 16 February 2017 - 11:04 AM

If you want to change the color of the text, it's actually better to target the td with the tr:hover td selector and use the !important rule as well.

Concerning column highlighting, you can't do this with pure CSS because of the way HTML tables are structured. Your best bet is to use Javascript to read the cellIndex property of the highlighted cell and use it to write some CSS in a style element with the :nth-child() pseudo-selector function.

You can select any child with :nth-child(), it's a more precise version of :first-child and :last-child
Was This Post Helpful? 0
  • +
  • -

#12 daverich   User is offline

  • New D.I.C Head

Reputation: -7
  • View blog
  • Posts: 42
  • Joined: 28-January 17

Re: Taming HTML files generated by Excel

Posted 16 February 2017 - 11:50 AM

View Postge∅, on 16 February 2017 - 11:04 AM, said:

If you want to change the color of the text, it's actually better to target the td with the tr:hover td selector and use the !important rule as well.


Thank you very much for your reply... do you thnin you can help me update this code to made highlighted text uniform as well:

<style>
tr:hover{
  background: #03F;
}


tr:hover td{
  background: transparent !important;
}

tr td:hover {
	background-color: #609 !important;
}

tr:first-child:hover {
    background-color: #333;
}

</style>



Was This Post Helpful? 0
  • +
  • -

#13 daverich   User is offline

  • New D.I.C Head

Reputation: -7
  • View blog
  • Posts: 42
  • Joined: 28-January 17

Re: Taming HTML files generated by Excel

Posted 16 February 2017 - 12:00 PM

For some reason this selector does not - maybe I am not using it correctly?

tr::nth-child(1):hover {
    background-color: #333;
}


I have one more question - do you think I can remove URL formatting - remove the blue colour and the underline from the links displayed? I attached the example file:

https://jsfiddle.net/b48L9jtm/

THANKS A LOT!)))LOVE THIS PLACE!)))
Was This Post Helpful? 0
  • +
  • -

#14 astonecipher   User is offline

  • Enterprise Software Architect
  • member icon

Reputation: 3151
  • View blog
  • Posts: 11,956
  • Joined: 03-December 12

Re: Taming HTML files generated by Excel

Posted 16 February 2017 - 12:03 PM

tr::nth-child(1):hover
Was This Post Helpful? 0
  • +
  • -

#15 daverich   User is offline

  • New D.I.C Head

Reputation: -7
  • View blog
  • Posts: 42
  • Joined: 28-January 17

Re: Taming HTML files generated by Excel

Posted 16 February 2017 - 12:58 PM

View Postastonecipher, on 16 February 2017 - 12:03 PM, said:

tr::nth-child(1):hover



Thank yo very much - but that does not seem to work(((
Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2