Table properties

This forum is for general questions about extensions for Joomla! 4.x.

Moderators: pe7er, General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Windows Defender SmartScreen Issues <-- please read this if using Windows 10.
Post Reply
Phala
Joomla! Intern
Joomla! Intern
Posts: 64
Joined: Wed Nov 22, 2023 8:22 pm

Table properties

Post by Phala » Wed Apr 10, 2024 2:14 pm

Hello community,

After several post, and lot of help from this great forum, I need, one of the latest (I hope…)

I’m struggling to reply the table properties, in table made with SP page builders, I’m replying all the option of table, row, and cell but the result showed are different…see:

http://opale.sviluppo.host/index.php?op ... page&id=13

And
http://opale.sviluppo.host/index.php?op ... age&id=16

Do you have any suggestions Why??

Thanks

Paolo

User avatar
Pavel-ww
Joomla! Ace
Joomla! Ace
Posts: 1676
Joined: Tue Jun 30, 2020 12:17 pm

Re: Table properties

Post by Pavel-ww » Wed Apr 10, 2024 4:15 pm

Phala wrote:
Wed Apr 10, 2024 2:14 pm
I’m struggling to reply the table properties, in table made with SP page builders, I’m replying all the option of table, row, and cell but the result showed are different…see:

http://opale.sviluppo.host/index.php?op ... page&id=13

And
http://opale.sviluppo.host/index.php?op ... age&id=16
Hi.

1) Сompletely avoid, using SP text editor to create and edit tables. This editor is new and still very raw. It uncontrolled adds p tags and other garbage.

Use the system editor instead
1.jpg
--

2) Even when using a system editor, do not stylize the tables by the editor. This creates not responsive and not universal code.

And I believe that all tables on your site should look the same.
If you use a text editor to stylize tables, you will have to do it every time from scratch.

Best practice:
Create a table in a system editor, fill it with content, then switch to the code mode, copy the table code and insert to your desktop HTML editor, for example Notepad ++.

Take Bootstrap tables classes from here https://getbootstrap.com/docs/5.2/content/tables/ and arrange them in your table. Then copy result and insert back to the system editor.

If appearance does not satisfy you, additionally stylize your table through CSS once and you will get all other tables with the same appearance.


I know this sounds complicated, but in fact it is a fairly simple and fast way if you try.
You do not have the required permissions to view the files attached to this post.

Phala
Joomla! Intern
Joomla! Intern
Posts: 64
Joined: Wed Nov 22, 2023 8:22 pm

Re: Table properties

Post by Phala » Wed Apr 10, 2024 7:17 pm

Thank you.

it can be more than complicated for a dummy like me...followed your suggestion until i need to apply the tables class...here I'm in difficult...like the table stripe class... but I don't know where to copy the code...but also I don't understand how this solution could work on several tables...I mean every new table needs t be adjusted the same, or am i wrong? I don't get this point...

here a code sample i did:

Code: Select all

<table width="737">
<tbody>
<tr>
<td width="75">DATA</td>
<td width="26">N°</td>
<td width="166">ITALIANO</td>
<td width="166">INGLESE</td>
<td width="180">LOCALITÀ</td>
<td width="124">OSSERVATORE</td>
</tr>
<tr>
<td>01/01/2024</td>
<td>1 </td>
<td>Strolaga maggiore</td>
<td> Common Loon</td>
<td>Ispra (VA)</td>
<td>C.Ferrario</td>
</tr>
<tr>
<td>07/01/2024</td>
<td>2</td>
<td>Orco marino </td>
<td>Velvet Scoter</td>
<td>Dongo (CO)</td>
<td>A.Nava</td>
</tr>
</tbody>
</table>
But if I'm adding the "<table class="table table-striped">" on top, nothing happen, probably the code is not the best one...

Thanks again

Paolo

User avatar
Pavel-ww
Joomla! Ace
Joomla! Ace
Posts: 1676
Joined: Tue Jun 30, 2020 12:17 pm

Re: Table properties

Post by Pavel-ww » Thu Apr 11, 2024 7:20 am

Phala wrote:
Wed Apr 10, 2024 7:17 pm
Thank you.

it can be more than complicated for a dummy like me...followed your suggestion until i need to apply the tables class...here I'm in difficult...like the table stripe class... but I don't know where to copy the code...but also I don't understand how this solution could work on several tables...I mean every new table needs t be adjusted the same, or am i wrong? I don't get this point...

here a code sample i did:

Code: Select all

