SVG graphics can be selected and inserted like other images.

During a test with a flower pattern and a globe with flags from Pixabay, I noticed that the SVG graphics in WebSite X5 are smaller and difficult to enlarge.

Maybe make the graphics available here so that the helpers can test them here.

As suggested, I created a SVG file saved from Illustrator which is attached as a ZIP file toghether with a PNG file. The PNG file corresponds to the same graphics created in Illustrator and then opened in Photoshop to be saved as PNG.

I have not yet figured out how to open SVG file in WX5.

Thank you

PS: your comments about file size makes sense as I has been today I realised that SVG files saved from Illustrator are very light if compered with Illustrator (.ai) and Photoshop (.psp) files.

Website x5 support natively SVG format since version 2022.3.4

Use IMGAGE Object

Thank you Claudio. Now I realize the problem stems from the fact that I need to update the software as my version of WX5 is prior to 2202. So it's time to update it because I am inclined to believe images will be crispier and sharper once they are uploaded in the Web compared to what I am getting with JPG and PNG. The point is so far I am getting slightly dirty and blurry images which doesn't help to produce professional looking websites.

By the way, I am wondering if the better solution to achieve my goal could be using the CONTENT SLIDER objetct instead of the IMAGE object. I say this because my intention is to build a sort of gallery in which each view contains an image on the left hand side and text on the right hand side exactly as the dummy_file I attached on my post above (bearing in mind that each view would have a different image and text). In this way the text would be somehow separate from images even if they are shown up at the time time. I have never used the content silder object but it might be worth trying.

Despite the size "1200", I could not enlarge the SVG graphic sufficiently, so the text is difficult to read.

It works better with the PNG graphics, which I tested in 3 different widths on my notebook.

1) PNG graphic - not quite as sharp due to the small width

2) PNG graphic - on 2/3 of the page width, sharp

3) PNG graphics - full page width, also sharp

>> http://finde-links.de/test123-shop-pro/about-us.html (scroll down)

Thank you. Your test highlights a good point which hints at reducing the size of the image on the left hand side and increasing the size of text on the right hand side. For the icon on the extreme right hand side I could create a big one in Illustrator and then save it as image directly from illustrator until I get one that could look fine at WX5.

The process is a little tedious in order to get the right size, but I think it is the only way to operate at WX5 as far as image is concerned. I have attached here two screenshots. Screenshot A refers to the design I made and Screenshot B is a draft of what I should get as final product (with letters on the right hand side much sharpers of course as this ia only a mockup). Anyway, I will play around with the CONTENT SLIDER object to see what happens.

The writing needs to be sharpened a bit.

I can render the text with IrfanView and Sharpen=20 without seeing pixels around the text. As I sharpen more, pixels appear around the text.

Maybe Illustrator and Photoshop offer better ways to sharpen the font without creating pixels around the text.

IrfanView (sharpen=20) from left to right: sharpened twice / once sharpened / not sharpened

-----

Thank you. Of course, the screenshot I just posted correspond to blown up images. So, they should be of better quality. Finally, the width size of the page has been set at WX5 at 1000. I am wondering if it would be better to increase its width at 1200.

Another issue that might be taken into account - which I failed to mentioned before - is tha fact that I locked the size of the images at the GALLERY object (cf. attached screenshot). Now I am wondering if this may not be a good idea. So, I could leave the values unlocked. In this way I suppose the software could figure out the best size without any restriction.

The graphics do not have to be larger than 1000 pixels, it is more important that they can also be read well on tablets and mobile phones.

For all settings, no matter where they are made, think of the different sized displays of the visitors.

I have taken note of what you say. However, I was not referring to the size of pixels of images as I agree their size should not be larger than 1000 pixels. Instead, I was thinking of the desktop size (as highlighted on attached image). I like to set the desktop size at 1000 but I read somewhere that 950 is a good size for overall browsers.

With regards to image inserted in a GALLERY object, it doesn't matter if an image has over 1000 pixels because it shrinks and fit the width we have set. I have already done a test about this. So, a image of 1000 and lother of 1500 pixels would be displayed identically in a gallery of images. Things are different if we place the image in a TEST or TABLE AS.

