L e k c e Φ. 4 - Tabulky

Postoupili jste do ΦtvrtΘ - zßv∞reΦnΘ lekce, ve kterΘ se seznßmφme se zajφmavou problematikou tabulek. Jde o velmi obsßhlΘ a vyΦerpßvajφcφ tΘma, proto jsme lekci rozd∞lil na 13 tematick²ch celk∙ a ty umφstili na samostatnΘ strßnky. P°ejeme Vßm hodn∞ zdaru a te∩ zaΦφnßme ... rozcestnφkem:

1. Co jsou a k Φemu slo₧φ tabulky
2. Zßkladnφ tabulka
3. OhraniΦenφ tabulky
4. BarevnΘ ohraniΦenφ tabulky
5. Pozadφ tabulky, °ßdku a bu≥ky
6. Odsazenφ obsahu bu≥ky od jejφho ohraniΦenφ
7. Odsazenφ mezi jednotliv²mi bu≥kami
8. Zarovnßnφ ve vodorovnΘm sm∞ru
9. Zarovnßnφ ve svislΘm sm∞ru
10. Nastavenφ Üφ°ky a v²Üky tabulky, °ßdku a bu≥ky
11. Nestandardnφ v²Üka a Üφ°ka bu≥ky
12. Vno°ovßnφ tabulek
13. Slo₧it∞jÜφ tabulky

2. Zßkladnφ tabulka

Abychom v∙bec mohli n∞jakou tabulku vytvo°it pot°ebujeme znßt p°edevÜφm t°i zßkladnφ tagy. Mate°sk² tag tabulky <TABLE> a jeho ukonΦovacφ zßpis </TABLE>, tag vymezujφcφ °ßdky tabulky <TR> a samoz°ejm∞ </TR> a nakonec tag, pomocφ kterΘho tvo°φme na °ßdcφch bu≥ky, <TD> a </TD>. Tyto t°i tagy jsou ty nejd∙le₧it∞jÜφ. Specifikace tabulek HTML sice obsahuje n∞kolik dalÜφch tag∙ (nap°. <THEAD>, <TBODY>, atd.), ale bez t∞ch se ka₧dß tabulka obejde, a proto se o nich nebudeme v∙bec zmi≥ovat.

Nynφ si vytvo°φme zßkladnφ tabulku a na nφ si vÜe vysv∞tlφme.

<TABLE border="1">
 <TR>
  <TD>1.°ßdek, 1.bu≥ka</TD>
  <TD>1.°ßdek, 2.bu≥ka</TD>
 </TR>
 <TR>
  <TD>2.°ßdek, 1.bu≥ka</TD>
  <TD>2.°ßdek, 2.bu≥ka</TD>
 </TR>
</TABLE>

V²sledek zdrojovΘho k≤du:

Jist∞ jste si vÜimli r∙znΘho odsazenφ odliÜn²ch tag∙ tabulky - <TABLE>, <TR> a <TD>. Tφmto postupem dosßhneme p°ehledn∞jÜφho uspo°ßdßnφ zdrojovΘho k≤du a nßslednΘ lepÜφ orientace v n∞m. Odsazovßnφ probφhß nßsledovn∞: nejmΘn∞, resp. v∙bec, neodsazujeme mate°sk² tag <TABLE>, jemu pod°azen² tag <TR> odsadφme vφce a tag <TD>, kter² je pod°azen² ob∞ma p°edchßzejφcφm, odsadφme nejvφce. Takov²to postup se nßm vyplatφ zejmΘna p°i psanφ slo₧it∞jÜφch tabulek, my ho v°ele doporuΦujeme.