<table width="737">
<tbody>
<tr>
<td width="75">DATA</td>
<td width="26">N°</td>
<td width="166">ITALIANO</td>
<td width="166">INGLESE</td>
<td width="180">LOCALITÀ</td>
<td width="124">OSSERVATORE</td>
</tr>
<tr>
<td>01/01/2024</td>
<td>1 </td>
<td>Strolaga maggiore</td>
<td> Common Loon</td>
<td>Ispra (VA)</td>
<td>C.Ferrario</td>
</tr>
<tr>
<td>07/01/2024</td>
<td>2</td>
<td>Orco marino </td>
<td>Velvet Scoter</td>
<td>Dongo (CO)</td>
<td>A.Nava</td>
</tr>
</tbody>
</table>
But if I'm adding the "<table class="table table-striped">" on top, nothing happen, probably the code is not the best one...

Thanks again

Paolo

Hi Paolo.

Delete all that
1.jpg
--

You should get clean code
2.jpg
--

Then add BS classes
3.jpg
--

Result
4.jpg
--

To multiplication or removal of rows, place the cursor in any cell and use the means of the system editor
5.jpg
The screenshot depicts TinyMCE. But I would recommend that you install JCE, this is a much more convenient editor. Especially as for the tables.
You do not have the required permissions to view the files attached to this post.

Phala
Joomla! Intern
Joomla! Intern
Posts: 64
Joined: Wed Nov 22, 2023 8:22 pm

Re: Table properties

Post by Phala » Thu Apr 11, 2024 7:40 pm

Thank you again, replaced TinyMCE with JCE and it's working.

But now, what i need to understand how can i apply this new "workflow" to the several tables i need to insert in this new site, coming from the old.

You wrote to use the class, but how they can be applied, importing, for instance old table from excel...

Thanks again a lot, you are really helping me

Paolo

User avatar
Pavel-ww
Joomla! Ace
Joomla! Ace
Posts: 1676
Joined: Tue Jun 30, 2020 12:17 pm

Re: Table properties

Post by Pavel-ww » Fri Apr 12, 2024 7:32 am

Phala wrote:
Thu Apr 11, 2024 7:40 pm
You wrote to use the class, but how they can be applied, importing, for instance old table from excel...
Hi. You must clean Excel table code, or table code from your old site before using it on the current site.

Try theese services or the like to get a clean table code, without inline styles and garbage.

Code: Select all

https://www.r2h.nl/html-word-excel-table-code-cleaner/index.php
or
https://tableconvert.com/excel-to-html
Having received such a code, just insert BS classes. After that you can use it on your new site.
Copy/paste skills is all you need. :)

Phala
Joomla! Intern
Joomla! Intern
Posts: 64
Joined: Wed Nov 22, 2023 8:22 pm

Re: Table properties

Post by Phala » Sat Apr 13, 2024 4:00 pm

Still fighting... :'(

Imported the excel from a clean sheet, and result looks on the rigth way...

http://opale.sviluppo.host/index.php?op ... page&id=13

But now I would like to adjust the first row, as a kind of header, changing the background color, add border, font bold...but would be perfect if can be made everything working on the table class too? I've tried to add code to the like adding code for <header> and then for the <body>? Tried also modifying CSS but no result...

Thanks

Paolo

User avatar
Pavel-ww
Joomla! Ace
Joomla! Ace
Posts: 1676
Joined: Tue Jun 30, 2020 12:17 pm

Re: Table properties

Post by Pavel-ww » Sun Apr 14, 2024 7:50 am

Hi Paolo.

Carefully study all the examples of BS tables. There is everything you need.
2.jpg
--

For additional stylization, you can add your own classes where you need and use them in your code.
4.jpg
--

Here is example of custom stylization
5.jpg
You do not have the required permissions to view the files attached to this post.

Phala
Joomla! Intern
Joomla! Intern
Posts: 64
Joined: Wed Nov 22, 2023 8:22 pm

Re: Table properties

Post by Phala » Tue Apr 16, 2024 7:13 pm

Pavel-ww wrote:
Sun Apr 14, 2024 7:50 am
Carefully study all the examples of BS tables. There is everything you need.
I will, thank you

Pavel-ww wrote:
Sun Apr 14, 2024 7:50 am
For additional stylization, you can add your own classes where you need and use them in your code.
4.jpg
Added manually the "second class" and modifying the CSS is working

