HTML CSS

HOW TO STYLE TABLE BORDERS IN HTML CSS

<table> <tr> <th>Head A</th> <th>Head B</th> </tr> <tr> <td>Cell A</td> <td>Cell B</td> </tr> </table>

BASIC TABLE BORDERS

01

BORDERS ONLY APPLY TO TABLE & CELLS table { border: 3px solid red } table th { border: 2px solid green } table td { border: 1px solid blue }

BORDER COLLAPSE

02

BORDER ARE SEPARATED BY DEFAULT COLLAPSE TO "COMBINE" THEM table { border-collapse: collapse } table { border: 3px solid red } table th { border: 2px solid green } table td { border: 1px solid blue }

.bOne { border: 5px dotted black; } .bTwo { border: 5px dashed red; } .bThree { border: 5px double green; } .bFour { border: 5px ridge blue; } .bFive { border: 5px inset yellow; }

BORDER STYLES

03

border-top: 5px solid red; border-bottom: 6px dashed green; border-left: 7px dotted blue; border-right: 8px ridge yellow;

DIFFERENT BORDERS

04