101 - 055 Soho Mystery Cache

Pro ruzne prace s textem a obrazkem se relativne dobre hodi dalsi z HTML prvku - tabulka. Sice v dnesni dobe je na webu tendenci pouzivat pro rozmistovani prvku pouze CSS styly, ale neni to tak dlouho (cca rok 2004), co jste jinou moznost nez pouzit tabulku pro designovani stranek nemeli. Dnes jiz tedy tabulka prezitkem, tento prezitek je vsak pro nase ucely, formatovani listingu, naprosto dostacujici. Pojdme se ji tedy podivat na zoubek (nebo spise na kod).

HTML tabulka je vlastne nekolik samostatnych HTML prvku dohromady. Pro jeji nejjednodussi verzi si tak vystacime s tremi parovymi tagy, ktere nam vytvori tabulku. A to:

<table> </table> - parovy tag, ktery definuje zacatek a konec kodu, ktery tvori tabulku jako takovou.

<tr> </tr> - parovy tag, ktery definuje zacatek a konec kazdeho radku tabulky.

<td> </td> - parovy tag, ktery definuje zacatek a konec kazde bunky tabulky.

Zakladni konstrukce HTML kodu pro tabulku s jednim radkem a dvema bunkami pak bude vypadat nasledovne:

<table> <tr> <td>jedna bunka</td><td>druha bunka</td></tr></table>

Vysledek pak vypada takto (po pridani vlastnosti border="1" do tagu table pro zobrazeni oramovani):

Stejne jako u vsem HTML tagu, i zde je mozne nastavit vlastnosti jednotlivych prvku tabulky, jako je napriklad zarovnani tabulky (prikaz align v prvku table), zarovnani jednotlivych bunek (ten samy prikaz align, ovsem ted uz v prvku td), a obdobne funguji i vsechny ostatni jiz zname vlastnosti (width, border, color atd.). Nove se zde dost casto vyuzije vlastnost valign, ktera definuje vertikalni zarovnani a muze nabyvat techto hodnot:

top: zarovnani nahoru;
middle: zarovnani na stred;
bottom: zarovnani dolu;

Obsahem bunky nemusi byt jen prosty text, ale lze zde umistit temer libovolny HTML prvek (obrazek, odkaz, odstavec, ale treba i dalsi tabulku). Jen pozor abychom se v takovem kodu nezacali brzy ztracet. Takova naformatovana tabulka muze vypadat i takto:

<table cellspacing="2" cellpadding="0" width="80%" border="1">
<tr>
<td>Lorem</td>
<td>ipsum</td>
<td>dolor</td>
<td>sit <i>tep</i></td>
<td>amet</td>
<td>consectetur</td>
<td>adipisicing</td>
</tr>
<tr>
<td width="20" align="right">elit</td>
<td align="right"><i>4xQ</i> sed</td>
<td align="right">do</td>
<td align="right">eiusmod</td>
<td align="right">tempor</td>
<td align="right">incididunt</td>
<td align="right"><i>tses</i> ut</td>
</tr>
<tr>
<td colspan="2" align="right">labore et</td>
<td colspan="2" align="right">dolore magna</td>
<td colspan="3" align="right"><i>tep teved</i> aliqua Ut enim</td>
</tr>
<tr>
<td align="left">ad</td>
<td align="left">minim</td>
<td bgcolor="red" align="left">veniam</td>
<td bgcolor="yellow" align="left">quis</td>
<td bgcolor="red" align="left">nostrud</td>
<td align="left">exercitation</td>
<td align="left">ullamco</td>
</tr>
<tr>
<td align="left">laboris</td>
<td align="left">nisi <i>Q</i></td>
<td align="left">ut</td>
<td align="left">aliquip</td>
<td align="left">ex</td>
<td align="left">ea <i>alun</i></td>
<td align="left">commodo</td>
</tr>
<tr>
<td rowspan="2" align="center">consequat<br />et</td>
<td align="center">Duis</td>
<td align="center">aute</td>
<td align="center">irure</td>
<td align="center">dolor</td>
<td align="center">in</td>
<td rowspan="2" align="center">reprehenderit<br />eu</td>
</tr>
<tr>
<td valign="middle">voluptate</td>
<td valign="middle">velit <i>Q</i></td>
<td valign="middle">esse</td>
<td valign="middle">cillum</td>
<td valign="middle">dolore</td>
</tr>
<tr>
<td align="center" valign="middle">fugiat</td>
<td align="center" valign="middle">nulla<br /><i>irytc</i></td>
<td align="center" valign="middle">pariatur</td>
<td align="center" valign="middle">Excepteur</td>
<td align="center" valign="middle">sint</td>
<td align="center" valign="middle">occaecat<br /><i>tep</i></td>
<td align="center" valign="middle">cupidatat non proident<br /> sunt in culpa</td>
</tr>
</table>

A zde je vysledek:

Lorem	ipsum	dolor	sit tep	amet	consectetur	adipisicing
elit	4xQ sed	do	eiusmod	tempor	incididunt	tses ut
labore et		dolore magna		tep teved aliqua Ut enim
ad	minim	veniam	quis	nostrud	exercitation	ullamco
laboris	nisi Q	ut	aliquip	ex	ea alun	commodo
consequat et	Duis	aute	irure	dolor	in	reprehenderit eu
	voluptate	velit Q	esse	cillum	dolore
fugiat	nulla irytc	pariatur	Excepteur	sint	occaecat tep	cupidatat non proident sunt in culpa

Kdo pozorne prozkouma jednotlive kusy vyse uvedeneho HTML kodu a nasledne zobrazeny vysledek, jiste sam pozna, ktera vlastnost dela dane zobrazeni.