Your remark about different displays at visitor's end is very appropriate, but if we build simple websites we can refrain from trying to build responsive sites. This is why I think nowadays webistes should be concise and go to the point. People are no longer keen to spend hours reading a lot of garbage and browing randomly the internet as we used to do at the turn of the century. As you see, I do not mind creating desktop sites as long as their content are kept concise and pages are nicely designed so that it could be well displayed from a mobile. Anyway, I acknowledge that responsive sites are more recommended especially if we take into account the fact that we can customise the way each section of our website is viewed from different browsers and devices (e.g. mobile, tablet or desktop).

Sorry. Here is the attachment.

I don't have a mobile phone myself, just a notebook.

I'm using the WebSite X5 templates and leaving them set to "Responsive Site". Google also prefers these “mobile-friendly” pages.

The "950" should have its reason in the old screen resolutions, see

-----

Double VGA

960x640

960×720

Source: Wikipedia

-----

I don't want to tell anyone how to create their websites.

I'm going offline now for about 12 hours.

If you have further questions, the other users of WebSite X5 can certainly help.

Thank you Daniel. As a matter of fact we have discussed many issues, but what brought me here was specifically to share my concern about the fact that it appears there is no bullet-proof instruction of how to produce clean images on web pages especially when we insert them in the GALLERY object. Things are different when we use TEXT or TABLE galleries as both text and images look quite well in them.

Simply put, my understanding is that at the end of the day we need to work around each image to try to get the best result on a per case basis especially for the GALLERY object.  I think there is nothing else to say about the issue of images in the GALLEY object, unless there is someone in the community kind enough to cast some light on this topic.

With the Gallery object, you let the images themselves affect the visitors and display a description of the image if required.

The text can then also be read on narrow screens. On mouseover, the text disappears and the entire image is displayed.

When text is placed directly into images, the text must be made large enough to be readable on narrow screens, and the text area often needs additional sharpening.

-----

The font size for the image description can also be set larger under "Style".

-----

Thank you very much Daniel for your images and explanations. I think you have provided enough information to work around. By the way, I spent hours trying to figure out how I could combine image and text (in image format) in the same row. As suspected, I found the solution by combining two objects in the same row: (1) GALLERY on the left hand side; and CONTENT SLIDER on the right hand side as you can see on the attaged screenshot. The timing for both objects needs to be the same. In this way any text appearing on the right will be compatible with the image on the left. This time the letters on the right hand side do not look so blurry and dirty as before. The letters could be even crispier if we increase the size of the image, but if we do so then the hight of the webpage will also increase.

In a nutshell, I think the CONTENT SLIDER object is a better option if we need to manually increase or decrease the size of any text included as image. 

PS: I realised we can also include text in the CONTENT SLIDER object without any image, but I did not like that option because it does not allow us to write more than one column of text. The ideal solution would be if one day Website X5 upgrade the software to be able to insert «tables» inside a CONTENT SLIDER oject. In this way we could write text without needing to use text in image format. In short, as far as I understand we cannot insert tables in gallery or content slider objects to enable them to rotate horizontally or vertically. Thank you again!

I once tested the content slider object, but without a background image.

WebSite X5 is set to "Responsive Site".

The content slider object was set to have the image and text side by side, and that was the case on wide screens, but on narrow screens the images are placed on top of the text. This makes the image larger than if the image and text were placed next to each other, see screenshot

Tables:

If you are familiar with HTML tables, you can also paste the HTML code of an HTML table in Description. It must be ensured that there are no line breaks in the written HTML code.

On narrower screens, the text is spread over several lines and the table becomes confusing. You could prevent the line break, but then the line would be too long and would simply be cut off.

In this case it should be easier if the table shown here is inserted as an image.

----- screenshot -----

If the WebSite X5 uses the "Desktop Website" setting, then you can use the HTML code for the table, because then a scroll bar will appear at the bottom of the browser on a narrow screen.

HTML code for table:

