BullGuard Antivirus Sale - 60% Off with openElement !
Forum Home Forum Home >

openElement

> openElement General Discussion
  New Posts New Posts RSS Feed - How to style table
  FAQ FAQ  Forum Search   Register Register  Login Login

How to style table

 Post Reply Post Reply Page  12>
Author
Message
TC2020 View Drop Down
Groupie
Groupie
Avatar

Joined: Mar 26 2020
Location: Canada
Status: Offline
Points: 61
Post Options Post Options   Thanks (0) Thanks(0)   Quote TC2020 Quote  Post ReplyReply Direct Link To This Post Topic: How to style table
    Posted: Jul 19 2021 at 11:39pm
Hi,

I am using tables and would like to know how to properly style the following of a table:
- Table outline (width and color)
- Cell outline (width and color)
- Row height
- Column width
- Cell background color

At this time, I use cell internal margins to affect row height and column width.

Also, is there a way to select multiple cells?.

Thank you.
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6194
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: Jul 19 2021 at 11:59pm
The table element is not very flexible

If you are looking for some fancy design and different cell color, you should create your table in Excel then save the range as html with auto update. 

Open your OE page and use the External Page / iframe element.  


Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6194
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: Jul 20 2021 at 12:30am
Otherwise the zones that can be selected for styling are accessible trough the main frame button

Back to Top
TC2020 View Drop Down
Groupie
Groupie
Avatar

Joined: Mar 26 2020
Location: Canada
Status: Offline
Points: 61
Post Options Post Options   Thanks (0) Thanks(0)   Quote TC2020 Quote  Post ReplyReply Direct Link To This Post Posted: Jul 20 2021 at 2:57am
For link to site created by OE, how was that table created?. It has cell outlines. This is one of the properties that I am looking for. My table currently does not have any outlines.

I have tried: selecting a cell, drop down to select Cells (as in your image above), and add Border properties (Style panel). That did not work for me (no outline), maybe I have done it wrong?.

My application of table is not to present static information but it is used as placeholders for real-time data that get updated regularly, such as every 5 seconds. The server side code just has to find the cell locations and populate them with data. Is this going to work with OE table as I have not done this yet?

Thank you.
Back to Top
TC2020 View Drop Down
Groupie
Groupie
Avatar

Joined: Mar 26 2020
Location: Canada
Status: Offline
Points: 61
Post Options Post Options   Thanks (0) Thanks(0)   Quote TC2020 Quote  Post ReplyReply Direct Link To This Post Posted: Jul 20 2021 at 3:15am
Relating to using Excel, are there any tutorials available that deal with charting on a Web page with plots/graphs using Excel as data source?.

Your suggestion reminds me of Google Charts where they use their online Spreadsheet as data source, populate data in the spreadsheet, select the data range, and plug them in their data visualization apps (html codes) for various types of charts (pie, line, bar, etc...). It is quite good but you need to be online and login to use Spreadsheet as data source (due to data security reason). This does not really work for my application as it is not always online connected to the Internet.
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6194
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: Jul 20 2021 at 12:28pm
Originally posted by TC2020 TC2020 wrote:

For link to site created by OE, how was that table created?. It has cell outlines. This is one of the properties that I am looking for. My table currently does not have any outlines.

I have tried: selecting a cell, drop down to select Cells (as in your image above), and add Border properties (Style panel). That did not work for me (no outline), maybe I have done it wrong?.

My application of table is not to present static information but it is used as placeholders for real-time data that get updated regularly, such as every 5 seconds. The server side code just has to find the cell locations and populate them with data. Is this going to work with OE table as I have not done this yet?

Thank you.

Table outline


Cell Outline


Result

Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6194
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: Jul 20 2021 at 12:36pm
Originally posted by TC2020 TC2020 wrote:

Relating to using Excel, are there any tutorials available that deal with charting on a Web page with plots/graphs using Excel as data source?.

Your suggestion reminds me of Google Charts where they use their online Spreadsheet as data source, populate data in the spreadsheet, select the data range, and plug them in their data visualization apps (html codes) for various types of charts (pie, line, bar, etc...). It is quite good but you need to be online and login to use Spreadsheet as data source (due to data security reason). This does not really work for my application as it is not always online connected to the Internet.

I don't remember any tutorial
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6194
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: Jul 20 2021 at 1:58pm
Plots and graph with excel produces an image that you can allways use as an image.

Saving  spreadsheet as an html file will poduce a sub directory that contains an xml and images files.  This directory must be available on the server but will not be automatically handled by OE.  FileZilla will help.


Edited by Hobby001 - Jul 20 2021 at 3:37pm
Back to Top
TC2020 View Drop Down
Groupie
Groupie
Avatar

Joined: Mar 26 2020
Location: Canada
Status: Offline
Points: 61
Post Options Post Options   Thanks (0) Thanks(0)   Quote TC2020 Quote  Post ReplyReply Direct Link To This Post Posted: Jul 20 2021 at 4:08pm
Before your comments above, I managed to add outlines and background colors to cells. However, I did it cell by cell; i.e. click on a cell (until it shows cell-x-y in red) then make changes to border and background properties on the right panel Styles/Customize. I still cannot figure out how to select multiple cells (like in Excel).

The border styling (group of elements container in this case) sometimes it does and sometimes it does not show changes made in Styles/Customize. The editor window and preview in browser still show the previous color even after a page Save and/or Refresh. What I find is that after a color change, I just toggle the thickness value (like change the value and then change it back) then color change takes effect quite consistently. Is there a proper way to get this right every time?.

I will try your method above with table and also Excel charts.

Thank you for your help.

Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6194
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: Jul 20 2021 at 5:20pm
To add style to a single cell use add style zone button



It's made for single cell selection.




Edited by Hobby001 - Jul 20 2021 at 5:25pm
Back to Top
 Post Reply Post Reply Page  12>
  Share Topic   

Forum Jump Forum Permissions View Drop Down

Forum Software by Web Wiz Forums® version 12.04
Copyright ©2001-2021 Web Wiz Ltd.

This page was generated in 0.063 seconds.