Editing Tables
Useful tips when working with tables
- Inside tables, you should use simple line breaks (SHIFT+Enter) instead of paragraphs (Enter).
If you use paragraphs, lines will usually be displayed bigger/higher than desired.
The margins between table cell borders will be bigger when using paragraphs compared to line breaks.
If the Texts have already been written using paragraphs, these paragraphs can be removed
by switching to "source" in the CK-editor and removing all <p> and </p> tags inside the table data tags.
- Placing tables inside tables is not recommended.
The CK-editor has some shortcomings in editing these and the design and layout may appear in an undesired way.
- You should use a clear and simple structure for your Texts.
The CK-editor offers the option to place images next to text via the context menu of images, without the need for a table.
- The CK-editor does not offer an option to edit whole columns in tables.
To define a fixed width to a column, it is sufficient to alter the first element (e.g the column header field).
For this, you can right-click on the cell and choose -> CELL -> CELL-PROPERTIES -> WIDTH
The given value will be applied to all cells of the column.
- To select a part of the table you can use the footer of the CK-Editor.
Using tables with various screen sizes
If the end users use screens of various size, it is recommended to set the table with to 100%.
This ensures that the full table is resized and visible with any screen resolution.
Using images in tables
- If images are used within tables, it is recommended to resize the image prior to uploading it into SABIO, to make it fit the table size.
- Images may also be displayed to fit the table size via the image properties (right click on the image -> IMAGE-PROPERTIES),
however the full image will be transferred and loaded, so this may waste some bandwidth, and make loading images slower than necessary.
versus
Using images in tables with various screen sizes
If SABIO is used on screens with various resolutions, the image size can also be set in percent.
Make sure to use the same setting for the width and height when using the image properties, to keep the ratio of the image in sync, else you end up with a skewed image.
An Example Se
Desired is a table with five columns that displays images on a screen that can display 1500px for the content area.
- create a table and set the table width to 100%
- set the column width to 20% (100/5)
- upload the images and set the image properties to a percentage value, to fit the given width of the columns without moving them.
- your table will be 1500px @100% and each column will be 20% of that, i.e 300px
- given an original image of 1024x768 (~ 4:3) -> set the width and height of the image to 29% to fit the desired table layout (here ~ 297px)
Note:
Be aware that if this table is later viewed on a screen with a smaller resolution, the table will be resized to fit 100% of the visible area,
but the images appear in the same size set in their properties and will not respond to the display size.
The ratio given in the image properties relates only to the original width/height.