Sfaturi utile

Crearea unui tabel în HTML

Pin
Send
Share
Send
Send


Tabele HTML ele sunt utilizate nu numai în mod obișnuit (ca un set de date distribuite pe celule, rânduri și coloane), ci și pentru comoditatea plasării informațiilor pe pagină. Pur și simplu pus, puteți prezenta întreaga pagină html sub forma unui tabel și, de exemplu, puneți meniul în coloana din stânga, informațiile principale din coloana din mijloc și link-uri suplimentare în coloana din dreapta. Numărul de coloane, rânduri și, în consecință, celule este selectat doar de dvs. și poate fi oricare.

Din pagina pe care o citiți acum, a fost construită inițial pe acest principiu: este împărțită în mai multe rânduri și fiecare rând în coloane (și, în rânduri diferite, un număr diferit de coloane). În unele dintre celulele rezultate, la rândul lor, sunt plasate mai multe tabele (tabelele sunt introduse în tabele). Puteți vedea chiar și pur vizual.

În general, utilizarea tabelelor în HTML face mult mai ușor construirea unui site. Cu toate acestea, tu însuți vei vedea totul! Așa că hai să mergem direct la practică.

§ 1. Crearea unui tabel

Din ama, se creează o tabelă în HTML cu și etichete, rânduri de tabel (plasate între și etichete) și, și coloane de tabel (plasate între și etichete) și etichete.

De exemplu, creați un tabel format dintr-un rând și două coloane. HTML va arăta astfel:

Dar, de obicei, există o mulțime de rânduri și coloane în tabel, și cu o astfel de înregistrare veți fi în mod constant confuz. De aceea, la început, recomand să folosiți prima metodă.

§ 2. Cadrul tabelului (granițe)

În mod implicit, tabelul din browsere apare fără cadru. Pentru a face vizibil cadrul de tabel, se folosește atributul „deja cunoscut din secțiunile anterioare”:frontieră»:

Și apoi browserul va afișa:

Prima celulăA doua celulă

Începutul atributului „border” afectează numai frontiera exterioară, granițele dintre celule nu pot fi modificate. Pot fi arătate sau nu. De exemplu, dacă schimbați valoarea atributului „border” de la „1” la „5”:

Prima celulăA doua celulă

Puteți schimba culoarea marginii tabelei utilizând „borderColor“. De exemplu:

Apoi în browser vom vedea:

Prima celulăA doua celulă

§ 3. Indentarea din tabel

Pentru a schimba indentarea între celulele adiacente ale tabelului, atributul HTML folosește "cellspacing“. Haideți să complicăm tabelul pentru claritate: alcătuim două rânduri de trei coloane și aplicăm atributul „celulă spațiu”:

Routerul B va afișa:

Prima celulăA doua celulăA treia celulă
A patra celulăA cincea celulăA șasea celulă

A se induce în celulele atributului "cellpadding“. Dacă schimbăm prima linie din codul nostru HTML:

Prima celulăA doua celulăA treia celulă
A patra celulăA cincea celulăA șasea celulă

§ 4. Unirea celulelor de masă

Pentru a combina celulele tabelelor pe orizontală (coloane) sau vertical (rânduri), în HTML sunt utilizate următoarele atribute:

colspan - combinarea celulelor pe orizontală (coloane),

rowspan - fuzionarea celulelor pe verticală (rânduri).

De exemplu, schimbați codul HTML astfel:

Apoi în browser vom vedea:

Prima și a doua celuleA treia celulă
A patra celulăA cincea celulăA șasea celulă

Prima celulăA doua celulăCel de-al treilea și al șaselea celule
A patra celulăA cincea celulă

§ 5. Titlul tabelului

Dacă utilizați un tabel pentru a organiza date (și nu pentru aspectul paginii), poate fi necesar să utilizați un antet. Titlul tabelului este stabilit de etichetă. De exemplu:

