CODEWITHSUNDEEP
javascriptcssborderexternal
S.P
S.P

Reputation: 1845

How to set Border for table

I am trying to develop a web page using HTML and JavaScript languages.

And I have been also using external Javascript and External style sheets for development.

The problem is while using external style sheets in Javascript, I want to give some border for the table and its rows and cols.

Can anyone tell me how can I do that?

Upvotes: 7

Views: 58067

Answers (5)

S.P
S.P

Reputation: 1845

I got it.

In your CSS file code table: td{border:1pix solid red}.

Here 1pix= gives your choice of border size, but it should be in the same format. I think solid= is intensity of color. If you want to try something else, refer to w3schools/table. red=Color name (you can give any desired color name). If you want to give the color name in hexadecimal, just replace "red" with some hexadecimal value like "#cdcdcd" (it's not black).

If you still have doubt, just approach me.

Upvotes: 0

JDGuide
JDGuide

Reputation: 6525

Try this in Javascript :-

elemt.style.borderBottom="1px solid red";
elemt.style.borderTop="1px solid green";

In CSS :-

.your-element{
  border-top:1px solid green;
  border-left:1px solid red; 
}

Works fine. The CSS style of writing and Javascript style of writing is bit different.

Upvotes: 0

mas-designs
mas-designs

Reputation: 7536

Why don't you use the jQuery Framework ? With jQuery you would be able to add the following code to achieve your goal:

$('table').css("border","1px solid #000");

Upvotes: 1

balkon_smoke
balkon_smoke

Reputation: 1196

HTML elements have property style that represents object with element's styles. If you modify it — you'll change style of your element.

elem.style.border = "1px solid #000"
// the same as
elem.style.borderWidth = "1px";
elem.style.borderColor = "#000";
elem.style.borderStyle = "solid";

// or

elem.style.borderTop = "4px dashed greed";
// the same as
elem.style.borderTopWidth = "4px";
elem.style.borderTopColor = "green";
elem.style.borderTopStyle = "dashed";

Using borderTop, borderRight, borderBottom, borderLeft properties you can change only borders what you need.

Upvotes: 19

Mike Sav
Mike Sav

Reputation: 15291

Try something like this in your JavaScript:

object.style.border="1px solid red"; // 1px solid red can be anything you want...

W3schools can help you here: http://www.w3schools.com/cssref/pr_border.asp

Just to confirm object in this example represents some this you have selected using getElementById, so...

var myTable = document.getElementById('tableID');

myTable.style.border="1px solid red";

Upvotes: 2

Related Questions