Jump to content
Sign in to follow this  
Followers 1
mandevil

HTML tables in listings

Recommended Posts

Posted (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 by mandevil

Share this post


Link to post

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.

Share this post


Link to post

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.

Share this post


Link to post

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.

Share this post


Link to post

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:

 

392129742_htmltable.png.aed289520fe2707f4e9b4eda5f1c7365.png

 

Share this post


Link to post

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

Share this post


Link to post
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.

Share this post


Link to post
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>

 

  • Helpful 2

Share this post


Link to post
Posted (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 by arisoft

Share this post


Link to post
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

  • Upvote 1

Share this post


Link to post
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.

Share this post


Link to post

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  
Followers 1

×
×
  • Create New...