<table style="text-align: left; width: 100%;" border="1" cellpadding="2" cellspacing="2"><tbody><tr><td colspan="2" rowspan="1" style="vertical-align: top;"><span style="color: rgb(51, 51, 255);"><span style="color: red;">☰</span> WRITING BUSINESS TASKS PERFORMED:</span><br><br></td></tr><tr><td style="vertical-align: top;">BUSINESS&nbsp;PLANS</td><td style="vertical-align: top;">COMPANY&nbsp;PROFILES</td></tr><tr><td style="vertical-align: top;">STRATEGIC&nbsp;PLANS</td><td style="vertical-align: top;">PRODUCT&nbsp;REVIEWS</td></tr><tr><td style="vertical-align: top;">OPERATION&nbsp;MANUALS</td><td style="vertical-align: top;">BLOG&nbsp;POSTS</td>
</tr><tr><td style="vertical-align: top;">FINANCIAL&nbsp;REPORTS<br></td><td style="vertical-align: top;">MARKETING&nbsp;PLANS</td></tr><tr><td style="vertical-align: top;">WEBSITE&nbsp;CONTENTS</td><td style="vertical-align: top;">AND&nbsp;MORE</td></tr></tbody></table>

----

Wow Daniel!! You are a rocket scientist. With all that coding you know one day you could make a doll to fall in love. Thank you very much.

I will try tomorrow to see what happens. The point you hihglighted is very insighful when it comes to smaller screen if we use the desktop setting. By the way, would it be possible as far as you know to use the desktop setting for the homepage only and then the responsive setting for other pages?

As per upper row of attached screenshot, I just finished inserting the HTML code you posted in the description section of the CONTENT SLIDER object. As you see, I left the TITLE section empty. The only change I made to your code was the RGB values which I replaced with 0,125,276. A good thing of using HTML instead of placing text on images is that we can hyperlink words.

My next task now will consist in finding a book about HTML to make some changes. For example, I would like to have the words of the table with bigger size and in bold characters as shown in the lower part of the screenshot. Besides, I would also like to separate a little bit one row from another in the vertical sense.

I am intrigued to learn how did you get the RED symbol with 3 dashes. Do you think would it be possible to get a «square» symbo instead of the three dashes? I am referring to a square more or less similar to the one at the bottom of the screenshot preceding RGB values.

Thank you again!

I'm not an HTML expert, I only have some basic knowledge, I use Google to gather my information from relevant websites.

A) Special characters and emojis

>> https://www.w3schools.com/charsets/ref_utf_symbols.asp (Here also the symbol ☰)

>> https://www.w3schools.com/charsets/ref_emoji.asp

⏩ ⏹ ✅ ▢ ▶ - just copy and paste the symbols

B) Beginner's guides to HTML, CSS, and more

>> https://www.w3schools.com/html/default.asp

>> https://www.w3schools.com/css/default.asp

C) Text formatting bold, italics and underline

<b>Bold</> Bold

<i>Italic</i> Italic

<u>Underline</u> Underline

D) Set text size with CSS

<span style="font-size: 18px">Big text</span>

<span style="font-size: 18px"><b>Big bold text</b></span>

Info >> https://www.w3schools.com/css/css_font_size.asp

E) Tools

There are little helpers to create the table code, e.g. web editors with WYSIWYG and code views. I myself use the old and no longer updated PC program KompoZer (Beta version 0.8b3 from 2010), see

>> https://www.heise.de/download/product/kompozer-47185 (German Website)

In the WYSIWYG view the table can be created and in the source view the table HTML code can be copied. Then paste the HTML code e.g. in Notepad and remove all line breaks so that the code can be used in WebSite X5 in the content slider object.

Example of the start of the KompoZer table code:

<table style="text-align: left; width: 100%;" border="1" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td colspan="2" rowspan="1" style="vertical-align: top;"><span style="color: rgb(51, 51, 255);"><span style="color: red;">☰</span> WRITING BUSINESS TASKS PERFORMED:</span><br><br></td>
</tr>
...

Example of beginning of table code after removing line breaks in Windows Notepad:

<table style="text-align: left; width: 100%;" border="1" cellpadding="2" cellspacing="2"><tbody><tr><td colspan="2" rowspan="1" style="vertical-align: top;"><span style="color: rgb(51, 51, 255);"><span style="color: red;">☰</span> WRITING BUSINESS TASKS PERFORMED:</span><br><br></td></tr>
...

As far as my approach in this case, maybe other users have different approaches.

Thanks a lot again. I tested a WYSIWYG to design the table with letter in bold character and rows not too closed one another. I am attaching here the HTML previous which looks excellent and the HTML code generated is also included.

However, when I inserted the generated code into the CONTENT SLIDER object, the result was not as nice as you did it. As per attached screenshot, the image is not placed on the left hand side (even if that is the option I have chosen). The table does not appear at the same level, but far below. Thanks!

