how to add border to an image or table

  • 1
  • Question
  • Updated 10 years ago
  • Answered
how to add border to an image or table with space between table and border?
Photo of usha

usha

  • 18 Posts
  • 0 Reply Likes

Posted 10 years ago

  • 1
Photo of Adrienne

Adrienne

  • 106 Posts
  • 5 Reply Likes
Hi Usha,

To add a border around an image requires that you add some custom HTML to your web page. You can drag & drop an HTML widget onto your page, then add the following code: (don't include the "<! --> exclamation point" part...

<!--

<img border=5 src="resources/4128az1.jpg">

-->

where src = the name of the image file. In your case, it would be resources/your_picture.jpg. The img border can be adjusted to be whatever size you would like.

You can add a table border in roughly the same way. Drag and drop an HTML widget onto your page, the add the following code:

<!--

<table border="5" cellpadding="10">
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
<tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr>
<tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr>
</table>

-->

For more information, please look at the following post in our community forum:
adding borders

and check out tutorial websites like this, from www.tizag.com:
tables

~ Adrienne
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
usha

I posted below how you can accomplish your desired look but here it is again

In an image widget click on the image you wish to have a border and then above and to the left of the image click the "Edit with Picnik" button then in the Picnik program you click the "Create" tab then the "Frames" button. Take your pick of all the styles available on the left side, make the color adjustments if you like and then when it looks like you had wished click the "Save to Synthasite" button on the right side then OK when asked to replace image. This will replace the image in your file manager with one that has the border so make sure your original is handy on you computer if you wish to revert back to the original.

If your photo is in a text widget then you need to open your file manager and then find the image you wish the border around and then above your image click the Picnik button and follow the above instructions.

with it you can adjust border color and size...
Photo of usha

usha

  • 18 Posts
  • 0 Reply Likes
instead of editing each image i want a html code where it will set to all the images and also i want a curved canvas around whole table with 10 px space between border and the table
Photo of usha

usha

  • 18 Posts
  • 0 Reply Likes
instead of editing each image i want a html code where it will set to all the images and also i want a curved canvas around whole table with 10 px space between border and the table
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
well as I have played around with the code generated borders and myself found it to be quite unpleasant on the general appearance and to be quite honest simply not look good but that is just my opinion. As to the editing each image I have a labor intensive site with many images with different layouts and styles and have found that yes more time is required for editing each image but the end result is worth it I think. Here are some example pages.

http://honeybearplayhomes.synthasite....
http://honeybearplayhomes.synthasite....
http://honeybearplayhomes.synthasite....

Anyway I wish you luck with your site sorry I couldn't help
Photo of Sohail

Sohail

  • 26 Posts
  • 1 Reply Like
hello every body! border around text can be created very easily. go to this link and learn how to do this. the link is http://forums.synthasite.com/tables-i...
Photo of Monique

Monique, VP of Customer Support

  • 6294 Posts
  • 446 Reply Likes
Here is another service you might like to check out for creating tables : http://www.htmlbasix.com/

This is a code generator that generates table code for you. You enter your requirements and then click "generate." Copy and paste the generated code and add it to your site using the HTML widget as Adrienne describes above.

Place the content for each cell between these tags:
<!--
<td></td>
-->
Photo of Ruth

Ruth

  • 2819 Posts
  • 135 Reply Likes
Don't forget to leave out the <!-- and the --> at the beginning and end of the code when you are pasting it into the HTML widget. We only use that here so that Get Satisfaction doesn't interpret it.
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
Don't forget that if you want a border that is not simply a line then you can use Picnik to put some mighty nice borders or frames around your images. Picnik has a wide selection of them and you can change the color as well as style.

In a text widget click on the image you wish to have a border and then above and to the left of the image click the "Edit with Picnik" button then in the Picnik program you click the "Create" tab then the "Frames" button. Take your pick of all the styles available on the left side, make the color adjustments if you like and then when it looks like you had wished click the "Save to Synthasite" button on the right side then OK when asked to replace image. This will replace the image in your file manager with one that has the border so make sure your original is handy on you computer if you wish to revert back to the original.

If your photo is in a image widget then you need to open your file manager and then find the image you wish the border around and then above your image click the Picnik button and follow the above instructions.

After you are done don't forget to update your site...
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
woops I think I got that backwards so sorry...

In an image widget click on the image you wish to have a border and then above and to the left of the image click the "Edit with Picnik" button then in the Picnik program you click the "Create" tab then the "Frames" button. Take your pick of all the styles available on the left side, make the color adjustments if you like and then when it looks like you had wished click the "Save to Synthasite" button on the right side then OK when asked to replace image. This will replace the image in your file manager with one that has the border so make sure your original is handy on you computer if you wish to revert back to the original.

If your photo is in a text widget then you need to open your file manager and then find the image you wish the border around and then above your image click the Picnik button and follow the above instructions.
Photo of Guido Graphics

Guido Graphics

  • 558 Posts
  • 41 Reply Likes
I used a simple method that works well... Drag a text widget onto the page, click inside the widget to enter text and the text options will show at the top. Select the "+photo" icon (11th from the left , next to the "link" icon) and select the photo from the file manager (it shows up automatically) The new photo will have a regular boarder around it.
Photo of Adrienne

Adrienne

  • 106 Posts
  • 5 Reply Likes
Photo of Sohail

Sohail

  • 26 Posts
  • 1 Reply Like
hello every body! border around text can be created very easily. go to this link and learn how to do this. the link is http://forums.synthasite.com/tables-i...