/    Sign up×
Community /Pin to ProfileBookmark

CSS for image borders

Copy linkTweet thisAlerts:
Feb 06.2007

Hi all,

I’m a newbie to CSS. I want to make a table thta has an image as a border. After searching for CSS codes on the web, I finally wrote this code:

#bordertable {
width:540px;
background:url(images/WebDesignImg/shri_chakraSpacer.jpg) repeat-x repeat-y;
}

The HTML Part is:

<div id=”bordertable”>

<table border=”0″ style=”width:500px;margin-top:10px”>
<tr><td>some stuff here</td></tr>
</table>

</div>

However it doesn’t seem to work. How do I get the table to display a border correctly?
The width and height of my spacer image is 20 px.

Please help.
Thanks,
Sarah

to post a comment
CSS

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@HookedOnWinterFeb 06.2007 — Sarah,

There is actually CSS for borders...

<i>
</i>&lt;table style="border:#FF0000 medium solid"&gt;


what kind of image are you using? i don't know if it's possible to make the border an image...
Copy linkTweet thisAlerts:
@CentauriFeb 06.2007 — If you set the width of your containing div to the same as the table, then apply a padding of same size as image, it will enlarge the div by the padding size all round. You also need to set a background on the table. See this [CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>table borders</title>
<style type="text/css">
<!--
#bordertable {
width: 500px;
background-image: url(images/WebDesignImg/shri_chakraSpacer.jpg);
padding: 20px;
}
#bordertable table {
width: 500px;
background-color: #FFFFFF;
border: 0;
}
-->
</style>
</head>

<body>
<div id="bordertable">
<table>
<tr>
<td>Some stuff here, which I certainly hope can be considered data or tabualr data, and not anything that could be considered layout ...... :)
</td>
</tr>
</table>
</div>
</body>
</html>
[/CODE]

Cheers

Graeme
Copy linkTweet thisAlerts:
@HookedOnWinterFeb 06.2007 — Graeme i love your "data"
Copy linkTweet thisAlerts:
@wonshikeeFeb 07.2007 — Hi all,

I'm a newbie to CSS. I want to make a table thta has an image as a border. After searching for CSS codes on the web, I finally wrote this code:

#bordertable {

width:540px;

background:url(images/WebDesignImg/shri_chakraSpacer.jpg) repeat-x repeat-y;

}


The HTML Part is:

<div id="bordertable">

<table border="0" style="width:500px;margin-top:10px">

<tr><td>some stuff here</td></tr>

</table>


</div>

However it doesn't seem to work. How do I get the table to display a border correctly?

The width and height of my spacer image is 20 px.

Please help.

Thanks,

Sarah[/QUOTE]

If you make the background image, as stated above, so that what is showing, is the border image you want, it would work.
Copy linkTweet thisAlerts:
@serpentpowerauthorFeb 07.2007 — Thank you very much ! Now I have a neat looking webpage. My table has a beautiful image border in place of the standard solid line.

It looks really nice.

Thank you very much ! ?
Copy linkTweet thisAlerts:
@serpentpowerauthorFeb 07.2007 — When I implemented the code by Graeme, I did get a beautiful table with an image as the border. However, I found that my image at the bottom of the table didn't show correctly. i.e. the image was cut into half. TO rectify it I added this little piece:

height:200px;

and the image shows correctly now.

The height and the width of the table / div must be multiples of the dimensions of the background image that is being used, so the image will display correctly.

?
×

Success!

Help @serpentpower spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...