How did they do this without tables

They say that “Tables” are something they have on their “To do” list, so show how they made the columns on their website (Xway) without tables

Hi Juan,

The column layout was created using Extended Properties to add CSS flexbox properties.

This is something that Xway will probably support more directly in future.

You can read about Flexbox here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

For Extended Properties see the Markup chapter in the Xway User Guide.

Jeremy

It’s a little harder to see how this sort of thing is done as it involves looking at the CSS in the page head as well as the actual elements in the page body. But it’s basically relatively positioned items, each with a width of 25%, placed within a container div object.

Insert a box, then click inside it and insert an image. Set the image width to 25%. Click to the right of the image within the box (make sure you don’t have the image still selected!) and repeat with a second image. Then a third, and a fourth. Set the width of the box to 100%, and it will scale to the width of the browser window – and the images will scale as well, looking like they’re held in place by a simple four-column, one-row table.

There ARE times when an actual table is best, but not when it comes to just visual presentation.

EDIT: Ahh, I see Jeremy went a little more sophisticated than I realised with this. You could still easily approximate what was done there just with the steps I suggested, although if Jeremy felt that specific example needed something extra it probably did. :slight_smile:

thnaks Jeremy H.

What about the newish kid on the block…. CCS Grid for Tables? And for page layout?

It’s a breath of fresh air away what can be done with Grid… Print To CSS | Website and blog of Front-end developer and web designer, Dan Davies

(see the examples on w3schools for a beginners view of grid)…

David Owen

On 6 Jan 2020, at 12:33, Jeremy Hughes email@hidden wrote:

Hi Juan,

The column layout was created using Extended Properties to add CSS flexbox properties.

This is something that Xway will probably support more directly in future.

You can read about Flexbox here: A Complete Guide to Flexbox | CSS-Tricks - CSS-Tricks

For Extended Properties see the Markup chapter in the Xway User Guide.

Jeremy