Dreamweaver 3.0 – práce s tabulkami

12. října 2000

V další kapitole našeho seriálu se ponoříme do tvorby vlastního dokumentu. Ukážeme si, jak se vytváří ve vizuálním editoru Dreamweaver 3.0 základní element každé stránky – tabulka.

Vytváříme tabulku

Do dokumentu lze tabulku vložit několika způsoby – buď v nabídce Insert klikneme na položku Table, nebo vybereme příslušnou ikonku z paletky Objects. V obou případech dojde k zobrazení dialogu, ve kterém nastavíme počet řádků (rows), sloupců (columns), šířku (width), orámování (border) a hodnoty parametrů cellpadding (odstup obsahu buňky od orámování) a cellspacing (mezera mezi jednotlivými buňkami). Při tvorbě další tabulky se nám poté implicitně zobrazí hodnoty, které jsme nastavili pro posledně vytvářenou tabulku. Proto pro případ, že tvoříte více stejných tabulek, doporučuji vypnout volbu Show Dialog When Inserting Objects v dialogu Preferences (nabídka Edit) – ušetříte si tak čas odklikáváním již zbytečného dialogového okna.

Může se stát, že jste jste si tabulku špatně rozvrhli, a teď vám chybí jeden či více sloupců (řádků). Nevěšte hlavu, nic není ztraceno – stačí se v tabulce přesunout na požadované místo a zvolit položku Insert Rows or Columns v nabídce Modify – Table. V dialogu poté nastavíte, kolik sloupců (řádků) a kam (před či za aktivní buňku) chcete umístit.

Pohyb v tabulce

Ač se to na první pohled nezdá, i pohyb v tabulce není zas až tak jednoduchý. Klasickou klávesu Tab (pohyb o buňku v před) či klávesovou kombinaci Shift+Tab (pohyb o buňku zpět) není snad nutné nikomu představovat. Zajímavější to však bude se selekcí buněk. Pro označení sousedících doporučuji využít myš – stiskněte a držte levé tlačítko myši při přesunu nad požadovanou oblastí. Problém však nastane v případě nesousedících buněk – zde využijte z metodu známou tabulkových procesorů – označování za současného stisku klávesy Ctrl.

Vkládáme data

Do buněk můžeme vkládat v podstatě libovolné objekty (s omezením plynoucím ze standartu HTML). Já se zde vzhledem k omezenému rozsahu omezím pouze na vkládání textových údajů.

Při vkládání textu ze schránky vždy nezapomeňte zvolit volbu Paste as text – tím zaručíte celistvost odstavců. V případě delších textových dat (krásným příkladem budiž ceník exportovaný z tabulkového procesoru) doporučuji využít možnosti importu – nabídka Insert, položka Tabular data. Při jejím výběru se zobrazí následující dialog:

Zde pak jen stačí zvolit jméno souboru (Data File) a oddělovač (Delimiter). Pro upřesnění můžete taktéž doplnit další parametry: šířku tabulky – dle importovaných dat (Fit To Data) nebo dle vašich preferencí (Set), formátování prvního řádku (Format Top Row) a v neposlední řadě hodnoty cellspacing, cellpadding a border.

Formátujeme tabulku

K pohodlnému formátování žádaných oblastí tabulky slouží paletka Property inspector – zde však pozor: implicitně zobrazuje jen základní parametry, pro podrobnější klikněte na ikonku se šipkou v levém dolním rohu paletky.

Myslím, že není nutné se rozepisovat o jednotlivých parametrech – jejich názvy jsou dostatečně intuitivní a popis naleznete v každé referenční příručce jazyka HTML. Komentář si dle mého soudu zaslouží spíše speciální formátovací funkce integrované v programu.

Zajímává je bezesporu možnost automatického formátování tabulky, známá mj. z různých textových či již zmiňovaných tabulkových editorů. Pro její aktivaci zvolte – po označení tabulky – v nabídce Commands položku Format table. V dialogu si pak můžete vybrat žádané schéma či jej přímo upravit k obrazu svému. Představme si však situaci, kdy chceme několik řádek spojit či naopak jeden sloupec rozdělit na tři. V těchto případech nám pomůžou položky Split Cell (spojit buňky ) a Merge Cell (rozdělit buňky) nabídky Modify – Table (obě lze také aktivovat v paletce Property inspector, jejich ikonky najdete v levé dolní části). V dialogu si zvolíte příslušný počet buněk, na které se má buňka rozdělit (či spojit) a zda ji dělení provést do řádku či do sloupce.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.

Předchozí článek JavaScript - úvod do proměnných
Další článek DHTML scriptmania
Štítky: Články

Mohlo by vás také zajímat

Nejnovější

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *