Crearea unui tabel în HTML - exemple frumoase

Prieteni! Pe aceasta pagina sunt în așteptare pentru un sistem complet hands-on curs pe mesele de studiu. Uită-te la ea, și a crea tabele nu vor mai fi o problema pentru tine. De fapt, acestea creează foarte ușor.

tabel HTML utilizate anterior pentru site-urile de aspect. Acesta a fost numit - un aspect tabular. Mai târziu a fost înlocuit de aspect Divas (folosind div tag-ul), care sa dovedit a fi mult mai convenabil și mai ușor. Și acum vine epoca de desktop-site-uri de publicare tehnologie flexbox, care este proiectat pentru a simplifica și mai mult durata de viață a web-masterat.

Cu toate acestea, în ciuda tuturor celor de mai sus, tabelul în HTML este încă de actualitate, relevante și integral pe site. Adevărul nu este structura, ci ca un element al articolelor site-ului.

Crearea tabelelor în exemple html

Înainte de a începe să învățați să creați un tabel în HTML, care ar fi meu și masa ta sa uitat la fel - face 3 lucruri simple:

1. Crearea unui fișier index.html
2. Deschideți-l într-un browser
3. Adăugați următorul cod:

Crearea unui simplu tablete HTML

În primul rând, trebuie să specificați eticheta de masă. Această etichetă asociat, care spune browser-ului, care este în ea va fi amplasat toată masa HTML.

Dar utilizarea acestei etichete nu este suficient, pentru că masa are încă nevoie să fie umplut. Și acolo, de asemenea, există reguli care trebuie respectate cu strictețe.

După cum știți, fiecare tabel are rânduri și coloane sale care formează celula la intersecția. Cu toate acestea, în HTML - tabele sunt construite principiu ușor diferite. Inițial, noi le cerem să siruri de caractere și șiruri în interiorul celulei cerut. Și că numărul de celule într-un rând și va depinde de numărul de coloane. Hai să încercăm să facem un tabel în HTML în Notepad.

Creați rânduri și celule

Rândurile sunt specificate folosind tag-uri tr. Și în interiorul liniilor de celule noi cerem tag-uri td. Și acum suntem într-o grabă zababahaem tabel simplu, cu un singur rând și patru celule. Aici sa codul:

După cum vedeți, avem un tabel simplu, cu un singur rând și patru celule, care sunt convertite automat la 4 coloane.

Codul primit destul de mult, dar a meritat! Cred că acum este clar pentru tine cum crearea de tabele în HTML. Cu toate acestea, acest lucru nu este tot, suntem încă doar ai început și apoi ne așteptăm o mulțime de interesant

Numele tabelului - tag legendă

Să ne o placă de modernizare puțin și se adaugă la un nume mic. Acest lucru se face cu ajutorul tag-ul legenda. Această etichetă ar trebui să fie plasat primul, imediat după eticheta de deschidere de masă. Iată cum arată în codul:

Dar, ceea ce vom obține în cele din urmă:

tabele EXEMPLUL numit

După cum puteți vedea, în ciuda faptului că am plasat o legendă în cadrul unei etichete de masă. Acesta este situat deasupra ei.

ochiurilor de plasă de masă de management

Deci, prieteni, acum vom complica treptat masa noastră. Și de a îmbunătăți abilitățile și practica. HTML-masă, pe care am făcut-o cu tine de mai sus este foarte simplu. Cu toate acestea, cel mai adesea, este necesar să se furnizeze datele într-un format mai complex:

1. Imprimați linia antet
2. Se combină unele celule verticală
3. Altele combină orizontală

Asta este ceea ce vom face. Și vom începe, probabil, cu ...

headere celulare în tabelul

Desigur, am putea lipi în celulele din primul rând unele titluri, sau să le elibereze prin stiluri aldine. Cu toate acestea, va fi greșit!

Din moment ce tag-ul special lea a fost creat în acest scop. care este stabilit în locul celulelor normale (tag td). Și subliniază faptul că această celulă-antete, care sunt utilizate pentru numele coloanei.