WebSite X5 settings:

(x) Desktop-Website: 1000

Object content slider / style

Image width: 38

(A screenshot can be found below.)

I had to fill the space between the table columns with non-breaking spaces so that the words in the two columns aren't stuck together.

&nbsp; (nbsp = non-breaking space).

I could not achieve larger distances between the table rows. For further editing of the table, the HTML/CSS experts may need help.

Here is the HTML code I used:

<table style="text-align: left; width: 100%; font-family: Helvetica,Arial,sans-serif; font-weight: bold;" border="0" cellpadding="2" cellspacing="2"><tbody><tr><td colspan="2" rowspan="1" style="vertical-align: top;"><span style="color: rgb(0, 125, 176);"><span style="color: red;">☰</span> BUSINESS TASKS PERFORMED</span><br><br></td></tr><tr><td style="vertical-align: top;">BUSINESS&nbsp;LETTER</td><td style="vertical-align: top;">&nbsp;&nbsp;COMPANY&nbsp;PROFILE</td></tr><tr><td style="vertical-align: top;">OPERATION&nbsp;MANUAL</td><td style="vertical-align: top;">&nbsp;&nbsp;PRODUCT&nbsp;REVIEW</td></tr><tr><td style="vertical-align: top;">BUSINESS&nbsp;PLAN</td><td style="vertical-align: top;">&nbsp;&nbsp;BLOG&nbsp;POST</td></tr><tr><td style="vertical-align: top;">FINANCIAL&nbsp;REPORT</td><td style="vertical-align: top;">&nbsp;&nbsp;MARKETING&nbsp;PLAN</td></tr><tr><td style="vertical-align: top;">STRATEGIC&nbsp;PLANING<br></td><td style="vertical-align: top;">&nbsp;&nbsp;SECURITY&nbsp;POLICY</td></tr><tr><td style="vertical-align: top;">WEBSITE&nbsp;CONTENT</td><td style="vertical-align: top;">&nbsp;&nbsp;AND&nbsp;MORE</td></tr></tbody></table>

-----

Now I found the CSS magic word to increase the line spacing:

line height: 1.5;

-----

<table style="text-align: left; width: 100%; font-family: Helvetica,Arial,sans-serif; line-height: 1.5; font-weight: bold;" border="0" cellpadding="2" cellspacing="2"><tbody><tr><td colspan="2" rowspan="1" style="vertical-align: top;"><span style="color: rgb(0, 125, 176);">

-----

Addendum:

The two <br><br> must be removed.

----

...  BUSINESS TASKS PERFORMED</span><br><br>

It has been a coincidence as I also found the way to increase the line spacing or let's better say the «cell height». Anyway, I will copy below the message I intended to send you before you latest one:

++++++++

I think I found the solution how to enlarge the space vertically between the rows. When I analised your latest code I noticed you specified WIDTH of the cells but said nothing about their height, exactly as follows:

<table style="text-align: left; width: 100%; >>>>>> ETC.

I played around and replaced width: 100%; by the following: width: 400px; height: 200px;

Then I tried the following code at WX5 and got what you see on the screenshot I have attached here:

<table style="text-align: left; width: 400px; height: 200px; font-family: Helvetica,Arial,sans-serif; font-weight: bold;" border="0" cellpadding="2" cellspacing="2"><tbody><tr><td colspan="2" rowspan="1" style="vertical-align: top;"><span style="color: rgb(0, 125, 176);"><span style="color: red;">☰</span> BUSINESS TASKS PERFORMED</span><br><br></td></tr><tr><td style="vertical-align: top;">BUSINESS&nbsp;LETTER</td><td style="vertical-align: top;">&nbsp;&nbsp;COMPANY&nbsp;PROFILE</td></tr><tr><td style="vertical-align: top;">OPERATION&nbsp;MANUAL</td><td style="vertical-align: top;">&nbsp;&nbsp;PRODUCT&nbsp;REVIEW</td></tr><tr><td style="vertical-align: top;">BUSINESS&nbsp;PLAN</td><td style="vertical-align: top;">&nbsp;&nbsp;BLOG&nbsp;POST</td></tr><tr><td style="vertical-align: top;">FINANCIAL&nbsp;REPORT</td><td style="vertical-align: top;">&nbsp;&nbsp;MARKETING&nbsp;PLAN</td></tr><tr><td style="vertical-align: top;">STRATEGIC&nbsp;PLANING<br></td><td style="vertical-align: top;">&nbsp;&nbsp;SECURITY&nbsp;POLICY</td></tr><tr><td style="vertical-align: top;">WEBSITE&nbsp;CONTENT</td><td style="vertical-align: top;">&nbsp;&nbsp;AND&nbsp;MORE</td></tr></tbody></table>

