Formatting a wiki table #wiki


Lynn McLaughlin
 

I'm new at this - helping to bring some pages from sites.google.com to groups.io, and I'm doing great except the tables look awful. I've read that they strip out a lot of in-line styles, and that is definitely biting me. By changing <table> to <table class="table-bordered">, which I found in the formatted css file someone kindly uploaded here, I was able to at least get grid lines, but that's all. This is how it looks in groups.io:


Here is how it looks in sites.google:


The second has darker grid lines, padded data, which is centered in the header row, and color on some of the rows. I'm not a css expert at all, so I'm hoping someone can more quickly tell me some things I can do to improve my table's look - or tell me to stop wasting my time, because this is definitely as good as it can get. Though I'm new to groups.io and css, I have decades of software development experience which leads me to gnaw and gnaw on a problem like this, without knowing when to give up. If I'm at the end of the capabilities, then so be it.

Thanks, Lynn


Bruce Bowman
 

On Thu, Jun 24, 2021 at 10:09 AM, Lynn McLaughlin wrote:
The second has darker grid lines, padded data, which is centered in the header row, and color on some of the rows. I'm not a css expert at all, so I'm hoping someone can more quickly tell me some things I can do to improve my table's look - or tell me to stop wasting my time, because this is definitely as good as it can get.
Frankly, Lynn, I'd say you're doing better than most of us getting it to look the way you want.

