+mandevil Posted April 3, 2019 Share Posted April 3, 2019 (edited) I am working on my new cache listing and I have encountered following problem: I want to include small table using HTML TABLE tag. Unfortunately, any STYLE attribute seems to be removed from table cells (ie. TR and TH elements). This means that I cannot set border, padding, color etc., which makes the tables next to useless. Is this intentional behaviour? Is there anything I can do or is it simply no tables for me? Edited April 3, 2019 by mandevil Quote Link to comment
+hzoi Posted April 3, 2019 Share Posted April 3, 2019 You can use some HTML on cache pages, including tables, but style to the tables seems to get stripped out. Example If that doesn't work for you, you could always design the tables you want and then make it an image on the page. This would not display correctly on a GPSr, though. Quote Link to comment
+Touchstone Posted April 3, 2019 Share Posted April 3, 2019 You'll probably have to host the Table on an offsite location and link to it in the Description. For some of the more elaborate Puzzles in my area that use tables and such, that's the usual workaround. Quote Link to comment
+mandevil Posted April 3, 2019 Author Share Posted April 3, 2019 Not sure how you host part of the page offsite (with frames?), but I have found clean solution which consists of using DIV elements in place of TABLE, TR, TD and TH. Quote Link to comment
+Rikitan Posted April 3, 2019 Share Posted April 3, 2019 Some styling in tables are possible, example from my cache below: <table cellpadding="12" style="width:100%; border-top: dashed #02874D 2px; border-bottom: dashed #02874D 2px; text-align: left;"> <tr style="background-color:#F9F7F5;"> <td style="width:25%;"><b>Fyzický stage</b></td> <td> <img src="https://www.geocaching.com/hide/images/map/pin-green-shadow.png" style="float: left; margin: 6px 12px"> Miesto, kam owner umiestnil indíciu, potrebnú pre nájdenie kešky. Napríklad krabičku so súradnicami ďalšieho zastavenia, tabuľku s nápisom, alebo QR kód. </td> </tr> <tr style="background-color:#F0EDEB;"> <td style="width:25%;"><b>Virtuálny stage</b></td> <td> <img src="https://www.geocaching.com/hide/images/map/pin-blue-shadow.png" style="float: left; margin: 6px 12px"> Tu je tiež indícia, potrebná pre nájdenie kešky - ale taká, ktorá na mieste už bola - owner ju neumiestnil, len ju využíva. Napríklad číslo na ceduli, počet okien a pod. </td> </tr> ... How it looks in the listing: Quote Link to comment
+mandevil Posted April 3, 2019 Author Share Posted April 3, 2019 Hm... but in my listing the STYLE attributes were completely removed... I checked with dev tools inspector. This is what my table cells were looking like on input: <td style="border: 1px solid black; white-space: nowrap;color:red;font-weight:bold; padding: 1em">...</td> Maybe it removes the STYLE attribute when it sees something it doesn't want to allow? At any rate, my solution makes this discussion mostly moot... Quote Link to comment
+arisoft Posted April 3, 2019 Share Posted April 3, 2019 19 minutes ago, mandevil said: Hm... but in my listing the STYLE attributes were completely removed... I checked with dev tools inspector. This is what my table cells were looking like on input: <td style="border: 1px solid black; white-space: nowrap;color:red;font-weight:bold; padding: 1em">...</td> Maybe it removes the STYLE attribute when it sees something it doesn't want to allow? At any rate, my solution makes this discussion mostly moot... I have used some tables and found this same behaviour. For example here https://coord.info/GC3WK8P you can see a table with some styling. At the first clance you may notice that only the <table> tag contains effective style. Within a cell you may use <span> or <div> tags with style. Quote Link to comment
+mandevil Posted April 3, 2019 Author Share Posted April 3, 2019 8 minutes ago, arisoft said: I have used some tables and found this same behaviour. For example here https://coord.info/GC3WK8P you can see a table with some styling. At the first clance you may notice that only the <table> tag contains effective style. Within a cell you may use <span> or <div> tags with style. Yes, but you cannot pad the cell, you cannot use special table cell properies that way and it's unnecessarily verbose. You can completely sidestep this stupid behaviour by using the fact, that TABLE, TR, TD .. etc. are basically DIVs with special "display" property value. Thus you can create true HTML tables without using the HTML tags that gc.com web imposes silly limits upon. Following example is a bona fide 2x2 HTML table (in other words, it's not a workaround, it's just different way of saying the same thing): <div style="display:table; border-collapse:collapse"> <div style="display:table-row"> <div style="display:table-cell; border: 1px solid black; padding: 1em;"> A </div> <div style="display:table-cell; border: 1px solid black; padding: 1em;"> B </div> </div> <div style="display:table-row"> <div style="display:table-cell; border: 1px solid black; padding: 1em;"> C </div> <div style="display:table-cell; border: 1px solid black; padding: 1em;"> D </div> </div> </div> 2 Quote Link to comment
+arisoft Posted April 3, 2019 Share Posted April 3, 2019 (edited) 10 minutes ago, mandevil said: Yes, but you cannot pad the cell, you cannot use special table cell properies that way and it's unnecessarily verbose. You can completely sidestep this stupid behaviour by using the fact, that TABLE, TR, TD .. etc. are basically DIVs with special "display" property value. Thus you can create true HTML tables without using the HTML tags that gc.com web imposes silly limits upon. Following example is a bona fide 2x2 HTML table (in other words, it's not a workaround, it's just different way of saying the same thing): You are right. If I remember correctly, these limitations were introduced when the width of a cache description was fixed to 670 pixels. Edited April 3, 2019 by arisoft Quote Link to comment
+NYPaddleCacher Posted April 3, 2019 Share Posted April 3, 2019 2 hours ago, mandevil said: Not sure how you host part of the page offsite (with frames?), but I have found clean solution which consists of using DIV elements in place of TABLE, TR, TD and TH. You can't use iFrames so that's not an option. As has been suggested, you can may be able to add some style to your tables so that they look nice in a browser...but are very difficult to read when viewing a cache listing on a handheld GPS 1 Quote Link to comment
+niraD Posted April 3, 2019 Share Posted April 3, 2019 3 hours ago, mandevil said: Not sure how you host part of the page offsite (with frames?) As NYPaddleCacher indicated, frames are not an option. But I think you misunderstood what Touchstone suggested. What some puzzle cache owners do is host the puzzle page elsewhere, and then link from the cache description to the puzzle page. That way you can use whatever tables, JavaScript, server-side programming, etc. you need for your puzzle, since the restrictions placed on the cache description don't apply to the puzzle page you're hosting elsewhere. Quote Link to comment
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.