Re: [Tiki-devel] The default look of tables

Hi again,

To give all tables in the Tiki interface (which currently have the 
Bootstrap class ".table") borders like the ones with class 
.table-bordered (see 
https://getbootstrap.com/docs/5.3/content/tables/#bordered-tables), this 
CSS can be added to L&F admin custom CSS:

.table > :not(caption) >* {
     border-width:var(--bs-border-width)0;
}
.table > :not(caption) >* > * {
     border-width:0 var(--bs-border-width);
}

These are the Bootstrap .table-bordered properties.

-- Gary

On 5/4/2024 12:23 AM, Jonny Bradley via TikiWiki-devel wrote:
> Hi all
>
> I think i agree with Gary that a fairly plain style for default wiki syntax tables is best, but it would be nice to offer more choice without needing people to do custom css - which gave me an idea...
>
> We could add a class parameter to plugin {fancytable} and then add some sort of "class picker" to the (new) Vue.js table builder dialog to pick from the various bootstrap table classes, as seen here:
>
>      https://getbootstrap.com/docs/5.3/content/tables/
>
> (including `table-bordered` ;)
>
> Sounds like fun! Any volunteers? :p
>
> jonny
>
>
>
>
>> On 3 May 2024, at 11:15, Volker Wysk<post-hhF2Jplw28UoZk/[email protected]>  wrote:
>>
>> Hi, Gary!
>>
>> Thank you for your informative reply.
>>
>> I didn't know that there's a science made about table designs.
>>
>> The horizontal-borders-only-style isn't to my taste. I don't feel vertical lines as being visual noise. I find it somewhat unclear without. And I don't like it when the information is spread horizontally over the whole width, when there's room left. I want it to take only as much space as it takes. But, of course you're right, it's a matter of taste.
>>
>> I didn't know that there's that much thought in the table design in Tiki. It looked ad-hoc to me.
>>
>> After you've explained it, I don't stand by my request to change the default table design.
>>
>> Cheers,
>> Volker
>>
>>
>> Am Freitag, dem 03.05.2024 um 12:56 +0900 schrieb Gary Cunningham-Lee:
>>>
>>> Hi Volker,
>>> What "looks good" of course is in the eye of the beholder, as the saying goes. It seems that, over time, the idea of tables not necessarily having borders, or a complete set of borders, has become more popular. For example, this article "40 Best CSS Table Templates For Creating Appealing Tables 2024" (https://uicookies.com/css-table-templates/) shows a number of table designs. Some have the traditional bordered appearance, but more have either only horizontal borders or alternating row background colors, or no border or background color distinctions at all. Other image searches for "web design tables" turn up similar results.
>>> This article -https://medium.com/design-with-figma/the-ultimate-guide-to-designing-data-tables-7db29713a85a - breaks down visual styles of tables this way:
>>> "Grid: Including both horizontal and vertical lines provides the most separation between data points, but the excess visual noise can be distracting. This spreadsheet-style is recommended for dense, data heavy tables.
>>> "Horizontal Lines: Only showing horizontal lines reduces the visual noise of a full grid. This style includes plenty of white space while still helping the user keep their place while reading. This style is the most common and recommended for all data set sizes.
>>> "Zebra Stripes: Alternating different color backgrounds for each row is another good way to help users keep their place while reading. This style is recommended for larger data sets where the alternating pattern will be clear and not cause confusion that a particular row is highlighted."
>>> This seems to be typical of the thinking about the table design that Bootstrap produces, and Tiki uses. By default, the tables don't have grid-like borders for the reason the Medium.com article states. My personal opinion is that tables with complete borders look rather dated and overly "spreadsheet-looking" when used for the presentation of general information but are good in the context of heavy data presentation.
>>> In the end, not everyone will be pleased with the default, whichever way it goes regarding borders, etc., and so some custom CSS might be needed to suit the particular Tiki site.
>>> -- Gary
>>>      
>>> On 5/2/2024 4:34 PM, Volker Wysk wrote:
>>>
>>>> Hi.
>>>>
>>>>
>>>> Tables in wiki pages, using the Tiki default style sheet, don't look good at
>>>> all. There are no borders. Sure, this can be improved with a custom style
>>>> sheet.
>>>>
>>>>
>>>> Configurability is good. But you shouldn't be *forced* to configure. There
>>>> should be a reasonable default.
>>>>
>>>>
>>>> So I ask you, the Tiki team, to add the following to Tiki's default style
>>>> sheet. It will draw borders in tables.
>>>>
>>>>
>>>> table
>>>> {
>>>> margin: 0 0 0 0;
>>>> border-collapse: collapse;
>>>> width: auto;
>>>> }
>>>>
>>>>
>>>> th, td
>>>> {
>>>> padding: 0.25em 0.5em 0.25em 0.5em;
>>>> border: 1px solid tan;
>>>> }
>>>>
>>>>
>>>> td p {
>>>> margin: 0;
>>>> padding: 0;
>>>> }
>>>>
>>>>
>>>> Cheers,
>>>> Volker
>>>>
>>>>
>>>>
>>>>
>>>> _______________________________________________
>>>> TikiWiki-devel mailing list
>>>> [email protected]
>>>> https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel
>>> _______________________________________________
>>> TikiWiki-devel mailing list
>>> [email protected]
>>> https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel
>> _______________________________________________
>> TikiWiki-devel mailing list
>> [email protected]
>> https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel
>
>
> _______________________________________________
> TikiWiki-devel mailing list
> [email protected]
> https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel

_______________________________________________
TikiWiki-devel mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel