Let's make the WebPerfect.pl

Kiedy zaczynałem swoją przygodę z tworzeniem stron WWW, do szczęścia brakowało mi tylko nauczyć się tworzenia tabelek. Wiem, że nie tylko ja miałem takie problemy. Postanowiłem więc przedstawić prosty przepis na stworzenie tabeli dla szkieletu strony www…

Skoro chcesz tworzyć strony WWW, na pewno widziałeś już wiele. Na pewno zauważyłeś już strony, które mają menu po lewej czy prawej stronie lub na górze albo na dole. Jest wiele sposobów, aby zbudować taką stronę – ja przedstawię jeden: tabele.

W poniższym artykule zostanie przedstawiony przykładowy szablon strony (krok po kroku zaprojektujesz i zbudujesz szkielet strony opartej na tabelkach). Wiedza ta powinna być dalej samodzielnie pogłębiana.

Projekt strony

Zanim weźmiesz się do pracy musisz wiedzieć, co chcesz zrobić. Na razie nie myśl o tematyce strony, ani co będziesz na niej zamieszczał. Na to przyjdzie jeszcze czas… Na razie przyda się mały trening, później zrobisz co zechcesz…

Co będzie potrzebne? :

• Kartka (A4, może być w kratkę),
• ołówek i/lub długopis,
• linijka.

Jak widać nie potrzebujesz tutaj żadnego programu…

Poniżej zobaczysz rysunek, który wykonałem w programie graficznym. Tobie zlecam wykonanie tego rysunku za pomocą w/w narzędzi. Za pomocą tych narzędzi wykonuję każdy projekt strony, którą buduję…

Rys. 1 Projekt strony opartej na tabelkach

Projekt strony warto też opisać. Jak widać na rysunku wyszczególniłem pewne miejsca: (nagłówek), (menu), (tabela główna), (menu_2), (stopka).

Przykładowy opis, jaki można wykonać pod rysunkiem:

• (nagłówek) – miejsce na logo strony. Powinien mieć X kolor oraz Y efekty. Po lewej stronie nazwa witryny umieszczona w logo. Prawa strona zarezerwowana jest na banner reklamowy.
• (menu) – miejsce na menu główne strony. Zostaną tutaj umieszczone dodatkowe tabele z linkami do działów i podstron.
• (menu_2) – miejsce dodatkowe. Mogą znaleźć się tutaj odnośniki do partnerów, wyszukiwarka, ankiety, etc…
• (tabela główna) – główny tekst strony, czyli właściwa strona. Odpowiednia treść prezentowana przez podstronę lub dział.
• (stopka) – element zakończeniowy. Miejsce na drobne informacje, np. na temat praw autorskich strony. Możliwe dodatkowe linki pomocnicze takie, jak .np. kontakt czy reklama.

Opis projektu powinien być bardziej obszerny. Najlepiej opisać wszystko co ma być uwzględnione w jego realizacji. Tym razem skupimy się tylko na tabelkach.

Tematowi projektowania stron internetowych na pewno poświęcę dodatkowy artykuł…

Podstawowe wiadomości o tabelkach

Z tabelami na pewno już nie jeden raz spotkałeś się w wielu kursach HTML-a. Postanowiłem jednak przypomnieć kilka rzeczy podstawowych.

Podstawowym znacznikiem każdej tabeli jest <TABLE> ... </TABLE>. Dodatkowo można w nim uwzględnić kilka parametrów, np. szerokość, wysokość, odległość między komórkami itp…

Pomiędzy znacznikami <table> należy umieścić przynajmniej jedną komórkę. Zanim jednak to nastąpi trzeba zaznaczyć rząd (wiersz). Rząd tabeli można zaznaczyć znacznikiem <tr> (ang. Table Row). Zatem kolejne znaczniki to <tr> ... </tr>.

Po między tymi znacznikami umieszczamy znacznik komórki tabelki <td> ... </td>. Z kolei pomiędzy tymi znacznikami umieszczamy treść.

<table>
  <tr>
    <td>
        ... Treść ...
    </td>
  </tr>
</table>

Parametry

Dodatkowo można ustawić pewne parametry dla tabelek i ich komórek. Przykładowo znacznik:

<table cellspacing="0" cellpadding="0" border="0" width="400">

… będzie oznaczał, że tabelka ma nie zawierać odstępów pomiędzy komórkami oraz w nich. Obramowania również ma nie być, natomiast szerokość tabeli to 400px.

Dobrym nawykiem jest stosowanie stylów CSS:

<table style="border: #000000 1px solid; padding: 3px; margin: 0px; width: 400px;">

Wszystko zależy od tego, co ma zostać osiągnięte.

Osobne ustawienia można wykonać dla komórek <TD>.

Komórka obok komórki

Dla naszego przykładu konieczne będzie wykonanie kilku kolumn (bez przechodzenia do nowego wiersza). Nie będzie to zadanie trudne.

