Narzędzia - Edytor tabel

Edytor tabel to rozbudowane narzędzie pozwalające na tworzenie tabel w dość wygodny sposób. Narzędzie składa się z kilku zakładek, na których ustala się poszczególne elementy tabeli.

Okno Edytora tabel uruchomisz z poziomu Menu głównego / Narzędzia / Tabele / Edytor Tabel, a także z paska narzędzi Tabele i formularze. Domyślny skrót klawiszowy uruchamiający to okno to Ctrl+T.

Zakładka ustawienia tabeli

Na tej zakładce ustalisz podstawowe informacje o tworzonej tabeli, a także styl dla znacznika <table>. Znajdziesz tutaj trzy grupy ustawień:

Grupa Podstawowe ustawienia dotyczy ustalania wymiarów i zawiera następujące ustawienia:

Ilość kolumn w tabeli
W tym polu określasz z ilu kolumn będzie się składać tabela.

Ilość wierszy w tabeli
W tym polu określasz z ilu wierszy będzie się składać tabela.

Szerokość tabeli
W tym polu wprowadź szerokość tabeli w punktach. Jeśli chcesz, aby wprowadzona wartość określała szerokość procentową względem okna przeglądarki, zaznacz przełącznik oznaczony jako "%".

Obramowanie tabeli
To pole określa grubość obramowania tabeli. Zaznacz przełacznik obok, aby niezależnie od wartości w tym polu zawsze umieszczać ten atrybut w znaczniku TABLE.

Zawsze wstawiaj ten atrybut
Zaznacz ten przełacznik, aby niezależnie od wartości w polu obok zawsze umieszczać atrybut w znaczniku TABLE.

Margines komórek (cellpadding)
Wartość wprowadzona do tego pola określa rozmiar pustej przestrzeni pomiędzy obramowaniem komórki, a jej zawartością. Inaczej mówiąc margines wewnętrzny. Zaznacz przełacznik obok, aby niezależnie od wartości w tym polu zawsze umieszczać ten atrybut w znaczniku TABLE.

Zawsze wstawiaj ten atrybut
Zaznacz ten przełacznik, aby niezależnie od wartości w polu obok zawsze umieszczać atrybut w znaczniku TABLE.

Odstęp między komórkami (cellspacing)
Wartość wprowadzona do tego pola określa rozmiar pustej przestrzeni pomiędzy obramowaniem tabeli, a obszarem wyświetlania komórki. Zaznacz przełacznik obok, aby niezależnie od wartości w tym polu zawsze umieszczać ten atrybut w znaczniku TABLE.

Zawsze wstawiaj ten atrybut
Zaznacz ten przełacznik, aby niezależnie od wartości w polu obok zawsze umieszczać atrybut w znaczniku TABLE.

Wstawiaj spację &nbsp; w pustych komórkach
Jeśli zaznaczysz ten przełącznik, przy generowaniu kodu HTML tabeli Pająk umieści we wszystkich pustych komórkach bez zawartości znak niełamliwej spaci &nbsp;.

Linie obramowania tabeli
Wartości tej listy określają sposób w jaki będą wyświetlane linie obramowania tabeli. Możliwe wartości to:

  • void - brak obramowań
  • above - tylko na górze
  • below - tylko na dole
  • hsides - na górze i na dole
  • vsides - po lewej i po prawej
  • lhs - tylko lewstronne obramowania (również komórek)
  • rhs - tylko prawostronne
  • box - wszystkie strony
  • border - wszystkie strony.

Widoczność obramowań
Wartości tej listy określają, które linie będą wyświetlane pomiędzy komórkami tabeli. Możliwe wartości to:

  • none - brak linii
  • groups - pomiędzy grupami
  • rows - tylko pomiędzy wierszami
  • cols - tylko pomiędzy kolumnami
  • all - ze wszystkich stron.

W grupie Opis i streszczenie tabeli ustalisz opis czyli rodzaj nagłówka tabeli wyświetlany nad tabelą, a także Streszczenie zawartości tabeli, czyli szerszy opis zawartości tabeli, który może być przydatny w przypadku przeglądarek dla osób niepełnosprawnych. Streszczenie może być np. odczytywane na głos przez taką przeglądarkę dla osób niedowidzących.

