CSS

/* 1. Erilliset rajat. border-spacing määrää rajojen välisen etäisyyden. */ table.eka { border-collapse: separate; border-spacing: 10px; empty-cells: show; border: 2px dotted black; } table.eka caption { caption-side: bottom; } /* 2. Sama, mutta tyhjät solut piilotettuna. Vertaa edelliseen. */ table.toka { border-collapse: separate; border-spacing: 10px; empty-cells: hide; border: 2px dotted black; } /* 3. Yhdistetyt rajat: solujen rajat sulautuvat yhdeksi viivaksi. HUOMAA: empty-cells ei vaikuta mitään yhdistetyssä tilassa, joten tyhjien solujen rajat näkyvät vaikka arvo olisi hide. */ table.kolmas { border-collapse: collapse; empty-cells: hide; border: 5px ridge black; } caption { text-align: left; font-style: italic; } th, td { border: 1px solid black; padding: 0.5em 1em; text-align: left; } th { border: 3px solid #b3261e; background-color: #f3e9dd; }

HTML

<table class="eka"> <caption>Erilliset rajat, tyhjät solut näkyvissä</caption> <thead> <tr><th scope="col">Otsikko 1</th><th scope="col">Otsikko 2</th></tr> </thead> <tbody> <tr><td>solu 1</td><td></td></tr> <tr><td>solu 3</td><td>solu 4</td></tr> <tr><td></td><td>solu 6</td></tr> <tr><td>solu 7</td><td>solu 8</td></tr> </tbody> </table> <table class="toka"> <caption>Erilliset rajat, tyhjät solut piilotettu</caption> <thead> <tr><th scope="col">Otsikko 1</th><th scope="col">Otsikko 2</th></tr> </thead> <tbody> <tr><td>solu 1</td><td></td></tr> <tr><td>solu 3</td><td>solu 4</td></tr> <tr><td></td><td>solu 6</td></tr> <tr><td>solu 7</td><td>solu 8</td></tr> </tbody> </table> <table class="kolmas"> <caption>Yhdistetyt rajat</caption> <thead> <tr><th scope="col">Otsikko 1</th><th scope="col">Otsikko 2</th></tr> </thead> <tbody> <tr><td>solu 1</td><td></td></tr> <tr><td>solu 3</td><td>solu 4</td></tr> <tr><td></td><td>solu 6</td></tr> <tr><td>solu 7</td><td>solu 8</td></tr> </tbody> </table>

Javascript

Konsoli