COMMENT: As you see if you increase the height let’s say from 200px to 225px – then the vertical enlargement of rows will be incremented.

What I like of this way of displaying text by using HTML code is that we can create hyperlink to direct visitors to another URL. 

By the way, I noticed that removal of <br><br> breaks the space existing between BUSINESS TASKS PERFORMED and the top row. It is interesting as I was trying to figure out how to achieve that. Later I am going to try to create a hyperlink to one of the rows.

PS: As addendum to my previous thread, I think you do not need to to fill the space with non-breaking spaces to distance the two columns one another. It is my understanding that you just need to increase the WIDTH.

There are several ways to reach the goal.

width: 400px; height: 200px;

or

line-height: 1.5;

-----

If I remove the two non-breaking spaces between the columns and use ...

Width: 400 px; Height: 200 px;

... then the long words in the left column abut the words in the right column.

If I use these values, then even without non-breaking spaces, there is space between the columns.

width: 580px; height: 200px;

At 550px the distance is small and at 500px the words stick together.

As already written, there are several ways to achieve the goal, also with HTML and CSS. Nice that I could accompany you a bit on your way.

Thank you very much! Please let me share this last thing with you. As shown on attached screenshot entitled LATEST VIEW, at the end I thought it could be a better solution to entirely remove the line BUSINESS TASKS PERFORMED from the table and include those words as TITLE. In this way we have more flexibility to edit the letters as you see on attached screenshot.

Before putting an end to our discussion, I would like to ask you the 30-million dollar question to see if you could cast some light about something (please do not respond too late because it is being said that people might soon light cigarettes with US dollar notes). The LATEST VIEW screenshot shows there is a space left on the right of the table. I reckon it could be a nice area to place a small image related to the topic. What I did was acceesing a WYSIWYG program and designed a table with a "daisy" added on the right of the table. The result on the browser is shown on the second screenshot attached called WYSIWYG on Browser . For this exercise, I linked the flower to the following URL address: https://www.linguistone.com/daisy.png

As you have done before, it would be highly appreciated if you could find the way of writing the code needed to achieve this effect. I am asking you this because for some reason the WYSIWYG software allows me to generate nice views on the Web browser, but everything looks messy and completely distorted when I copy and paste the code at WX5.

PS: By the way, the WYSIWYG I downloaded is KompoZer after you mentioned it earlier today, but I should say it doesn't look very modern which is not surprising as it has actually been deprecated.

Create table in KompoZer or other programs:

Create a table in HTML with 3 columns and 6 rows, then select all 6 cells in the right column while holding down the mouse button, open the selection with the right mouse button, then click "Connect cells" so that it becomes one large cell and an image in it can be placed.

HTML code für table with picture:

<table style="text-align: left; width: 100%;" border="1" cellpadding="2" cellspacing="2"><tbody><tr><td style="vertical-align: top;">1 left<br></td><td style="vertical-align: top;">1 right<br></td><td colspan="1" rowspan="6" align="center" valign="middle"><img style="width: 150px; height: 100px;" alt="schmetterling" src="butterfly.png" align="middle"><br></td></tr><tr><td style="vertical-align: top;">2 left<br></td><td style="vertical-align: top;">2 right<br></td></tr><tr><td style="vertical-align: top;">3 left<br></td><td style="vertical-align: top;">3 right<br></td></tr><tr><td style="vertical-align: top;">4 left<br></td><td style="vertical-align: top;">4 right<br></td></tr><tr><td style="vertical-align: top;">5 left<br></td><td style="vertical-align: top;">5 right<br></td></tr><tr><td style="vertical-align: top;">6 left<br></td><td style="vertical-align: top;">6 right<br></td></tr></tbody></table>

-----

The KompoZer is old, but I've been using the program for a long time because of its small size.