Într-un browser, arată așa:

Antetul tabelului
Prima celulăA doua celulăA treia celulă
A patra celulăA cincea celulăA șasea celulă

Puteți aplica atributul „laalinia“. Pentru a se alinia cu tabelul.

Atributul aliniere are următoarele valori:

  • stânga - aliniază titlul la marginea stângă a tabelului;
  • dreapta - aliniază titlul la marginea din dreapta a tabelului;
  • centru - aliniază titlul la centrul tabelului (valoarea implicită),
  • top - la fel ca „centru”, funcționează numai în toate browserele,
  • fund - titlul este plasat sub masă în centru.

Antetul tabelului
Prima celulăA doua celulăA treia celulă
A patra celulăA cincea celulăA șasea celulă

§ 6. Dimensiunile tabelului

Și puteți modifica dimensiunea tabelului și a celulelor folosind următoarele atribute:

  • lățime - lățimea mesei, coloanei, celulei;
  • înălțime - înălțimea mesei, rândului, celulei.

Și valorile x sunt specificate în pixeli sau procente. De exemplu:

Va arăta astfel:

Prima celulăA doua celulăA treia celulă
A patra celulăA cincea celulăA șasea celulă

§ 7. Alinierea tabelelor

În HTML, alinierea orizontală a tabelului în raport cu pagina se face folosind atributul pe care îl cunoașteți deja:alinia“. Semnificațiile sale vă sunt familiare:

  • centru - alinierea tabelului în centru;
  • stânga - alinierea tabelului la stânga;
  • dreapta - alinierea tabelului la dreapta.

În mod implicit, alinierea are loc la stânga. Un exemplu:

Prima celulăA doua celulăA treia celulă
A patra celulăA cincea celulăA șasea celulă

Pentru a alinia textul din tabel (și celelalte conținuturi), trebuie să utilizați atributul „aliniere” la fiecare celulă specifică! pentru că în celule se află întregul conținut al tabelului. Un exemplu:

Prima celulă (aliniată la dreapta)A doua celulă (centrată)A treia celulă
A patra celulăA cincea celulăA șasea celulă (aliniată la dreapta)

Pentru alinierea conținutului pe verticală celulă atributul "valign", Care are următoarele semnificații:

  • valoarea inițială - alinierea la linia de bază;
  • fund - alinierea la marginea inferioară;
  • mijloc - alinierea la mijloc (valoarea implicită),
  • top - alinierea pe marginea superioară.

Borduri și cadre

În mod implicit, tabelul nu are margini. Îl puteți adăuga folosind atributul de chenar al etichetei

. Cu toate acestea, uneori browserele afișează diferit acest chenar, așa că este mai bine să atribuiți acest proces funcționării cu stiluri:

Culoarea fundalului și a textului

Pentru a indica fundalul unei celule de tabel HTML, rând sau celulă individuală la etichete

, Se pot aplica următoarele opțiuni:

  • fundal - imaginea este folosită ca fundal. Puteți specifica fie numele fișierului, fie calea către acesta,
  • bgcolor - fundalul este o culoare specifică. Puteți specifica atât numele nuanței de interes, cât și codul hexadecimal.

Pentru a schimba culoarea textului într-un tabel HTML, trebuie să utilizați o etichetă.

§ 8. Istoric tabel

În HTML, culoarea de fundal a tabelului sau a celulelor sale individuale este setată folosind „bgcolor“. Am discutat despre cum să selectăm culoarea dorită a unui element în HTML în lecția despre atributele etichetei corpului. Un exemplu:

În browser vom vedea:

și
Prima celulăA doua celulăA treia celulă
A patra celulăA cincea celulăA șasea celulă

Puteți utiliza imagini ca fundal al tabelului sau ca o singură celulă. În HTML, acest lucru se face folosind „fundal“. Valoarea atributului „fundal” este adresa imaginii (modul în care am studiat graficele din această lecție). Exemplu de imagine de fundal pentru întregul tabel:

