Tabele de pe pagina web

Informațiile prezentate în acest articol vizează în primul rând webmasterii începători.

prefață

Dar, cu toate acestea, nu aș vrea să mă despart de creația mea și să șterg pagina, este pacat, după toate, am lucrat la creație și vă recomand să văd cel puțin cum au fost puse tabelele în trecutul apropiat. Studiați acest material. Sunt sigur că vă va fi de folos, deoarece, împreună cu metodele deja depășite de construire a meselor, aici veți găsi multe metode moderne pe care le includ în mod constant în acest articol. Să mergem.

Utilizarea tabelelor, a tipurilor și a codurilor acestora

Tabelele reprezintă cele mai populare mijloace de proiectare a paginilor web. Una dintre modalitățile de a le utiliza pe site este să utilizați întreaga pagină ca cadru:

Va exista un "antet al paginii web", un logo și un nume de site web. Lățimea este specificată în puncte sau în procente. Lățimea de 100% - site-ul ocupă tot spațiul liber în browser. Înălțimea de 50-150 de puncte sau 5-15% sau la discreția dvs.

Zona de navigare pe secțiunile site-ului. Lățimea este de 120-200 de puncte sau de 12-20%.

Conținutul principal este conținutul paginii. Are tot spațiul rămas.

Zona de navigare site duplicat. Înălțimea este de 40-50 de puncte sau de 4-5%.

Cred că puteți construi cu ușurință o astfel de masă, dar pentru fiecare "pompier" voi da un exemplu de cod html:

Această schemă nu este obligatorie. Există multe alte opțiuni.

Mai mult, vreau să vă prezint variante posibile de aplicare a diferitelor tabele și, în consecință, codurile lor html.

Tabel punctat

Exemplu de plasare a conținutului

Codul HTML al tabelului arată astfel:

Atenție vă rog! Informații importante!

Și aici este o privire modernă asupra construcției unei mese cu un cadru punctat. Pentru aceasta, utilizați valoarea punctată în parametrul de graniță.

Doar scrie codul de masă cu identificatorul, de exemplu, demo3 -

, iar CSS-ul unui astfel de tabel este scris în stiluri în secțiunea cap sau în fișierul stilurilor site-ului:

demo3
de frontieră. 2px spart # 000000; / * cadru 2px, punctat, culoare neagră * /
marja: 0 auto; / * alinierea centrului * /
lățime: 600px; / * în px sau în% * /
overflow: auto; / * masa creste in functie de cresterea continutului ei, nu-i permite sa mearga dincolo de limitele * /
>

Dacă doriți să creați un cadru cu puncte - în loc de punctat, scrieți valoarea punctată. În plus, ambele cadre pot schimba culorile. În exemplu, negrul este setat la # 000000.

Tabel cu colțuri rotunjite

Exemplu de plasare a conținutului

Codul de masă:

Totul este la fel de simplu ca este minunat, dar există un mic "zamorochka". Vedeți fișiere imagine marcate cu un marcator în cod? Sunt desene mici realizate în Photoshop și arată astfel:





După cum înțelegeți, aceste imagini au aceeași culoare cu masa și sunt montate în codul de masă pentru a crea efectul colțurilor rotunjite.

Dacă culoarea mesei vă satisface (puteți schimba imaginea și puteți completa imaginile cu orice altă culoare), puteți descărca (3,1 kb) aceste desene, le puteți încărca în folderul de imagini al site-ului, copiați codul de masă și "în mod bun!"

Una dintre variantele acestei metode arată astfel:

Articole similare