A similar, but newer program is BluGriffon (can also be used free of charge with a few limitations) - not tested yet.

When transferring the HTML code to WebSite X5, it is important that the invisible line breaks are removed.

-----

Thank you! I will try to download BlueGriffon to test the waters before jumping into the lake. By the way, could you please prode your latest screenshot as editable characters which you could copy and paste from a WordPad. I am having difficulty to identify the characters that need to be deleted as the resolution of your image is poor.

WebSite X5 settings:

(x) Desktop-Website > Website resolution: 1000

Object Content Slider / Style > Image width (%): 35

HTML code used:

<table style="text-align: left; width: 600px; height 200px;" border="1" cellpadding="2" cellspacing="2"><tbody><tr><td style="vertical-align: top;">BUSINESS LETTER<br></td><td style="vertical-align: top;">COMPANY PROFILE<br></td><td colspan="1" rowspan="6" valign="middle"><img src="https://www.linguistone.com/daisy.png" align="middle"><br></td></tr><tr><td style="vertical-align: top;">OPERATION MANUAL<br></td><td style="vertical-align: top;">PRODUCT REVIEW<br></td></tr><tr><td style="vertical-align: top;">BUSINESS PLAN<br></td><td style="vertical-align: top;">BLOG POST<br></td></tr><tr><td style="vertical-align: top;">FINANCIAL REPORT<br></td><td style="vertical-align: top;">MARKETING PLAN<br></td></tr><tr><td style="vertical-align: top;">STRATEGIC PLANING<br></td><td style="vertical-align: top;">SECURITY POLICY<br></td></tr><tr><td style="vertical-align: top;">WEBSITE CONTENT<br></td><td style="vertical-align: top;">AND MORE<br></td></tr></tbody></table>

Screenshot:

BlueGriffon: I just finished installing BlueGriffon you mentioned a while ago. At first sight BlueGriffon looks great, but it doesn't seem to be as good as KompoZer. I say this because just from start BlueGriffon did not allow me to join or merge the cells of third column on the right hand side. The attached screenshot shows what I am referring to. The relevant column is inside a green box and the error message is pointed out with a red arrow.

Latest HTML Code: Thank you for your latest post with the HTML code with the daisy flower included. Would you be kind enough to include the source code you got on the WYSISYG side? I am just trying to learn to exactly identify "invisible line breaks" in order to remove them.

HTML code for table:

<table style="text-align: left; width: 600px; height 200px;" border="1" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top;">1 left<br>
</td>
<td style="vertical-align: top;">1 right<br>
</td>
<td colspan="1" rowspan="6" valign="middle"><img src="flower.png"><br>
</td>
</tr>
<tr>
<td style="vertical-align: top;">2 left<br>
</td>
<td style="vertical-align: top;">2 right<br>
</td>
</tr>
<tr>
<td style="vertical-align: top;">3 left<br>
</td>
<td style="vertical-align: top;">3 right<br>
</td>
</tr>
<tr>
<td style="vertical-align: top;">4 left<br>
</td>
<td style="vertical-align: top;">4 right<br>
</td>
</tr>
<tr>
<td style="vertical-align: top;">5 left<br>
</td>
<td style="vertical-align: top;">5 right<br>
</td>
</tr>
<tr>
<td style="vertical-align: top;">6 left<br>
</td>
<td style="vertical-align: top;">6 right<br>
</td>
</tr>
</tbody>
</table>

Thank you! I finished checking and noticed your latest «HTML code for table» is the same you posted before under «HTML code used» which contains the white/yellow heart on the left and the daisy flowr on the extreme right. So, these two are the ones to be used at WX5.

The code I was inquiring about is the one generated by KompoZer as "source code". In this way the differences of two codes (KompoZer vs WX5) could be easily identified in order to delete the  "invisible line breaks" from the KompoZer source code.

HTML table 3 columns and 6 rows, with the 6 rows in the right column connected, with no entries.

Code outside the table <table>...</table> is not needed in WebSite X5.

-----