Grupa definicji stylu dla tabeli pozwala na przypisanie znacznikowi <table> odpowiednich stylów. Znajdziesz tutaj trzy pola pozwalające na określenie:

Definicja stylu
W tym polu określasz styl dla elementu umieszczanego w dokumencie. Przycisk obok uruchamia narzedzie edytora stylów umożliwiające stworzenie definicji stylu w przyjazny i wygodny sposób. Klikając tam możesz również modyfikować istniejący styl.

Wybór klasy
W tym polu podajesz identyfikator klasy przypisany znacznikowi. Rozwijana lista umożliwia dostęp do klas zdefiniowanych w bieżącym dokumencie oraz w dołączonych do niego zewnętrznych arkuszach stylów. Przycisk znajdujący się obok uruchamia narzędzie tworzenia nowej klasy.

Identyfikator elementu
Tutaj podajesz unikalny identyfikator tego elementu w dokumencie. Identyfikatory te mogą być wykorzystywane np. przy wykonywaniu skoków do określonych części strony bądź w skryptach.

Zakładka Ustawienia wierszy

Ta zakładka pozwala określenie wspólnych ustawień dla wybranych wierszy. Znajdziesz tutaj trzy grupy: Wiersze, Wyrównanie wiersza oraz Definicja stylu dla wiersza. Opiszemy je po kolei:

Grupa Wiersze wyświetla informacje o dostępnych wierszach w bieżącej tabeli. W dodatkowych kolumnach pokazywane są własności poszczególnych wierszy, które ustala się w kolejnych grupach.

Grupa Wyrównanie wiersza pozwala na ustalenie:

Wyrównanie w poziomie
Ten parametr określa wyrównanie zawartości komórek wiersza w poziomie o ile nie posiadają one własnej definicji wyrównania.

Wyrównanie w pionie
Ten parametr określa wyrównanie zawartości komórek wiersza w pionie o ile nie posiadają one własnej definicji wyrównania.

Grupa Definicja stylu dla wiersza pozwala na przypisanie znacznikowi <tr> odpowiadającemu wierszom odpowiednich stylów. Znajdziesz tutaj trzy pola pozwalające na określenie:

Definicja stylu
W tym polu określasz styl dla elementu umieszczanego w dokumencie. Przycisk obok uruchamia narzedzie edytora stylów umożliwiające stworzenie definicji stylu w przyjazny i wygodny sposób. Klikając tam możesz również modyfikować istniejący styl.

Wybór klasy
W tym polu podajesz identyfikator klasy przypisany znacznikowi. Rozwijana lista umożliwia dostęp do klas zdefiniowanych w bieżącym dokumencie oraz w dołączonych do niego zewnętrznych arkuszach stylów. Przycisk znajdujący się obok uruchamia narzędzie tworzenia nowej klasy.

Identyfikator elementu
Tutaj podajesz unikalny identyfikator tego elementu w dokumencie. Identyfikatory te mogą być wykorzystywane np. przy wykonywaniu skoków do określonych części strony bądź w skryptach.

Zakładka Komórki, ustawienia i treść

Ta zakładka prezentuje widok komórek tabeli i pozwala na określanie ustawień poszczególnych komórek jak i ich zawartości. Komórka, dla której wyświetlane są ustawienia, wyróżniona jest jaśniejszym kolorem. Ponadto, jeśli dla komórki zdefiniowany jest atrybut colspan, bądź rowspan z wartością większą od jeden (czyli łączenie komórek w poziomie i w pionie), komórki, które zostaną połączone z bieżąca komórką, zostają zablokowane i oznaczone kolorem ciemnoszarym.

Na zakładce, oprócz widoku uproszczonego komórek, są też trzy grupy ustawień. Dwie pierwsze "Ustawienia komórki" oraz "Definicja stylu komórki" znajdują się na zakładce "Ustawienia komórki". Trzecia grupa ustawień będzie widoczna po przełączeniu się do planszy "Zawartość komórki".

Plansza Ustawienia komórki

Elementy umieszczone w tej grupie pozwalają na określenie parametrów komórki dotyczących wyrównania i łączenia komórek. Znajdziesz tutaj następujące opcje:

