Cellpadding i Cellspacing w praktyce

Autor: Maciej Skrobiński, dodano: 25-07-2003
Kategoria: Programowanie i tworzenie

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
Kod tabelki:
<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.

Ocena 2.76/5 (55.18%) (340 głosów)

Komentarze:

  • szybkie wczytywani
    Dodał: q data: 2009-10-31
    Skad w ogole pomysl ze 4 polaczenia nawiaza sie i zakoncza szybciej niz jedno? Zdazyc sie moze tylko na hostingach shared i oznacza z reguly wieksze zuzycie zasobow serwera przez nasza aplikacje. A użycie tabel w warstwie danych/html to juz w ogóle...
  • cellspacing
    Dodał: Gość data: 2011-02-15
    Wreszcie zakumałem o co w tym Cellspacing chodzi. Dzięki!
  • dajspokoj
    Dodał: Gość data: 2012-03-27
    przeciez sa style i css, juz sie html udoskonalil troche, zdejmijcie ten art bo zle praktyki wprowadza


Dodaj komentarz:


Temat:
Twój nick:
Komentarz:
 

Prosimy o kulturę wypowiedzi. Komentarze zawierające niecenzuralne zwroty, bądź obrażające inne osoby będą usuwane. Kod HTML w wypowiedziach jest niedozwolony. Wydawca nie odpowiada za treść komentarzy.