Borders around every cell and table

Question

I have been tasked with maintaining someone else's code. In this fiddle, I have captured a snippet of an html file from this codebase

https://jsfiddle.net/hqkw4x1s/

 .lab { HEIGHT: 18px; FONT-WEIGHT: normal; TEXT-ALIGN: left; PADDING-LEFT: 4px; PADDING-RIGHT: 3px; BACKGROUND-COLOR: #e6f6f6 } .val { PADDING-BOTTOM: 1px; PADDING-TOP: 1px; PADDING-LEFT: 2px; PADDING-RIGHT: 3px; BACKGROUND-COLOR: white } 

 <FORM> <DIV> <TABLE width="100%" bgColor=#cecece border=0 cellSpacing=1 cellPadding=0> <TBODY> <TR vAlign=middle> <TD width="6%" class=lab>Country</TD> <TD width="44%" class=val> <INPUT name="A" id="A" type=checkbox CHECKED> <LABEL for="A">A</LABEL>&nbsp;&nbsp; <INPUT name="B" id="B" type=checkbox CHECKED> <LABEL for="B">B</LABEL> </TD> <TD width="6%" class=lab>States</TD> <TD width="44%" class=val> <TABLE width="100%" border=0 cellSpacing=0 cellPadding=0> <TBODY> <TR> <TD> <SELECT> <OPTION value="p" selected>P</OPTION> <OPTION value="q">Q</OPTION> <OPTION value="r">R</OPTION> </SELECT> </TD> </TR> </TBODY> </TABLE> </TD> </TR> <TR vAlign=middle> <TD class=lab>Ownership</TD> <TD class=val> <TABLE width="100%" border=0 cellSpacing=0 cellPadding=0> <TBODY> <TR> <TD><TEXTAREA style="WIDTH: 95%" rows=1 cols=20></TEXTAREA></TD> <TD style="WIDTH: 75px; TEXT-ALIGN: left"><SPAN style="BACKGROUND-COLOR: #f8f8f8"></SPAN> </TD> </TR> </TBODY> </TABLE> </TD> <TD class=lab>Partnership</TD> <TD class=val><INPUT type=text xHeight="32px"> </TD> </TR> <TR vAlign=middle> <TD class=lab>Accounts Payable</TD> <TD style="PADDING-LEFT: 2px; PADDING-RIGHT: 3px; BACKGROUND-COLOR: white"> <INPUT type=text> </TD> <TD class=lab>Start Date</TD> <TD class=val> <INPUT type=text xHeight="32px"> </TD> </TR> </TBODY> </TABLE> </DIV> </FORM> 

The thing that I am not able to get my head around is the border around each cell and the table. Neither in the CSS, nor in the HTML there is any reference to border style, so how come borders are displayed around each cell.

I tried using developer tools as well. It shows me the following CSS class with reference to border. But where is it coming from?

Answer 1

You have to decide whether you want to style inline or using CSS.That will make it easier to correct and fix errors.

It seems that is not a border. It's a background color. The contrast between two bg colors appears as a border. The CSS assigns a background color to every cell. Hence, the outer surrounding of the cell will remain gray making it look like a border.

The code in HTML gives a bg color to the table and from CSS it gives bg color to cells. The little space between each cell will show the tables bg color, which is nearly gray, leading the viewer to think it's border.

For example, by removing the following two lines from CSS:

BACKGROUND-COLOR: #e6f6f6

BACKGROUND-COLOR: white

This line from the Table tag:

bgColor=#cecece

Will render:

After you remove all background colors, add them back one by one based on what you need. Also be aware of the inline styling I noticed in one of the spans such as:

 <span style="BACKGROUND-COLOR: #f8f8f8" > 

Answer 2

You need a new css property for tables: "border-collapse".

table {
  border-collapse: collapse;
}

Answer 3

It appears that it is not a border, but background of the table, coming through the gaps between cells, because of these attributes:

bgColor=#cecece ... cellSpacing=1

( bgColor makes light gray background, cellSpacing makes 1px wide gaps between cells). Cells have white background (set with CSS, via .lab and .val classes), but space between them has a background of the table itself, set via bgColor attribute.