Re: Formatting a wiki table #wiki


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

 

Join GroupManagersForum@groups.io to automatically receive all group messages.