Table properties

[Phala]

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

[Pavel-ww]

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.

[Phala]

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

[Pavel-ww]

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.

[Phala]

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

[Pavel-ww]

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]

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

[Pavel-ww]

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

[Phala]

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

I will, thank you

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

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

[Pavel-ww]

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

[Phala]

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

[Pavel-ww]

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]

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

[Pavel-ww]

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