-
14696 -
11880 -
101970 -
8532
139099 plików
1711,44 GB
Tabelki z tłem, dopasowujące swoją szerokośc i wysokość do wpisanego tekstu.
Ramki.
Innym ciekawym zastosowaniem tabel może być tworzenie za pomocą nich "ramek" z zaokrąglonymi bądź ściętymi rogami.
Lepszym rozwiązaniem będzie użycie CSS, ponieważ tabele nie zostały zaprojektowane z myślą o tworzeniu efektów graficznych na stronach. Niemniej można wykorzystać tabele z tłem graficznym do w miarę prostego tworzenia ramek.
lub
Dobrze jest też, utworzyć sobie w dowolnym programie graficznym rysunek o roziarze 1x1 pikseli z przezroczystym tłem. Tutaj jest taki gotowy obrazek: (w celu ułatwienia skopiowania jest sztucznie powiększony oraz dodałem obramowanie).
Następnie tworzymy tabelę z trzema kolumnami i trzema wierszami. W komórkach narożnych wstawiamy narysowane wcześniej obrazki, natomiast w pozostałych komórkach ustalamy kolor tła, taki sam jak kolor rysunków narożników i umieszczamy przezroczysty obrazek. W komórce centralnej zamiast umieszczenia przezroczystego obrazka, wpisujemy właściwą treść tabelki:
A Oto Efekt jaki otrzymamy:
Tabelka Rogi okrągłe. Kolor Tła:#008080.
Tabelka z zaokrąglonymi rogami. To jest druga linia w komórce centralnej. To jest już trzecia linia w komórce centralnej. | ||
Oto Kod dla Takiej Tabelki:
<table cellpadding="0" cellspacing="0"><tr><td style="line-height:1px;"><img src="/ImagePreview.aspx?id=999057642" alt="LG.gif" /></td><td bgcolor="#3b9c94" style="line-height:1px;"><img src="/ImagePreview.aspx?id=994857193" alt="0.gif" /></td><td style="line-height:1px;"><img src="/ImagePreview.aspx?id=999057550" alt="PG.gif" /></td></tr><tr><td bgcolor="#3b9c94"><img src="/ImagePreview.aspx?id=994857193" alt="0.gif" /></td><td bgcolor="#3b9c94" style="padding-right:15px;padding-left:15px;color:#FFFF00;font-size:20px;font-family:'Monotype Corsiva', 'Times New Roman', Arial, Helvetica, Courier;"><b><br />
Tabelka z zaokrąglonymi rogami.<br />
To jest druga linia w komórce centralnej.<br />
To jest już trzecia linia w komórce centralnej.</b><br /><br />
</td><td bgcolor="#3b9c94"><img src="/ImagePreview.aspx?id=994857193" alt="0.gif" /></td></tr><tr><td style="line-height:1px;"><img src="/ImagePreview.aspx?id=999059042" alt="LD.gif" /></td><td bgcolor="#3b9c94" style="line-height:1px;"><img src="/ImagePreview.aspx?id=994857193" alt="0.gif" /></td><td style="line-height:1px;"><img src="/ImagePreview.aspx?id=999057598" alt="PD.gif" /></td></tr></table>
Tabelka z zaokrąglonymi rogami. To jest druga linia w komórce centralnej. To jest już trzecia linia w komórce centralnej. | ||
Oto Kod dla Takiej Tabelki:
<table cellpadding="0" cellspacing="0" rules="all"><tr><td style="line-height:1px;border-color:#FFFF00;"><img src="/ImagePreview.aspx?id=999057618" alt="LG.gif" /></td><td bgcolor="#ff6d55" style="line-height:1px;border-color:#FFFF00;"><img src="/ImagePreview.aspx?id=994857193" alt="0.gif" /></td><td style="line-height:1px;border-color:#FFFF00;"><img src="/ImagePreview.aspx?id=999057402" alt="PG.gif" /></td></tr><tr><td style="border-color:#FFFF00;" bgcolor="#ff6d55"><img src="/ImagePreview.aspx?id=994857193" alt="0.gif" /></td><td bgcolor="#ff6d55" style="border-color:#FFFF00;padding-right:15px;padding-left:15px;color:#FFFF00;font-size:20px;font-family:'Monotype Corsiva', 'Times New Roman', Arial, Helvetica, Courier;"><b><br />Tabelka z zaokrąglonymi rogami.<br />
To jest druga linia w komórce centralnej.<br />
To jest już trzecia linia w komórce centralnej.</b><br /><br />
</td><td bgcolor="#ff6d55" style="border-color:#FFFF00;"><img src="/ImagePreview.aspx?id=994857193" alt="0.gif" /></td></tr><tr><td style="line-height:1px;border-color:#FFFF00;"><img src="/ImagePreview.aspx?id=999057722" alt="LD.gif" /></td><td bgcolor="#ff6d55" style="line-height:1px;border-color:#FFFF00;"><img src="/ImagePreview.aspx?id=994857193" alt="0.gif" /></td><td style="line-height:1px;border-color:#FFFF00;"><img src="/ImagePreview.aspx?id=999057580" alt="PD.gif" /></td></tr></table>
Proszę Zauważyć, że aby otrzymać taki efekt wystarczy narysować cztery małe obrazki (w przykładzie o rozmiarach 10x10 pikseli), dzięki czemu nie spowalniają one zbytnio ładowania strony, a tabelka może mieć dowolne wymiary, które dostosują się same, w zależności od długości wpisanego w niej tekstu do komórki centralnej.
Ustalając różne kolory tła w odpowiednich komórkach tabeli, można również uzyskać np. taki efekt:
Tabelka z zaokrąglonymi rogami. To jest dwu kolorowa tabelka. | ||
Oto Kod dla Takiej Tabelki:
<table cellpadding="0" cellspacing="0"><tr><td style="line-height:1px;"><img src="/ImagePreview.aspx?id=999057642" alt="LG.gif" /></td><td bgcolor="#3b9c94" style="line-height:1px;"><img src="/ImagePreview.aspx?id=994857193" alt="0.gif" /></td><td style="line-height:1px;"><img src="/ImagePreview.aspx?id=999057550" alt="PG.gif" /></td></tr><tr><td bgcolor="#3b9c94"><img src="/ImagePreview.aspx?id=994857193" alt="0.gif" /></td><td bgcolor="#AFC7C7" style="padding-right:15px;padding-left:15px;color:#736AFF;font-size:20px;font-family:'Monotype Corsiva', 'Times New Roman', Arial, Helvetica, Courier;"><b>
Tabelka z zaokrąglonymi rogami.<br />
To jest dwu kolorowa tabelka.</b><br /><br />
</td><td bgcolor="#3b9c94"><img src="/ImagePreview.aspx?id=994857193" alt="0.gif" /></td></tr><tr><td style="line-height:1px;"><img src="/ImagePreview.aspx?id=999059042" alt="LD.gif" /></td><td bgcolor="#3b9c94" style="line-height:1px;"><mg src="/ImagePreview.aspx?id=994857193" alt="0.gif" /></td><td style="line-height:1px;"><img src="/ImagePreview.aspx?id=999057598" alt="PD.gif" /></td></tr></table>
A oto inne ciekawe efekty jakie można uzyskać w prosty sposób zmieniając wpisy w odpowiednich komórkach tabeli:
Tylko dwa zaokrąglone narożniki.
Umieszczone po przekatnej. | ||
Oto Kod dla Takiej Tabelki:
<table cellpadding="0" cellspacing="0"><tr><td style="line-height:1px;"><img src="/ImagePreview.aspx?id=999057642" alt="LG.gif>" /></td><td bgcolor="#3b9c94" style="line-height:1px;"><img src="/ImagePreview.aspx?id=994857193" alt="0.gif" /></td><td bgcolor="#3b9c94" style="line-height:1px;"><img src="/ImagePreview.aspx?id=994857193" alt="0.gif" /></td></tr><tr><td bgcolor="#3b9c94"><img src="/ImagePreview.aspx?id=994857193" alt="0.gif" /></td><td bgcolor="#3b9c94" style="padding-right:15px;padding-left:15px;color:#FFFF00;font-size:20px;font-family:'Monotype Corsiva', 'Times New Roman', Arial, Helvetica, Courier;"><b><br />Tylko dwa zaokrąglone narożniki.<br />
Umieszczone po przekatnej.<br /><br /></td><td bgcolor="#3b9c94"><img src="/ImagePreview.aspx?id=994857193" alt="0.gif" /></td></tr><tr><td bgcolor="#3b9c94" style="line-height:1px;"><img src="/ImagePreview.aspx?id=994857193" alt="0.gif" /></td><td bgcolor="#3b9c94" style="line-height:1px;"><img src="/ImagePreview.aspx?id=994857193" alt="0.gif" /></td><td style="line-height:1px;"><img src="/ImagePreview.aspx?id=999057598" alt="PD.gif" /></td></tr></table>
Zmiana atrybutu w "cellspacing" z wartości "0" na wartość "6", np.: w kodzie dla pierwszej tabelki, da taki oto efekt.
Tabelka z zaokrąglonymi rogami. To jest druga linia w komórce centralnej. To jest już trzecia linia w komórce centralnej. Zmiana w deklaracji tabeli, atrybutu "cellspacing", z takiego zapisu <table cellpadding="0" na taki <table cellspacing="4">. Da właśnie taki efekt. | ||
▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼
Można też zmienić kod koloru użytego w rysunku narożników i użyć takiego samego kodu koloru, dla tła we wszystkich komórkach tabeli, aby zmienić kolor całej tabelki, należy zmienić wartość atrybutu 'bgcolor' dla komórek tabelki.
Przypominam, że należy przy tym pamiętać, o zmianie koloru czcionki używanej do wyświetlenia treści tekstowej w tabelce, aby był kontrastowy (dobrze widoczny) w stosunku do koloru tła tabelki.
W tym folderze zamieściłem też, dla mniej zaawansowanych w tworzeniu i/lub kopiowaniu z treści tego opisu plików z obrazkami narożników do tworzenia takich tabelek. Dodatkowo też umieściłem tam też plik o rozmiarach 1x1 pikseli z przezroczystym tłem potrzebny do budowania takich tabelek. Plik nazywa się zero.gif , a pliki narożników odpowiednio LG.gif, PG.gif, LD.gif, PD.gif
Pliki z narożnikami do tabelek w innych kolorach są w odpowiednich podfolderach.
Poprawiłem Kod tabelki z pomarańczowym tłem i białymi liniami, umieszczony w opisie.
Dodałem też poprawione pliki z narożnikami tabelki oraz plik ' 0.gif ' z bezbarwnym tłem o rozmiarze 1x1 px. |
Napisał: Saj5 Ostatnia Aktualizacja,
dnia: 08-01-2012r. |
- sortuj według:
-
0 -
6 -
0 -
0
6 plików
278 KB