Utilizarea HTML într-un tabel

calculatoare

În HTML există atât de multe elemente șifiecare dintre ele este unică în felul său. Tabelul este un obiect foarte interesant, solicitat și serios. Datorită acesteia, nu numai că puteți furniza informații într-o formă convenabilă, ci și să construiți un cadru întreg al site-ului.

Anterior, aproape toți webmasterii au folosit tabele pentru aspectul site-ului. Inițial, tabelele pentru acest lucru nu au fost inventate. Prin urmare, pentru marcarea site-ului, trebuie să utilizați elementul div block.

Dacă nu doriți să rămâneți întotdeauna un novice,obișnuiți-vă să faceți totul imediat. Acest lucru este foarte important în HTML. În tabel, trebuie să plasați doar informațiile obișnuite (text, link-uri, liste, imagini etc.) și nu întregul site.

Cum se face un tabel HTML?

O masă este un element complex care constă dinun număr mare de alte elemente. Rețineți că atunci când creați celule sau rânduri, trebuie să introduceți întotdeauna o etichetă de închidere simultan. În caz contrar, totul va dispărea. Operatorul din browser va căuta sfârșitul elementului și, până la găsirea lui, totul va fi inclus în tabel. Rezultatul va fi terciul.

Dacă scrieți un site web în "Notepad", atunci tot ce trebuie să faceți cu mâinile. Dacă în editorul finit există mai multe butoane - "introduceți o masă", "inserați o imagine" și așa mai departe.

Exemplu de tabele de la 2 la 2.

<lățimea mesei = "100%" border = "1">

<Tr>

<td> textul primei celule din prima linie </ td>

<td> textul celei de-a doua celule din prima linie </ td>

</ tr>

<Tr>

<td> textul primei celule din a doua linie </ td>

<td> textul celei de-a doua celule a liniei a doua </ td>

</ tr>

Tagurile <table> și </ table> indică începutul și sfârșitul tabelului. Etichetele <tr> și </ tr> sunt începutul și sfârșitul liniei. Într-o singură linie pot exista cât mai multe celule posibil, care sunt definite de tagurile <td> și </ td>.

Principala regulă: numărul de celule din fiecare linie trebuie să fie același. Acesta este un tabel.

html în tabel

Dar, ca și în editorul Word și Excel, celulele pot fi combinate între ele.

Cum să îmbinați celule într-o masă?

Pentru a combina, utilizați atributele Colspan și Rowspan. Span se traduce prin "îmbrățișare" sau "suprapunere". Sensul literal este de a acoperi / acoperi celule / linii.

Cum se îmbină celule într-o masă

În valoarea acestui atribut, trebuie să specificați câte rânduri sau celule vor fi blocate. Următorul exemplu este un bun exemplu de utilizare a atributelor HTML într-un tabel.

tag-uri html tabel

În acest exemplu, în primul rând, 3celule folosind atributul colspan = "3". Apoi, prima celulă a celei de-a doua linii a fost întinsă în patru linii. Amintiți-vă că ne întindem / unim numai în prima celulă. Proprietatea sa va fi extinsă în continuare. Tot ceea ce merge înainte nu va fi afectat.

Dacă aveți 5 celule pe care doriți să le îmbinați 2 - 4, atunci ai nevoie doar de la numărul de celule 2 specificați atributul colspan = „3“.

Observați numărul celulei 9 din figura de mai sus. Acolo au combinat imediat celule și linii. Astfel de acțiuni nu sunt interzise.

Uitați-vă la un alt exemplu pentru a remedia informațiile. Din moment ce unele atribute confunda si uneori combina siruri de caractere in loc de celule.

Combinând șiruri de caractere html

Proiectare mese

Luați în mod obișnuit cazul HTML standard. Masa are două rânduri de câte două celule fiecare.

tag-uri html tabel

Rezultatul codului va fi următorul.

tabelul în html

După cum puteți vedea, nu există efecte. Puteți adăuga un cadru, specificați lățimea și înălțimea.

html atributele tabelului

Puteți, de asemenea, să jucați cu alinierea. Puteți alinia atât înălțimea cât și lățimea.

Aliniere tabel

Aliniați alinierea orizontală și aliniați vertical. Iată rezultatul.

exemplu de creare a tabelelor în html

Atributul Align și Valign poate fi aplicat întregului șir. Apoi, toate celulele care se află în ea vor respecta aceste atribute.

În plus față de etichetele <td> și <tr>, există o etichetă suplimentară<Th>. De fapt, acesta este un analog al lui <td>, dar este folosit numai în prima linie și servește ca antet. Implicit, textul din <th> este centrat și bold.

Cum se conectează stilurile la un tabel?

Ca orice tag-uri HTML, tabelul poatetransformate prin stiluri. Trebuie să specificați o foaie de stil într-o zonă sau stilul finalizat (de asemenea în cap), în zona capului <link rel = "stylesheet" href = "style.css" type = "text / css">.

<Head>

...

<stilul de tip = "text / css">

tabel {

font-familie: Verdana, Arial, Helvetica, sans-serif;

culoare: # 000000;

}

.my_class

{

culoare: # 666666;

}

</ style>

...

</ head>

Dacă ați specificat doar o masă, atunci acest stilse aplică tuturor tabelelor din pagină. Absolut pentru toți. Dar, dacă utilizați a doua metodă, unde specificați un nume arbitrar cu o perioadă, atunci acest stil poate fi aplicat la orice tabel dorit, fără a afecta altele.

<table class = "my_class">

Rețineți că clasele pot fi utilizate atât pentru eticheta tabelă, cât și pentru o anumită celulă sau șir.

<table class = "style_table" width = "100%" border = "1">

<tr class = "style_row1">

<td class = "style_td1"> textul primei celule din prima linie </ td>

<td class = "style_td2"> textul celei de-a doua celule din primul rând </ td>

</ tr>

<tr class = "style_row2">

<td> textul primei celule din a doua linie </ td>

<td> textul celei de-a doua celule a liniei a doua </ td>

</ tr>

Dacă există o greșeală în numele stilului,nu veți vedea rezultatul. Dacă stilul în sine are erori, dar numele sunt aceleași, nu va exista niciun efect Fiecare virgulă sau colon joacă un rol important.

Atribute adiționale pentru tabele

Ce atribute pot fi scrise în clase de stil? Există atât de multe atribute care se aplică în mod specific tabelelor. Luați în considerare cele mai de bază, care vă vor fi utile.

alinia

Aliniere orizontală

valign

Alinierea verticală

fundal

Celulă / Imagine de fundal de masă

bgcolor

Culoarea fundalului de celule

borderColor

Culoarea cadrului de masă / celulă

înălțime

Inaltimea celulei

nowrap

Împiedicați transferul de text în linie.

lățime

Celulă / Lățimea mesei

După cum puteți vedea, puteți utiliza HTML în tabel cu o cantitate imensă de "unelte".

exemple de tabele html

Tabele frumoase create folosind HTML. exemple

Datorită stilurilor puteți crea diferite mese frumoase. Totul depinde de ce și cum vă place.

Exemple de tabele html
E ca la gătit. Ingredientele sunt aceleași și opțiunile de rețetă sunt excelente.

cum se face masa html

După cum puteți vedea, dacă utilizați etichete HTML, tabelul poate fi transformat fără recunoaștere. Limitele posibilităților determină imaginația ta.