Pri uporabi tabel TABEL se začetniki v HTML produkciji srečajo s tem, kako spremeniti debelino robov, saj je privzeta nastavitev robov v tabeli zelo debela, tudi če je 1px. Zato obstajajo tudi druge metode za ustvarjanje tankih črtnih robov, tukaj pa je metoda uporabe CSS za implementacijo tankih črt, ki je zelo učinkovita in združljiva z vsemi brskalniki.
Če preprosto nastavite rob za tabelo tankih črt, je težko zagotoviti, da je brskalnik združljiv. Pogosta praksa je uporaba CSS2-jevega sistema "border-collapse:collapse;" meje tabel za združevanje atributov; Levi in zgornji rob nastavite za elemente tabele ter desni in spodnji rob za elemente th in td.
HTML:
<table> <tr> <th>Glava tabele (vrstica 1, stolpec 1)</th> <th>glava tabele (vrstica 1, stolpec 2)</th> <th>glava tabele (vrstica 1, stolpec 3)</th> </tr> <tr> <td>podatki tabele (vrstica 1, stolpec 1)</td> <td>Podatki tabele (vrstica 1, stolpec 2)</td> <td>podatki tabele (vrstica 1, stolpec 3)</td> </tr> <tr> <td>podatki tabele (vrstica 2, stolpec 1</td><td>) podatki tabele (vrstica 2, stolpec 2)</td> <td>Podatki v tabeli (vrstica 2, stolpec 3)</td> </tr> CSS</table>:
table{border-collapse:collapse; razmik med mejami:0; rob-levo: 1px trdno #888; rob na vrhu: 1px trdno #888; ozadje: #efefef; } th,td{border-right:1px solid #888; spodnji rob: 1px trdno #888; polnilo: 5px 15px; } th{font-weight:bold; ozadje: #ccc; } |