CODEWITHSUNDEEP
htmlcss
user153
user153

Reputation: 146

HTML table inline css not working

I have the following line of code in my html page & table doesn't show up borders

 <table style="{border-color: black;padding-left:2px;border-style: solid;border: 5px;border-width: 2px; }">

Can you help me debug that.

Upvotes: 2

Views: 1312

Answers (4)

KesaVan
KesaVan

Reputation: 1031

Try this:

JSFIDDLE

Your Code:

<table id="table" style="border-color: black;padding-left:2px;border-style: solid;border: 5px solid black;">

Upvotes: 0

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201588

There are several issues involved:

  • The curly braces { and } make the code invalid and cause it to be skipped. Remove them. Reference: CSS Style Attributes.
  • The shorthand border notation always sets all border properties, using initial values as defaults. Thus, border: 5px sets border-style to none (and border-color to the value of the color property). The simplest fix is to remove that declaration; it seems to be meant to set border width, but used this way it has undesired side effects, and besides you are setting the width in later declaration (to a different value).
  • Even when fixed, the code sets a border on the table as a whole only, not on its cells, and you might have meant to set borders on cells too. There is no way to do that in a style attribute of the table element; you need to set them in style attributes of cell elements or (better) in a style element or (even better) in a linked style sheet.

The minimally fixed code that deals with the first two issues is:

<table style="border-color: black;padding-left:2px;border-style: solid;
border-width: 2px">

Upvotes: 0

Daniel Rippstein
Daniel Rippstein

Reputation: 567

In addition to the unnecessary braces, the border CSS needs a little love. Try this instead:

<table style="padding-left:2px; border: 5px solid black;">

Upvotes: 2

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13978

Syntax error. Remove { and }

<table style="border-color: black;padding-left:2px;border-style: solid;border: 5px;border-width: 2px;">

Also no need to write border-color, border-style and border-width separately. You can combine and simplify like below.

 border:2px solid black;

So you can update your code like this.

<table style="border:2px solid black; padding-left:2px;">

Upvotes: 2

Related Questions