Prima celulăA doua celulă
A treia celulăA patra celulă

Pentru o singură celulă, imaginea de fundal este setată după cum urmează:

Prima celulăA doua celulă
A treia celulăA patra celulă

Indentare HTML

În HTML, indentarea dintr-un tabel este setată folosind o etichetă

:

  • spacepacing - distanța dintre marginile celulelor vecine,
  • cellpading - distanța dintre conținut și marginea celulei.

Afișarea vizuală a acestui cod în browser este următoarea:

Aliniere tabel HTML

Puteți specifica doi parametri pentru fiecare celulă sau rând individual care realizează alinierea textului orizontal (aliniere) și vertical (valign) în tabelul HTML.

Parametrul de aliniere poate avea următoarele valori:

  • stânga - aliniere pe marginea stângă,
  • dreapta - aliniere la frontiera din dreapta,
  • aliniere centru - centru.

Parametrul valign poate avea următoarele valori:

  • partea de jos - alinierea la frontiera inferioară,
  • sus - aliniere la limita superioară,
  • mijloc - aliniere la mijloc.

Inserați imaginea în tabelul HTML

Administratorii web au deseori o întrebare despre cum să inserați o imagine într-un tabel HTML? Pentru a realiza acest lucru, este necesar să se înregistreze adresa sau numele imaginii în celula corespunzătoare după etichetă

Marcaj HTML XHTML - a adăugat cel de-al doilea rând al tabelului cu celule obișnuite, dar nu antet. Rândurile și celulele ulterioare au fost inserate la fel. - a închis masa.

Link-uri utile:

  • Bazele HTML - Un tutorial video gratuit de 2 ore despre elementele de bază HTML,
  • Un curs gratuit pe aspectul site-ului - un exemplu de aranjare bloc de la zero,
  • Dispunerea site-ului de la zero 2.0 este un curs cu drepturi depline.

§ 9. Concluzie

În HTML, tabelele, așa cum am spus la început, sunt utilizate mai ales pentru aspectul paginii. Acesta este scopul lor principal. În fiecare celulă a tabelului, puteți introduce orice alte date: text, imagini sau un alt tabel. De aceea sunt atât de convenabile pentru marcarea paginilor html și împărțirea lor în blocuri separate. De exemplu, puteți crea o astfel de „compoziție”:

.

  • lățime - lățime
  • înălțime - înălțime
  • alt - text alternativ care este afișat în browser atunci când funcția de afișare a imaginii este dezactivată,
  • title - legendă la imagine,
  • aliniere - aliniere orizontală,
  • valign - aliniere verticală.

În plus, înfășurând imaginea într-o etichetă specială, ea poate fi folosită ca link.

Fuzionarea celulelor într-un tabel HTML

Celulele învecinate dintr-o singură coloană sau rând pot fi combinate folosind parametrii de lungime a rândului și colspan a etichetei

.

Unirea coloanelor dintr-un rând arată astfel:

Generatoare de tabele HTML

Desigur, puteți crea singuri tabele HTML scriind manual toate etichetele HTML. În acest caz, tabelul prezintă riscul de a nu fi compilate corect, deoarece factorul uman se face simțit atunci când lucrează cu volume mari de informații.

Generatoarele speciale de masă HTML au fost de mult timp pentru a vă economisi timp. Cu ajutorul lor, puteți crea cu ușurință un tabel cu multe setări.

Unul dintre cele mai comune generatoare de masă este serviciul în limba rusă http://rusws.ru/genertabtag. În arsenalul său există multe setări pentru tabelele de construcție: puteți seta culoarea de fundal, alinierea, lățimea mesei, grosimea cadrului etc.

Aceasta este o opțiune excelentă pentru generarea de tabele simple, dar în scopuri mai serioase, vă recomandăm să utilizați alte servicii:

Același serviciu are un editor HTML destul de convenabil în care puteți construi, completa un tabel și apoi primi codul său:

Dacă decideți să utilizați serviciile unui generator de masă, ar trebui să abordați cu atenție alegerea serviciului care vi se potrivește, testându-le pe cele mai populare dintre ele și alegându-l pe cel mai bun.

Etichete și atribute de tabel

Iată elementele de bază de care aveți nevoie pentru a crea tabele:

  • - recipientul în interiorul căruia se află masa (la fel ca și pentru etichetat sau pentru liste numerotate).
  • frontieră - un atribut care determină grosimea cadrelor. În schimb, este mai bine să folosiți proprietatea de frontieră CSS.
  • stabilește semnătura tabelului. Recipientul nu poate fi folosit, dar dacă totuși decideți să conduceți masa, atunci puneți-l imediat după etichetă , în afara celulelor și rândurilor.
  • - o etichetă pereche care conține un rând de tabel (celule situate la același nivel pe orizontală).
  • - Eticheta care creează celula antetului tabelului. În exterior, conținutul său este diferit de cel din alte celule - de obicei textul din interior Browserul este îndrăzneț și centrat.
  • - recipientul cu care este creată o celulă simplă. Câte astfel de etichete va conține șirul (etichetă , vor exista atât de multe celule în ea: o etichetă - o celulă.
  • vă permite să grupați coloane, rapid și fără a bloca codul pentru a seta caracteristici generale pentru acestea. Folosind containerul, puteți separa părțile logice ale tabelului una de cealaltă. Este localizat după etichetă, dacă nu este, apoi după .
  • utilizat în același scop ca și. poate conține, dar nu invers.
  • deschidere - Atribut care specifică numărul de coloane pentru care se aplică proprietățile containerului.
  • , și - containere care vă permit să împărțiți tabelul în părți superioare (antet), principal (corp) și, respectiv, inferioare (finale). În tabelul HTML, secvența acestor etichete este aceeași cu secvența de containere și în documentul HTML.
  • colspan necesare pentru a combina celulele la rând. Valoarea atributului conține o cifră, care determină numărul de celule care trebuie combinate.
  • rowspan se alătură celulelor în coloane.

Exemplu de creare a tabelelor

Creați un document HTML și copiați următorul cod în el:

În browser, documentul va arăta astfel:

Să ne dăm seama ce linii de cod sunt responsabile pentru ce.

  • - deschise masa, întrebându-i grosimea ramelor.
  • Instrumente pentru crearea site-urilor - intitulate.
  • - a deschis linia.
  • numire - a creat o celulă cu antetul.
  • instrument - a creat o a doua celulă antet în rând. Parametrul colspan a indicat că această celulă ar trebui să ocupe două pe orizontală. - a închis linia. În mod similar a creat restul liniilor.
O, unde este tinerețea mea!

Și acesta este cel mai simplu lucru care se poate face folosind tabele! Crearea unui site bazat pe aspect tabular este absolut posibil pentru orice începător! Această lecție este o dovadă în acest sens.

În general, acum este momentul pentru experimente independente. De vreme ce lecția este cam crearea de tabele în HTML finalizat. Și odată cu aceasta, povestea mea despre elementele de bază ale HTMLului s-a încheiat.

Și meya această cunoștință, am început să pun harp pe întregul site. Prin urmare, vă recomand cu drag să aplicați aceste cunoștințe în practică. Deși mai există încă o secțiune despre metaetichetele HTML, acestea nu sunt legate direct de crearea site-ului. Așadar, consolidați cunoștințele din această parte și faceți clic pe butonul „Următorul”.

Partajați linkul către Seoded.ru cu prietenii, cunoscuții și persoanele cu care discutați în rețele sociale și forumuri! Marcați site-ul în sine! Deci câștiga.

Partajează linkul către această pagină în:

Pin
Send
Share
Send
Send