Wyrównanie w poziomie
Ten parametr określa wyrównanie zawartości komórki w poziomie.

Wyrównanie w pionie
Ten parametr określa wyrównanie zawartości komórki w pionie.

Łączenie komórek w pionie (rowspan)
Ten parametr określa ile komórek w układzie pionowym jest łączone w jedną.

Łączenie komórek w poziomie (colspan)
Ten parametr określa ile komórek w układzie poziomym jest łączone w jedną.

Komórka jest nagłówkiem
Zaznacz ten przełacznik, aby zdefiniować, iż wybrana komórka jest komórką nagłówka tabeli.

Przypisz do wszystkich w kolumnie
Wypełnia tą samą treścią i ustawieniami wszystkie komórki wszystkich wierszy w wybranej kolumnie.

Przypisz do wszystkich w wierszu
Wypełnia tą samą treścią i ustawieniami wszystkie komórki w bieżącym wierszu.

Grupa Definicja stylu dla komórki pozwala na przypisanie znacznikowi <td> odpowiadającemu komórkom odpowiednich stylów. Znajdziesz tutaj trzy pola pozwalające na określenie:

Definicja stylu
W tym polu określasz styl dla elementu umieszczanego w dokumencie. Przycisk obok uruchamia narzedzie edytora stylów umożliwiające stworzenie definicji stylu w przyjazny i wygodny sposób. Klikając tam możesz również modyfikować istniejący styl.

Wybór klasy
W tym polu podajesz identyfikator klasy przypisany znacznikowi. Rozwijana lista umożliwia dostęp do klas zdefiniowanych w bieżącym dokumencie oraz w dołączonych do niego zewnętrznych arkuszach stylów. Przycisk znajdujący się obok uruchamia narzędzie tworzenia nowej klasy.

Identyfikator elementu
Tutaj podajesz unikalny identyfikator tego elementu w dokumencie. Identyfikatory te mogą być wykorzystywane np. przy wykonywaniu skoków do określonych części strony bądź w skryptach.

Plansza Zawartość komórki

Elementy ułatwiające edycję zawartości komórki tabeli znajdują się w trzeciej grupie ustawień. Staje się ona widoczna po kliknięciu w przycisk "Zawartość". Największym elementem jest pole edycyjne, w którym możesz wpisywać treść komórki. Możesz wprowadzać w nim treść, jaka pojawi się we wskazanej wyżej komórce tabeli, a także tutaj obrazki, odsyłacze, formularze, itp. Ułatwieniem są przyciski znajdujące się po lewej stronie pola edycyjnego.

Po wprowadzeniu zmian do ustawień wybranego wiersza należy wcisnąć przycisk Zaakceptuj zmiany wprowadzone do wiersza, aby zmiany zostały zapamiętane.

Zakładka Podgląd tabeli

Na tej zakładce możesz zobaczyć podgląd tabeli. Podgląd wyświetlany jest we wbudowanej przeglądarce MS Internet Explorer, a zatem prezentuje wygląd tabeli w ostatecznej formie. Obok obszaru podglądu znajduje się przycisk symulacji rozdzielczości pozwalający na zobaczenie jak będzie prezentować się tabela w różnych rozdzielczościach.

Podgląd kodu tabeli

Jeśli chcesz zobaczyć jak wyglądał będzie kod całej tabeli wygenerowany przez to narzędzie, zobacz na ostatnią zakładkę. Znajdziesz tam obok podglądu również przełączniki pozwalające na wybór formatowania prezentowanego kodu. Może to być HTML pisany wielkimi literami, HTML pisany małymi lub XHTML. Dodatkowo możesz włączyć zawijanie wierszy na podglądzie.

Wstawianie tabeli

Jeśli zechcesz wstawić tabelę, uzyj przycisku OK po prawej stronie okna. Pod przyciskiem znajduje się menu, które pozwala na wstawienie kodu w różnym formatowaniu: HTML wielkie litery, HTML małe litery oraz XHTML. Domyślnie po wciśnięciu przycisku OK wstawiany jest kod HTML małymi literami.

Pokrewne tematy

Do góry