How to set a border for a table

Question

I am trying to develop a webpage using HTML and JavaScript. And I also use external Javascript and external style sheets for development. The problem is using external stylesheets in Javascript, I want to give some border for the table and its rows / columns. Can someone tell me how can I do this?

Answer 1

HTML elements have a style property that represents an object with element styles. If you change it, you will change the 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 the borderTop , borderRight , borderBottom , borderLeft , you can only change the borders 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: http://www.w3schools.com/cssref/pr_border.asp

Only to confirm the object in this example, some of them that you selected with getElementById presented, therefore ...

 var myTable = document.getElementById('tableID'); myTable.style.border="1px solid red"; 

Answer 3

Why aren't you using jQuery Framework? With jQuery, you can add the following code to achieve your goal:

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

Answer 4

I understood.

in your CSS file

code: table, td {border: 1pix solid red}

here 1pix = specify your border size, but should be in the same format

  solid=i think its intensity of color(if you want to try something else, give after refering to w3schools/table) red=Color name (you can give any desired color name.) 

if you want to specify the color name as a hexadecimal value, just replace “red” with some kind of hexadecimal value, for example “#cdcdcd” (it is not black).

If you are still in doubt, just come to me.

Answer 5

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

It works great. The style of writing CSS and the style of writing Javascript different.