Border for table cells

CSS allows you to define the style, width and color for the table elements, similar to any kind of boxes. It can be done using border-style, boder-width, border-color or border properties.

Note
The <tr> elements are rendered without a border.
The style defined for a <table> element doesn't apply to its children.
The style defined for <tr> elements applies to the <td> elements. (only internet explorer)

snippet
<html>
<head>
<style>
td {border:1px solid gray;}
.none {border-sty;e: none}
.hidden {border-style: hidden}
.dotted {border-style: dotted}
.dashed {border-style: dashed}
.solid {border: 1px solid red;}
.double {border-style: double}
.groove {border-style: groove}
.ridge {border-style: ridge}
.inset {border-style: inset}
.outset {border-style: outset}
</style>
</head>
<body>
<table>
<tr><td class="none">none</td><td class="hidden">hidden</td></tr>
<tr><td class="dotted">dotted</td><td class="dashed">dashed</td></tr>
<tr><td class="solid">solid</td><td class="double">double</td></tr>
<tr><td class="groove">groove</td><td class="ridge">ridge</td></tr>
<tr><td class="inset">inset</td><td class="outset">outset</td></tr>
</table>
</body>
</html>
Related Tutorial
Follow Us
https://www.facebook.com/Rookie-Nerd-638990322793530 # # # # #