Options

Resources to convert older html tables to CSS

ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
edited September 13, 2015 in SmugMug Customization
This might be mostly for those without coding experience. If you have HTML tables in legacy, you may find they break in New. Something about New requiring CSS (more? or of a specific type? Experts might explain this better - but I'm not one of them. :D)

When I was converting my site before unveiling, I worked hard on one table, and just barely got it functioning in New mode, but with terrible formatting. (Dreamweaver also didn't work, or I didn't know how to work it.) I didn't touch the table after unveiling - for what, 2 years now? - because I heard others report that when they opened this kind of problem-with-loaded-bad-code HTML content block, the page would break.

I went looking for a tool to help me better convert the table HTML to heavy-with-CSS code, code that new SM would like. After using 3-4 different tools on the web, I went with this one, which generates both CSS and HTML:

http://www.tablesgenerator.com/html_tables

My final table is the only one on this page, a bit down: http://www.joinrats.com/RatHealth/CompassionateEuthanasia/Qolv/35543247_HjLcvk

This was the only tool I found that allowed me, importantly, to merge cells across one row. There is some WYSIWYG editing, and you can even grab an example table and edit from there, or start fresh. Double-clicking into a cell allows one to paste text in. I did grab other code outside this tool to get the final table borders the way I wanted.

Mentioning this tool was all I really wanted to share, but I will give a couple of other links that were interesting. I initially started from the mindset of "fix my existing code", but I never liked the final results as much as the tool above which made me input the text "new".

http://infohound.net/tidy/tidy.pl [paste in your messy code and get it cleaned up; and has CSS]
http://www.html-cleaner.com/ [paste in your messy code and get it cleaned up]
http://www.tabletodivconverter.com/ [if your HTML is excellent, convert it to divs with CSS]
http://tablestyler.com - creates tables also but with limited scope

Other misc tools:
http://www.css3generator.com/ - very nice examples
http://css3.mikeplate.com/

I realize none of these cures all bad code, but for me the one tool was extremely easy to use.
Of course now that I've put a bunch of hours into this, I'm sure someone will chime in with another much better option. :rofl But that would be good to share so I hope you do.
Sign In or Register to comment.