openElement

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.

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.  

This table was created with OE  https:// www.chpsupply.com/laveuses-pression-pressure-washer/eau-froide-cold-water/fixe-fixed/commerciale-commercial.en-us.htm" rel="nofollow -   https://www.chpsupply.com/laveuses-pression-pressure-washer/eau-froide-cold-water/fixe-fixed/commerciale-commercial.en-us.htm" rel="nofollow - https://www.chpsupply.com/laveuses-pression-pressure-washer/eau-froide-cold-water/fixe-fixed/commerciale-commercial.en-us.htm

This table was created with Excel  https://www.chpsupply.com/aspirateurs-vacuum-cleaner/commercial.en-us.htm" rel="nofollow - https://www.chpsupply.com/aspirateurs-vacuum-cleaner/commercial.en-us.htm

https://zupimages.net/viewer.php?id=21/29/uyzv.png" rel="nofollow">

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.

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.

https://zupimages.net/viewer.php?id=21/29/4c3q.png" rel="nofollow">

https://zupimages.net/viewer.php?id=21/29/k8bm.png" rel="nofollow">

https://zupimages.net/viewer.php?id=21/29/wb4j.png" rel="nofollow">

I don't remember any tutorial

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.

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.

It's made for single cell selection.

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.

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%; }

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.

 

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

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