<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title></title>
</head>
<body>
<table style="text-align: left; width: 100%;" border="1" cellpadding="2"
cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top;"><br>
</td>
<td style="vertical-align: top;"><br>
</td>
<td colspan="1" rowspan="6" style="vertical-align: top;"><br>
</td>
</tr>
<tr>
<td style="vertical-align: top;"><br>
</td>
<td style="vertical-align: top;"><br>
</td>
</tr>
<tr>
<td style="vertical-align: top;"><br>
</td>
<td style="vertical-align: top;"><br>
</td>
</tr>
<tr>
<td style="vertical-align: top;"><br>
</td>
<td style="vertical-align: top;"><br>
</td>
</tr>
<tr>
<td style="vertical-align: top;"><br>
</td>
<td style="vertical-align: top;"><br>
</td>
</tr>
<tr>
<td style="vertical-align: top;"><br>
</td>
<td style="vertical-align: top;"><br>
</td>
</tr>
</tbody>
</table>
<br>
</body>
</html>

BlueGriffon installed as a test, the same error message, then immediately uninstalled.

Well done! I did the same as I had alreadyo uninstalled BlueGriffon. Apart from that, I am very sorry for being a pain in the neck, but this is the very first time I deal with HTML code and have not yet got the around of knowing what I should exactly delete from the code generated by KompoZer to eventually be copied and pasted to XW5.

To make things clear I have followed four (4) steps for creating the table we have been working for testing purposes. I have attached the files relevant for each step.

STEP 1: Screenshot of how looks the table I designed in KompoZer. For the record, I have also attached the HTML generated by KompoZer when I saved it on my hard drive. It is entitled «testing_code».

STEP 2: This is what I see when I click on BROWSER to have an idea how the table should look. Until here everything looks excellent.

STEP 3: This screenshot shows the source code generated by KompoZer for the table designed at STEP1. Just in case, I have also attached that code as Microsft Word file. This code should be the same you get at your end, EXCEPT the measurements of width and height as we work with different parameters.

STEP 4: This screenshot shows exactly what I see at WX$ (Review) after copying and pasting the source code quoted on STEP 3. Just a mess.

COMMENT: According to your explanations, I am aware that things were wrong at WX5 because I should have deleted some sections of the code generated on STEP 3. This is the critical point because I have not yet understood what are the codes I must removed from STEP 3.

QUERY: To make this really understandable, could you please open the Microsoft Word file (cf. Step 3) and highlight in COLOUR the characters that I should delete before copying and pasting to WX%. Once I get this right I will treat our conversation on this CONTENT SLIDER issue as finalised.

In WebSite X5 I had to enter 28% for "Style" so that the flower would not be cut off.

WORD file see below.

The most important thing is to remove the invisible line breaks, otherwise they will confuse the table contents when transferred to WebSite X5.

If it's not done right, it will never work and all effort is wasted.

Think of the HTML without line breaks as one long line that only needs to be force-wrapped at the spaces or other characters of WORD to fit on the paper.

Even when typing in the field at Website X5, it's still a long line that's forced to wrap there to fit between the left and right margins.

Thank you Daniel. I think I have enough material to work on your instructions over the weekend in order to eventually learn how to do this.

As a matter of fact, I could just have used your initial codes to achieve what I want without asking any more questions, but rather prefer learning how to do things on my own. This is why I am more inclined to work on my own design instead of using templates. Thank you again!

QUICK NOTE: Wow! It has been just a short while ago I finally understood what did you mean with "removing line breaks. I thought I had to delete characters, but actully what you meant was that we need to eliminate any space between characters. In another words, we have to join all characters.  Do you have any program to "word wrap" the whole text in one go. Before WordPad has this capability but today I realised it has been removed.

Since I live in Germany and my school days have been over for decades, my knowledge of English is only minimal. So I use Google as a translator and sometimes rearrange my sentences several times until I think it is understandable.

Line breaks - on an old typewriter it would be carriage return and line feed - is that clearer?

>> https://en.wikipedia.org/wiki/Carriage_return

----- KompoZer -----

<HTML code line 1>(invisible line break or carriage return and line feed)

<HTML code line 2>(invisible line break or carriage return and line feed)

<HTML code line 3>(invisible line break or carriage return and line feed)

----- WebSite X5 -----

<HTML code line 1><HTML code line 2><HTML code line 3>

----------------------

Daniel, your English is excellent. I take responsibility for failing to understand what «invisible line break» stands for. You come across as being a highly competent user of this software that you should be hired by WX5 to create and lead tutorials. Your language is concise and your explanations are always useful. Thank you very much!