You can try adding some inline styles (see https://www.w3schools.com/css/default.asp), but my experience says that most (if not all) of them will be stripped upon save. Failing that, you can try deprecated constructs such as border="1", bgcolor="yellow" and valign="top"...most browsers still recognize them as valid html and those that don't will ignore them.

Good luck,
Bruce

Check out the groups.io Help Center and groups.io Owners Manual


Jim Wilson
 

I like a challenge so I played with this. I see two ways of doing it: take advantage of existing classes on GIO or, with the help of W3 Schools HTML Tables, use style tags on each element that requires styling.

Using existing classes takes a bit of sleuthing to inspect classes used on GIO so I really can't recommend this. As you have found, a class named table-bordered yields a border but doesn't provide padding within the cells for readability.

Instead, I recommend styling each element. In this case, you should set the border style for table, th (if used) and td but not tr because it isn't necessary. Add padding to each td style, as well. Then, on the rows that span all 10 columns, add the background-color style to pale yellow as you demonstrate above. Sure, it's a little tedious but it can be done.

The code I tried, based on your example above, is:

<table style="border: 1px solid black;">
    <tr>
        <td style="border: 1px solid black; padding: 4px;">&nbsp;</td>
        <td style="border: 1px solid black; padding: 4px;">all events shown</td>
        <td style="border: 1px solid black; padding: 4px;">ordered by date/sort date</td>
        <td style="border: 1px solid black; padding: 4px;">includes marriage</td>
        <td style="border: 1px solid black; padding: 4px;">includes birth of children</td>
        <td style="border: 1px solid black; padding: 4px;">shows date</td>
        <td style="border: 1px solid black; padding: 4px;">shows place</td>
        <td style="border: 1px solid black; padding: 4px;">shows names</td>
        <td style="border: 1px solid black; padding: 4px;">shows ID num</td>
        <td style="border: 1px solid black; padding: 4px;">editable</td>
    </tr>
    <tr>
        <td style="border: 1px solid black; background-color: #ffffcc; padding: 4px;" colspan="10">TMG</td>
    </tr>
    <tr>
        <td style="border: 1px solid black; padding: 4px;">Person View</td>
        <td style="border: 1px solid black; padding: 4px;">yes</td>
        <td style="border: 1px solid black; padding: 4px;">yes</td>
        <td style="border: 1px solid black; padding: 4px;">yes</td>
        <td style="border: 1px solid black; padding: 4px;">yes</td>
        <td style="border: 1px solid black; padding: 4px;">yes</td>
        <td style="border: 1px solid black; padding: 4px;">yes</td>
        <td style="border: 1px solid black; padding: 4px;">yes</td>
        <td style="border: 1px solid black; padding: 4px;">yes</td>
        <td style="border: 1px solid black; padding: 4px;">yes</td>
    </tr>
    <tr>
        <td style="border: 1px solid black; background-color: #ffffcc; padding: 4px;" colspan="10">Family Historian</td>
    </tr>
    <tr>
        <td style="border: 1px solid black; padding: 4px;">Property Box &gt; Facts Tab</td>
        <td style="border: 1px solid black; padding: 4px;">yes</td>
        <td style="border: 1px solid black; padding: 4px;">yes</td>
        <td style="border: 1px solid black; padding: 4px;">yes</td>
        <td style="border: 1px solid black; padding: 4px;">optional</td>
        <td style="border: 1px solid black; padding: 4px;">yes</td>
        <td style="border: 1px solid black; padding: 4px;">B, D only by default but can be configured to show this for any fact type</td>
        <td style="border: 1px solid black; padding: 4px;">yes, can turn on/off surnames</td>
        <td style="border: 1px solid black; padding: 4px;">not by default but can be configured to show this for any fact type</td>
        <td style="border: 1px solid black; padding: 4px;">yes</td>
    </tr>
</table>

The above renders as:
 
 
  all events shown ordered by date/sort date includes marriage includes birth of children shows date shows place shows names shows ID num editable
TMG
Person View yes yes yes yes yes yes yes yes yes
Family Historian
Property Box > Facts Tab yes yes yes optional yes B, D only by default but can be configured to show this for any fact type yes, can turn on/off surnames not by default but can be configured to show this for any fact type yes
 

 

I'm relatively sure that other styling could be applied to size columns or even the entire table.

--
Jim

 


Bruce Bowman
 

On Fri, Jun 25, 2021 at 10:51 AM, Jim Wilson wrote:
I'm relatively sure that other styling could be applied to size columns or even the entire table.
Jim -- Did you actually save your changes?

My experience suggests that such things will look fine while you're editing but disappear when you save.

Regards,
Bruce

Check out the groups.io Help Center and groups.io Owners Manual


Jim Wilson
 

I stand corrected. I assumed the "preview" was being truthful. Apparently not!

--
Jim


Jim Wilson
 

Wow, I even tried using the older HTML attributes but that, too, is stripped out. We need better editing capabilities on this site!

--
Jim


Lynn McLaughlin
 

That has been my frustration too. Looked great in the preview. I think if I knew how to read the css well enough to find more classes I could use like I did for table-bordered, I might have more luck. But I haven't found enough in W3schools to help me. For instance, I see multiple instances for table-bordered (below). My table uses a structure of
table
  thead
    tr
      td
Two of the table-bordered definitions include that pattern. Does it use the first it finds with the pattern or the last or both? Or am I also on the wrong track assuming that the > lines are showing the patterns that need to match to cause the formatting to be used?
.table-bordered {
    border: 1px solid #ddd
}

.table-bordered > tbody > tr > td,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > td,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > thead > tr > th {
    border: 1px solid #ddd
}

.table-bordered > thead > tr > td,
.table-bordered > thead > tr > th {
    border-bottom-width: 2px
}


Jim Wilson
 

Actually, I did some more testing and here's the revelation: it appears neither the CSS nor the old HTML attributes are actually being stripped out; the styling only disappears when viewing the site via web browser!

I used my test site to post a message containing a table styled with CSS and another message with the old HTML attributes. An emails received in the Outlook client as well as an email sent to Gmail (and viewed with Chrome!) displayed both messages correctly. However, viewing the web site with Chrome or Firefox showed the styles completely stripped out.

I don't know if that's a bug or intentional, though. It could be an aspect of the rendering engine used by GIO. Very strange!
--
Jim


Bruce Bowman
 

On Fri, Jun 25, 2021 at 11:54 AM, Jim Wilson wrote:
I don't know if that's a bug or intentional, though. It could be an aspect of the rendering engine used by GIO. Very strange!
Javascript and iframes and such are purposely stripped so they don't become vectors for malware. I don't know the rationale for removing inline styles.

On this end, the deprecated "align" attribute for an <img> tag still seems to work. I haven't exhaustively tested any others.

Regards,
Bruce

Check out the groups.io Help Center and groups.io Owners Manual


Jim Wilson
 

I posted it on Beta to solicit an answer.
--
Jim


Bruce Bowman
 

On Fri, Jun 25, 2021 at 11:53 AM, Lynn McLaughlin wrote:
Does it use the first it finds with the pattern or the last or both?
Where a conflict occurs, the last encountered style definition is used. That said, "border-bottom-width" does not conflict with "border," nor does the definition of a table border conflict with a separate definition for the border of a row/column/cell within that table.

Hope this helps,
Bruce

Check out the groups.io Help Center and groups.io Owners Manual


Lynn McLaughlin
 

And what about when there is no conflict? The first two had both set border and the third set border-bottom-width, so did I end up with both?

thanks again, Lynn


Bruce Bowman
 

On Fri, Jun 25, 2021 at 03:47 PM, Lynn McLaughlin wrote:
The first two had both set border and the third set border-bottom-width, so did I end up with both?
Yes.

Let's please take any further discussion off-list, as this has little to do with group management.

Regards,
Bruce

Check out the groups.io Help Center and groups.io Owners Manual