[HTML] Szerokość i wysokość komórki tabeli

HTML to podstawy w dziedzinie tworzenia stron WWW, Style CSS warto opanować, bowiem za ich pomocą można dostosować odpowiednio wygląd swojej witryny WWW. Zagłębiamy się dalej i udostępniamy w tym forum możliwość zadawania pytań o JavaScript.
ODPOWIEDZ
marb
Posty: 4
Rejestracja: czw lis 10, 2005 11:44 pm

[HTML] Szerokość i wysokość komórki tabeli

Post autor: marb »

Witam.
Mam dwa pytania:
Dlaczego jak ustawie szerokość komórki w tabeli na 1px i zastosuje background="plik.jpg" dla tej komórki to nie zachowuje ona określonej szerokości, a w przypadku gdy ten sam obrazek wstawie używając img jest ok?
Jak uzyskać wysokość komórki rzędu 2-5px? Teraz pomimo, że nadaje jej taką wysokość i tak jest wyższa?
Stig
Administrator
Posty: 938
Rejestracja: pn paź 04, 2004 10:52 am

Re: [HTML] Szerokość i wysokość komórki tabeli

Post autor: Stig »

marb pisze:Dlaczego jak ustawie szerokość komórki w tabeli na 1px i zastosuje background="plik.jpg" dla tej komórki to nie zachowuje ona określonej szerokości, a w przypadku gdy ten sam obrazek wstawie używając img jest ok?
Każdy element podrzędny (w tym przypadku img), którego wymiary są większe od wymiarów elementu nadrzędnego (w tym przypadku td) powoduje powiększenie o odpowiednią wartość elementu nadrzędnego w danym wymiarze.

Ustawienie tła jest użyciem atrybutu - nie elementu, i wtedy ta własność, rzecz jasna, nie zachodzi - element, któremu nadaliśmy tło zachowują swoją określoną (czy to przez odpowiednie atrybuty, czy to przez elementy podrzędne) wielkość.
marb pisze:Jak uzyskać wysokość komórki rzędu 2-5px? Teraz pomimo, że nadaje jej taką wysokość i tak jest wyższa?
Aby komórka miała określoną wysokość należy nadać jej atrybut height z rządaną wartością, ale należy pamiętać, to o czym wyżej wspomniałem, że wysokość ta zostanie powiększona zawsze wtedy, gdy wysokość któregolwiek elementu podrzędnego będzie większa od definiowanej.

Pewnym rozwiązaniem problemu może być użycie dla elementu z definiowaną wielkości (w tym przypadku td) CSS'owego atrybutu overflow, z wartością inną od visible - czyli hidden, scroll lub auto.
marb
Posty: 4
Rejestracja: czw lis 10, 2005 11:44 pm

Re: [HTML] Szerokość i wysokość komórki tabeli

Post autor: marb »

Stig pisze: Każdy element podrzędny (w tym przypadku img), którego wymiary są większe od wymiarów elementu nadrzędnego (w tym przypadku td) powoduje powiększenie o odpowiednią wartość elementu nadrzędnego w danym wymiarze.
Obrazek, który próbowałem użyć jako tło także miał 1 piksel szerokość, więc nie powinien rozszerzać komórki (wysokść chyba w tym przypadku nie jest ważna), zresztą nawet bez użycia parametru background pusta komórka i tak zajmuje więcej niż 1 piksel szerokości...
Stig pisze: Aby komórka miała określoną wysokość należy nadać jej atrybut height z żądaną wartością, ale należy pamiętać, to o czym wyżej wspomniałem, że wysokość ta zostanie powiększona zawsze wtedy, gdy wysokość któregolwiek elementu podrzędnego będzie większa od definiowanej.
Gdy w komórce znajduje sie tylko niełamalna spacja, co nadaje jej wysokość większą od ustalonej?

--- edit ---
Podaje przykład:
http://gandalf.mac.edu.pl/~bielski/przyklad1.htm
Obrazek ma wymiary 1x28, czyli takie same jak powinna mieć komórka, a mimo to rozszerza się ona :(
Stig
Administrator
Posty: 938
Rejestracja: pn paź 04, 2004 10:52 am

Re: [HTML] Szerokość i wysokość komórki tabeli

Post autor: Stig »

W przypadku swojej tabeli zapomniałeś o wyzerowaniu wartości atrybutów cellspacing i cellpadding, co powoduje zmianę wielkości komórki. Także błędne zastosowanie twardej spacji (jak poprawnie używać twardej spacji?) powoduje jej poszerzenie. Poza tym, tło komórce nalałoby nadać przez atrybut CSS, nie HTML, gdyż ta właściwość powinna odnosić się do warstwy prezentacji. Cała tabela powinna wyglądać tak:

Kod: Zaznacz cały

<table width="1" height="28" cellpadding="0" cellspacing="0">
<tr><td style="background-image: url(1.jpg);"></td></tr>
</table>
BTW, JPG to format powstały z myślą o plikach w postaci zdjęć. Dla elementów graficznych stron www należy stosować format PNG, ewentualnie GIF.

Inna sprawa, to pytanie, czy użyta przez Ciebie tabela służyć będzie do przekazywania danych tableracznych. Jeżeli nie to ten sam efekt można uzyskać wyłącznie przez użycie jednego elementu blokowego np. div. Przykład:

Kod: Zaznacz cały

<div style="width: 1px; height: 28px; background-image: url(1.jpg);"></div>
ODPOWIEDZ