Za pomocą tych dwóch atrybutów możemy ustalić szerokość marginesów od krawędzi komórki oraz szerokość obramowania komórki.
Atrybuty te pozwalają nam znacznie lepiej wykorzystać zwykłą tabelkę. A połączenie pociętej grafiki nie było by możliwe przy wykorzystaniu tabel bez ich zastosowania.
| 1 | 2 |
| 3 | 4 |
<table width=”100″ height=”100″ cellpadding=”20″ cellspacing=”0″ border=”1″> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </table>
Szerokość marginesów została ustawiona na 20 (px) dlatego numery komórek zostały odsunięte od krawędzi.
Natomiast ustawienie cellspacing na 20 spowoduje zwiększenie szerokości obramowania tabelki, oczywiście aby efekt ten był widoczny musimy ustalić border na co najmniej „1„.
| 1 | 2 |
| 3 | 4 |
Znając już działanie obu atrybutów możemy pokusić się o bardziej przydatny przykład. Będzie to połączenie pociętej grafiki w jedną całość. Jest to bardzo często stosowane przy zamieszczaniu grafiki na stronie o dużych rozmiarach. Powoduje to widoczne (szybsze) wczytywanie się strony ponieważ grafika pobierana jest elementami a nie cała.
Mamy pociętą grafikę na cztery części:
 |
 |
 |
 |
Teraz za pomocą tabelki i poznanych atrybutów połączymy naszą grafikę tak, że nie będzie widać czterech osobnych elementów:
|
|
|
|
Kod tabelki:
<table width=”278″ height=”121″ cellpadding=”0″ cellspacing=”0″ border=”0″> <tr> <td><img src=”czesc_1.gif”></td> <td><img src=”czesc_2.gif”></td> </tr> <tr> <td><img src=”czesc_3.gif”></td> <td><img src=”czesc_4.gif”></td> </tr> </table>
Podczas skłądania grafiki należy zamknięcie </td> stosować w tej samej lini co wstawiliśmy obrazek. Jest to o tyle ważne, że przechodząc do nowej lini z zamknięciem </td> w przeglądarce IE grafika nam się nie połączy. Problemu tego nie ma na przykład w Firefox’ie.
Za pomocą cellspacing możemy zrobić sobie tabelkę z obramowaniem kolorowym mając pewność, że zadziała to w każdej przeglądarce.
| 1 | 2 |
| 3 | 4 |
Kod tabelki:
<table bgcolor=”#000000″ width=”100″ height=”100″ cellpadding=”20″ cellspacing=”2″ border=”0″> <tr> <td bgcolor=”#ffffff”>1 </td> <td bgcolor=”#ffffff”>2 </td> </tr> <tr> <td bgcolor=”#ffffff”>3 </td> <td bgcolor=”#ffffff”>4 </td> </tr> </table>
Tak więc są to atrybuty bardzo przydatne i możemy je wykorzystywać na wiele sposobów.