Amintiți-vă că tag-ul lea joacă un rol nu doar vizual, și semantic. Acest lucru este important pentru motoarele de căutare.

Lăsați tabelul din exemplul anterior, prima linie înlocui etichetele td pe mii. Și, de asemenea, o mica schimbare a conținutului lor:

Și aici este rezultatul codului de mai sus, executat în browser:

Tabelul etichetat th

După cum puteți vedea, textul în aceste celule devine automat caractere aldine.

Combinarea celulelor în orizontală și verticală

Destul de des, o celulă într-un tabel HTML trebuie să fie combinate pe orizontală și pe verticală. Pentru comoditate, eu o numesc unirea coloane și rânduri. Deci, pentru începători, este clar că ei fac.

Pentru a face acest lucru, vom folosi 2 atribut. care sunt stabilite direct de celule:

1. Caracteristica colspan - indică cât de multe celule trebuie combinate în coloanele (orizontale) din curentul
2. atribut rowspan - specifica cat de mult pentru a fuziona celulele prin flux (vertical) de curent

Aceste atribute trebuie să fie un număr întreg de la 1 sau mai mult.

Amintiți-vă! Dacă îmbinați celule pentru alte celule într-un tabel, le înlocuiește, și întinse. Acest lucru înseamnă că celulele, care sunt înlocuite - trebuie să fie eliminate din codul HTML.

Această regulă este foarte importantă, pentru că, dacă nu elimina celulele care au fost regrupate, tabelul va fi afișat în browser-ul corect.

Să încercăm să combine celulele noastre tabelul 2:

1. Celula 1 în rândul 2 se alăture pe coloane (orizontale) cu celule de 2 și 3 din același rând. Pentru a face acest lucru, ea cere să atribuie rowspan = „3“
2. 4 linii de celule 2 va combina rândurile (vertical) cu celule 4 în linii 3 și 4. În acest scop, o întrebăm pe ea să atribuie colspan = „3“

Și acum, pentru afișarea corectă a tabelului, avem nevoie pentru a elimina din codul de celule care au fost adăugate atunci când sunt combinate. Aceasta înseamnă că primul exemplu îl eliminăm din celula codul 2 și 3 în linia 2. A doua - elimina celula 4 în linia 3 și 4 de celule din linia 4.

Ca rezultat, am ajuns aici codul de mai jos:

Și, de fapt, masa noastră va arăta după cum urmează:

Fuzionarea celule din tabel

Cap, corp si masa de subsol HTML.

La fel ca site-ul în sine, casa de discuri poate avea propriul antet, corp, și un subsol. Și dacă doriți codul să arate în mod corect semantically pentru motoarele de căutare. Te sfătuiesc să aplice aceste cunoștințe în practică.

Toate 3 din tag-ul, pe care o vom explora mai departe, ar trebui să conțină toate conținutul unui tabel. Ceea ce în mod convențional, putem fi împărțite în trei bucăți mari.

tag dinlicitația - un antet tabel HTML

Această etichetă ar trebui să fie plasat mai întâi în conținutul tabelului. Asta este, vom conduce această etichetă și deja în interiorul loc un rând antet cu celule.

1. Ea trebuie să aibă loc doar o dată pe tabel!
2. Indiferent de locul unde ne sunt situate în tabel - linii sunt în această etichetă va fi afișată la începutul mesei.

Acum, înapoi la masa noastră, și lăsați primul rând zavernom în această etichetă:

Vizual, aceasta nu afectează afișarea tabelului, așa că nu va ieșire rezultatul execuției codului.

tag-ul TFOOT - tabel Beci HTML

Deși este subsol, dar nu uitați că această etichetă ar trebui să fie plasat imediat după eticheta dinlicitația.

1. Ea trebuie să aibă loc doar o dată pe tabel!
2. Indiferent de locul unde ne sunt situate în tabel - linii sunt în această etichetă va fi afișat la sfârșitul mesei.

Să ne zavedom un alt rând din tabel, și zavernom cu celule direct în tag-ul TFOOT:

Și aici este casa noastra de discuri:

TFOOT Meta în tabelul