Przejdź do zawartości

Wikipedystka:Ludmiła Pilecka/Tablice HTML

Z Wikipedii, wolnej encyklopedii

Może się przydać, a jak ma wylecieć

TABLICE w HTML

[edytuj | edytuj kod]

Wszystko jest proste i logiczne.

<table> - znacznik otwierający tabelę "tu zaczyna się definicja tablicy"

</table> - znacznik zamykający tabelę "tu konczy się definicja tablicy"

<tr> - znacznik otwierający nowy wiersz tabeli "tu się zaczyna nowy/następny wiersz tabeli"

</tr> - znacznik zamykający wiersz tabeli "tu się kończy wiersz tabeli"

<td> - znacznik otwierający pojedynczą komorkę tabeli

</td> - znacznik zamykający pojedynczą komorkę tabeli

TEKST mający znaleźć się w komorce musi być zawarty między <td> i </td>

KOMÓRKA musi się znajdować w wierszu tabeli

WIERSZ TABELI musi się znajdować między <table> i </table>

PRZYKŁAD PROSTEJ TABELI

[edytuj | edytuj kod]
KOMÓRKA 1 WIERSZ 1 KOMÓRKA 2 WIERSZ 1
KOMÓRKA 1 WIERSZ 2 KOMÓRKA 2 WIERSZ 2
Teraz twoja kolej
Hymn królewski-God Save.. Hymn państwowy-O Canada
Hymn królewski-X Hymn narodowy-Y
hymn1 Hymn2
hymn3 Hymn4

Lekcja 2: Wcięcia

Teraz twoja kolej


Dziękuję, tym razem zrozumiałam i samodzielnie wykonałam obydwa ćwiczenia. Jeśli po "table" nie napisze się: border="1"" tabela nie powstanie, ale na innych stronach widzialam inne określenie po "table". Co ono znaczy? I proszę, udziel mi jeszcze lekcji drugiej (zob. wyżej). Pytałeś o system op. i przeglądarkę: Windows 98 i Internet Explorer. Andrychowska 00:00, 7 lis 2003 (CET)[odpowiedz]


Nauka musi postępować powoli żeby ci się zawrócić w głowie ;-)

Teoria

[edytuj | edytuj kod]

Edytując strony w Wikipedii, możemy posługiwać się większością znaczników języka służącego do tworzenia stron internetowych (HTML). Jednak preferowaną metodą jest stosowowanie znaczników własnych Wikipedii, które są o wiele łatwiejsze do zrozumienia (intuicyjne) dla osób bez wykształcenia technicznego (np. ja). Są to wytłuszczenia, italik itd.
W pewnych sytuacjach przy edycji stron Wikipedii nie możemy się obyć bez znaczników HTML (jak to widać przy tworzeniu tabel).

Praktyka

[edytuj | edytuj kod]

Tworzona przez nas tabela może mieć pewne dodatkowe własności poza ustaleniem ilości wierszy i komórek w wierszach oraz czy ma mieć ramki.

PRZYKŁAD: USTALANIE SZEROKOŚCI

[edytuj | edytuj kod]
KOMÓRKA 1 WIERSZ 1 KOMÓRKA 2 WIERSZ 1
KOMÓRKA 1 WIERSZ 2 KOMÓRKA 2 WIERSZ 2
KOMÓRKA 1 WIERSZ 1 KOMÓRKA 2 WIERSZ 1
KOMÓRKA 1 WIERSZ 2 KOMÓRKA 2 WIERSZ 2
KOMÓRKA 1 WIERSZ 1 KOMÓRKA 2 WIERSZ 1
KOMÓRKA 1 WIERSZ 2 KOMÓRKA 2 WIERSZ 2
KOMÓRKA 1 WIERSZ 1 KOMÓRKA 2 WIERSZ 1
KOMÓRKA 1 WIERSZ 2 KOMÓRKA 2 WIERSZ 2

W wyżej zamieszczonych przykładach widać jak można ustalić szerokość tabeli.
<table> to tylko znacznik otwierający, można w nim umieścić dodatkowe informacje dotyczące jego właściwości (w tym wypadku te dodatkowe informacje odniosą skutek dla całej tabeli).

width oznacza szerokość, przypisujemy jej wartość procentowo lub w pikselach.

border oznacza ramka, liczba oznacza ilość pikseli. border="0" usunie ramki

align oznacza justowanie tabeli i może mieć np. wartości align="center" czyli tabela wycentrowana. Gdy nie podamy będzie justowana w lewo.

To na razie tyle. Proszę przećwiczyć ten materiał. Jutro klasówka ;-)

'Zadanie domowe'

Hymn1Hymn2
Hymn3Hymn4


Hymn1Hymn2
Hymn3Hymn4
Hymn1 Hymn2 ax bx

błąd, jeszcze raz:


Hymn1Hymn2
axbx
Moim zamiarem było utworzyć taką tabelę, która jest przedzielona na pół pionowo(czyli osobne komórki to:Hymn1 i Hymn2), natomiast chciałam, aby komórki Hymn1 i Hymn2 miały drugi wiersz pod spodem, czyli aby nie było poziomej kreski - gdzie popełniłam błąd?
Hymn1
ax
Hymn2
bx
Spróbowałam jeszcze raz, wzorowałam się na Twoim trzecim przykładzie.
Z pozostałymi wzorami tabel nie mam kłopotów.
Hymn1Hymn2
Hymn3Hymn4
Mam jeszcze jedno pytanie: nie widzę różnicy czy napiszę border="1" czy border="2". Zero przećwiczyłam.
No cóż. Nie wiem, dlaczego moje pytanie "wyszło" w pionie. I pozostał "ogon" w postaci początku tabeli. Andrychowska 15:56, 7 lis 2003 (CET)[odpowiedz]

Ciekawe, dlaczego w "Edytuj" wszystko wygląda normalnie.

KOLORY

[edytuj | edytuj kod]

Na początek 2 uwagi na marginesie.
Trzeba uważać jak się wpisuje bo jedna literówka może zepsuć wszystko.
Może jestem purystą, ale wartości lepiej wpisywać w cudzysłowach width="100%" itp

Uwagi co pracy domowej
aby w danej komórce wymusić przejście do nowej linii należy użyć <br/>. Inaczej przejście do nowej linii następuje automatycznie gdy tekst się nie mieści w komórce na szerokość.

Hymn1Hymn2
Hymn3Hymn4

Powyższa tabela uzyskała kolor żółty po dodaniu bgcolor="yellow".

Hymn1Hymn2
Hymn3Hymn4

Jest pewna liczba predefiniowanych nazw kolorów (po ang.), które można tu użyć. Poza tym można stosować kolory podawane liczbowo np. #99ff66 - są to 3 wartośći, po dwie liczby heksydecymalne dla kolorów: czerwonego zielonego i niebieskiego.

Kolortej tabeli
to #99ff66to #99ff66

Warto używać 216 wartości określanych jako websafe colors, masz wtedy większe prawdopobieństwo, że kolor będzie taki jaki zamierzałaś na komputerach różnych użytkowników.

Nazwy kolorów dopuszczonych i paletę websafe colors znajdziesz w WWW - Wszechnicy Wiedzy Wszelakiej.

Praca domowa - eksperymentuj i baw się dobrze

Polecam stronę webmaster.helion.pl , w dziale "Kolory" znajdziecie ładną rozpiskę kolorów a w dziale "Tabele" obszerny kurs tworzenia tabel w jezyku HTML.