Pavel-ww wrote:
Sun Apr 14, 2024 7:50 am
Here is example of custom stylization
5.jpg
While i cannot find / see the stylization you are mentioning here, going with develop tool in FF...:
second class.PNG
But i need to tell you an amazing thank you!!!!

Paolo
You do not have the required permissions to view the files attached to this post.

User avatar
Pavel-ww
Joomla! Ace
Joomla! Ace
Posts: 1676
Joined: Tue Jun 30, 2020 12:17 pm

Re: Table properties

Post by Pavel-ww » Wed Apr 17, 2024 8:11 am

Phala wrote:
Tue Apr 16, 2024 7:13 pm
While i cannot find / see the stylization you are mentioning here, going with develop tool in FF...:
Hi Paolo.

You cannot see it because I wrote this code directly in my FF Dev Tools. In reality, it does not exist. You can do the same - write the code directly in Dev Tools for visyaly control changes, and then copy the result and paste into the your CSS file.

Example:

Highlight the element in the html code and press the plus button
1.jpg
--

You will get your class in the CSS part of Dev Tools.
2.jpg
--

Place the cursor in the area of the properties and start typing. Dev Tools will give you tips that you can choose.
3.jpg
--

In order to turn to the child element, create a composite selector
4.jpg
--
Then right click > Copy Rule > paste to your css file
You do not have the required permissions to view the files attached to this post.

Phala
Joomla! Intern
Joomla! Intern
Posts: 64
Joined: Wed Nov 22, 2023 8:22 pm

Re: Table properties

Post by Phala » Wed Apr 17, 2024 7:29 pm

Thank you again. I will check it again.

I think I’ve found one of, several, problem I have: to see the change I’m doing it in the code and in the CSS I need to clear the cache…

There is a mode to fix it?

Thanks

Paolo

User avatar
Pavel-ww
Joomla! Ace
Joomla! Ace
Posts: 1676
Joined: Tue Jun 30, 2020 12:17 pm

Re: Table properties

Post by Pavel-ww » Thu Apr 18, 2024 8:03 am

Phala wrote:
Wed Apr 17, 2024 7:29 pm
There is a mode to fix it?
Hi. This is not a bug, but the expected behavior.

When you edit CSS, any caching in Joomla should be turned off.

Caching in the browser remains. But to quickly clean the cache in the browser and see the changes, press Ctrl + F5.

Or install an extension in the browser.

I use this one in my FF. Very convenient, as it leaves the position of scrolling in the same place.

Code: Select all

https://addons.mozilla.org/firefox/addon/clearcache/
Use it instead of page reload/ F5 / Ctrl + F5

Phala
Joomla! Intern
Joomla! Intern
Posts: 64
Joined: Wed Nov 22, 2023 8:22 pm

Re: Table properties

Post by Phala » Mon Apr 29, 2024 8:21 pm

Pavel-ww wrote:
Sun Apr 14, 2024 7:50 am

Carefully study all the examples of BS tables. There is everything you need.
Hello Pavel-ww, and all, still in trouble with table class, but I don't want to ask here every day, so I did lot of testing by myself, witout success...how to use more than one class?

I mean the idea is to have a kind of code to be copy pasted on top of every new table I will add on the site.

But, it looks one class is overwriting the second one, I've tried different ways: add one on top of the second one:

Code: Select all

<table class="table table-striped your-own-first-class">
<table class="table table-bordered">
adding double "closure" below

Code: Select all

</table> </table>
Even also trying to use more class in one string:

Code: Select all

<table class="table table-striped your-own-first-class"; "table table-bordered">
Thanks for a suggestion

Paolo

User avatar
Pavel-ww
Joomla! Ace
Joomla! Ace
Posts: 1676
Joined: Tue Jun 30, 2020 12:17 pm

Re: Table properties

Post by Pavel-ww » Tue Apr 30, 2024 7:21 am

Phala wrote:
Mon Apr 29, 2024 8:21 pm
...how to use more than one class?
Hi. All classes should be in one place, separated by space.

1.jpg
---

It is not right.
3.jpg
2.jpg
Should be so:

Code: Select all

<table class="table table-striped table-bordered your-own-first-class">
   ...
</table>
You do not have the required permissions to view the files attached to this post.

Phala
Joomla! Intern
Joomla! Intern
Posts: 64
Joined: Wed Nov 22, 2023 8:22 pm

Re: Table properties

Post by Phala » Thu May 02, 2024 7:05 pm

Thank you again Pavel-ww, is working

Have a nice evening

Paolo


Post Reply

Return to “Extensions for Joomla! 4.x”