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

TABLICE w HTML

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

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ą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

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

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'

Hymn1	Hymn2
Hymn3	Hymn4

Hymn1	Hymn2
Hymn3	Hymn4

Hymn1 Hymn2

ax bx

błąd, jeszcze raz:

Hymn1	Hymn2
ax	bx

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.

Hymn1	Hymn2
Hymn3	Hymn4

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

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ść.

Hymn1	Hymn2
Hymn3	Hymn4

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

Hymn1	Hymn2
Hymn3	Hymn4

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.

Kolor	tej tabeli
to #99ff66	to #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.