Chodzi tylko o to, aby wszystkie komórki danego wiersza (rzędu) zostały umieszczone pomiędzy jego znacznikami. Myślę, że lepiej wytłumaczę to na przykładzie:

<table>
  <tr>
    <td> komórka nr 1 </td> <td> komórka nr 2 </td>
  </tr>
  <tr>
    <td> komórka nr 3 </td> <td> komórka nr 4 </td>
  </tr>
</table>

Efekt może wyglądać następująco (po zastosowaniu stylów):

Przy takiej konstrukcji tabelki należy pamiętać, że ilość komórek kolejnego rzędu musi być taka sama, jak ilość komórek rzędu pierwszego.

Kombinacje

Poprzednia konstrukcja nie daje nam jeszcze możliwości wdrożenia naszego projektu. Co prawda przy odrobinie wyobraźni można spróbować (tworząc tabelki w komórkach). Jest jednak lżejsze rozwiązanie.

Można określić rozmiar danej komórki jako sumę rozmiarów komórek kolejnego rzędu.

Do realizacji tego celu należy posłużyć się parametrem colpan="n", gdzie n to liczba obejmowanych komórek.

Powyższy przykład można zrealizować w następujący sposób:

<table>
  <tr>
    <td colspan="2"> komórka nr 1 + komórka nr 2 (bez przerwy) </td>
  </tr>
  <tr>
    <td> komórka nr 3 </td> <td> komórka nr 4 </td>
  </tr>
</table>

Jak widać ograniczamy ilość użytego znacznika <TD>.

W alternatywny sposób można spowodować, że dana komórka będzie obejmować dwa wiersze.

W tym celu należy posłużyć się parametrem rowspan="n". Należy też pamiętać, że podana w parametrze wartość ma być równa ilości wierszy, które chcemy wziąć w objęcia. Niemniej jednak nie można podawać wartości przekraczającej ilość wierszy, bo może to spowodować błędy w wyświetlaniu.

<table>
  <tr>
    <td rowspan="2"> komórka nr 1 + komórka nr 3 (bez przerwy) </td>
   <td> komórka nr 2 </td>
  </tr>
  <tr>
    <td> komórka nr 4 </td>
  </tr>
</table>

W powyższym przykładzie warto zauważyć, że znika komórka nr 3 na rzecz komórki nr 1.

To rozwiązanie nie przyda się jednak w naszym projekcie…

Realizacja projektu

Teraz wystarczy usiąść chwilę i zastanowić się. Spójrz na rysunek.

Musisz stworzyć tabelkę o trzech kolumnach i trzech rzędach. Rząd górny musi zawierać komórkę o rozmiarze trzech komórek rzędu środkowego. To samo tyczy się ostatniego wiersza.

Należy również wykonać czarne obramowanie o szerokości 1px. Do tego warto użyć stylów (border-left: #000000 1px solid; border-right: ...; border-top: ...; border-bottom: ...; itd…).

Poniżej przedstawię tylko szkielet projektu (style musisz dopisać sam – wszystkie niezbędne wiadomości znajdują się w tym artykule)…

<table cellspacing="0" cellpadding="0" style="width: 800px;
border: #000000 1px solid;">
  <tr>
    <td colspan="3" style="width: 800px; border-bottom: #000000 1px solid;">
      (nagłówek)
    </td>
  </tr>
  <tr>
    <td style="width: 120px; border-right: #000000 1px solid;"> (menu) </td>
    <td style="width: 560px; border: 0;">
      (tabela główna)
    </td>
    <td style="width: 120px; border-left: #000000 1px solid;"> (menu_2) </td>
  </tr>
  <tr>
    <td colspan="3" style="width: 800px; height: 20px;
border-top: #000000 1px solid;">
      <span style="font-size: 10px;">(stopka)</span>
    </td>
  </tr>
</table>

Tak właśnie może wyglądać szkielet Twojej strony. Reszta zależy już tylko od Twojej wyobraźni. Pamiętaj, że w komórkach możesz zagnieżdżać dodatkowe tabelki oraz bloki DIV.

Podsumowanie

Tabele w języku HTML tworzy się bardzo łatwo. Aby uniknąć niepotrzebnych problemów, warto je najpierw zaprojektować. Projekt tabeli powinien składać się co najmniej z rysunku i jego opisu. Projekt najlepiej wykonywać na kartce papieru.

Do realizacji projektu przydadzą się podstawowe wiadomości o HTML-u oraz CSS.

Pamiętaj, że to od Twojej wyobraźni zależy, w jaki sposób wykorzystasz powyższy wiadomości. W każdym razie, przedstawione wyżej informacje pozwalają na stworzenie dobrego szkieletu strony WWW.

Tagi: css, html, komórka, menu, nagłówek, obramowanie, parametry, projekt, stopka, style, tabelki, table, td, tr, układ.