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 Reverse Sort Order
  Topic Search Topic Search  Topic Options Topic Options
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6209 		Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Topic: How to style table
    Posted: Jul 29 2021 at 3:02am
To specify multiple tables, add a custom class like MyNewTableSize to each of them

.MyNewTableSize .OESZ_Column_0{
width:33.33%;
}
.MyNewTableSize .OESZ_Column_1{
width:33.33%;
}
.MyNewTableSize .OESZ_Column_2{
width:33.33%;
}


Edited by Hobby001 - Jul 29 2021 at 3:03am
https://denislafrance.net, OE training video
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6209 		Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: Jul 29 2021 at 3:00am
To specify one table, use the element ID

#WE4ffeb48596 .OESZ_Column_0{
width:33.33%;
}
#WE4ffeb48596 .OESZ_Column_1{
width:33.33%;
}
#WE4ffeb48596 .OESZ_Column_2{
width:33.33%;
}


Edited by Hobby001 - Jul 29 2021 at 3:01am
https://denislafrance.net, OE training video
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6209 		Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: Jul 29 2021 at 2:56am
Since the table expands as per the content, you have to control the content diplay
https://denislafrance.net, OE training video
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 28 2021 at 9:44pm
On my actual page, I have multiple tables so it looks like I would need to modify your CSS code and somehow tie it to individual tables since they all use OESZ_Column_x property.

After experimenting with various settings, I think the column width is dictated by the cell's content (as you mentioned above) and is regardless of what column width percentage as well as max width in px you set. It keeps expanding even beyond the table's Main Frame. In my application, this is what I try to avoid since my tables show status of certain things and I would like to keep them in proper sizes and proportions.

As far as centering a table in a container, I set its Main Frame to the desired width percentage (say, 80%) and center it. I then set the Table to 100% width to fill up the frame and the table follows its frame (centered and the required size). Anything less than 100%, the table will be left justified. Having said that, the table size can increase due to its cell's content as above.

At this time, I just have to find a way to work around this to make my tables look right.


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

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6209 		Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: Jul 28 2021 at 2:37am
Using % as width sets the width to a % of the parent element width

The table design sets it's size by row width puching the table width.  The table width reacts to column width and column width is related to it's content.

An OE table is something designed to be as easy as possible to fill by anyone.  It is more complicated than a streight HTML table.

Ease on one side comes with difficulties on th other side.  

Alo this element was designed in an older version of OE before responsveness.

In OE, you can use CSS code like

.OESZ_Column_0{
	width:33.33%;
}
.OESZ_Column_1{
	width:33.33%;
}
.OESZ_Column_2{
	width:33.33%;
}


Edited by Hobby001 - Jul 28 2021 at 2:39am
https://denislafrance.net, OE training video
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 26 2021 at 5:50pm
How do I center a table and size its columns?.

The following are the steps I used:
- Add a Table element to the page
- Main Frame: center it by right click/Alignment/Center and set Width=100%, Height=Auto
- Table: set to 3 columns x 6 rows and set to Width=90%, Height=Auto
- Row 0: enter column labels Label 0, Label 1, Label 2 
- Select individual cell and set its width one by one Cell 0-0, 0-1, 0-2 to 40%, 30%, 20% respectively (leaving 10% space)

Cells of row 0 seem to have proper widths as set. At this point, however, the table is always left justified regardless of what I set via Table - Right click/Alignment/Center or Right. Questions:

1). How do I center the table?.
2). How do I set cells within a column to the same width, do it individually as above or there is a proper way?.
3). Similar to 2) above but how to set height for each row?

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

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6209 		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
https://denislafrance.net, OE training video
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: 6209 		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
https://denislafrance.net, OE training video
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6209 		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
https://denislafrance.net, OE training video
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.