HTML tables in listings

[+mandevil]

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

[+hzoi]

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.

[+Touchstone]

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.

[+mandevil]

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.

[+Rikitan]

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:

 

 

[+mandevil]

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...

[+arisoft]

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.

[+mandevil]

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>

 

[+arisoft]

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

[+NYPaddleCacher]

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

[+niraD]

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.