How to set Border for table

Question

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?

Answer 1

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.

Answer 2

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";