Atributele etichetei TABLE, chenare, chenare și altele. Atributele etichetei TABLE, chenare, chenare și altele

Atributele etichetei TABLE, chenare, chenare și altele.  Atributele etichetei TABLE, chenare, chenare și altele

09.11.2015


Bună ziua tuturor!
Să continuăm cu HTML de bază. La această lecție, o voi deschide și o voi arăta pe fund, cum se generează un tabel în html. Și ne putem uita, de asemenea, la cum puteți seta culoarea pentru mijlocul meselor, cum să centrați masa, cum să învățați cum să lucrați între mese etc.
Tabelele HTML rescriu adesea HTML pentru a suprascrie anumite declarații. Anterior, tabelele au fost răsucite pentru a se potrivi în cadrul paginilor web:

…deși în trecut, există modalități mai eficiente de a crea cadre pentru site astăzi. Am adesea o masă ticăloasă pe blogul meu sau pe site, de exemplu, ca în .

Cred că v-ați dat seama, acum trebuie să învățați cum să creați un tabel.

Din ce etichete principale se formează tabelul?

○ etichetă MASA
Acesta este containerul de cap pentru mese pliante, în mijlocul căruia se află și alte elemente de mese, precum mese și rânduri.
Eticheta creț este obov'azkovim.

○ etichetă TR

În interiorul recipientului

……
răspândite pe rânduri:

Stovpchiki sunt create în spatele ajutorului etichetei .
Închiderea etichetei obs'yazkovy.

Respect: este imposibil să creați un tabel fără etichete vikoristannya tsikh.

Acum vom încerca să accelerăm teoria și să creăm un tabel în practică.

Administrator: creați un tabel pe un rând, din trei coloane.

rândul -1 / ochiul 1 ciot 2 ciotul 3

Administrator: creați un tabel cu trei rânduri și trei coloane.

rândul -1 / ochiul 1 ciot 2 ciotul 3
rândul -2 / ochiul 1 ciot 2 ciotul 3
rândul -3 / ochiul 1 ciot 2 ciotul 3

Pana in ce moment iti este totul clar? Cine nu este înțelept, ridică mâna! Da, toată lumea și-a dat seama, atunci hai să mergem.

Acum să ne uităm la atributele tabelului.

*Atribute

Între tabele în HTML

Pentru ca tabelul să fie văzut, înainte de etichetă

stagna atribut "frontieră» .

Ce valoare de atribut « frontieră» „0” , nu veți putea vedea limita, așa că nu o puteți nota în etichetă

atribut "frontieră", cordonul de la masă nu va fi vizibil.

Între tabele în HTML - site-ul web

rândul -1 / ochiul 1 ciot 2 ciotul 3

Rezultat:

Încercați să schimbați valoarea din atribut "frontieră" pe "10" .

Cum să combinați mijlocul mesei

Pentru a combina mijlocul meselor cu atribute vicoriste "colspan" ta "rowspan" la etichetă < td> .

  • colspan - îmbinarea mijlocii pe orizontală;
  • rowspan - unind centrele pe verticală.

În semnificații, indicați numerele, trebuie să le combinați pe cele din mijloc.

rândul 1 ochiul 1
rândul 2 ochiul 1 rândul 2 ochiul 2

Rezultat:

rândul 1 ochiul 1 rândul 1 ochiul 2
rândul 2 ochiul 1

Rezultat:

Stoc pliabil mai mare:

Tabele în HTML - site

rândul -1 / ochiul 1 ciot 2 ciotul 3
rândul -2 / ochiul 1 ciot 2 ciotul 3 stovpchik 4

Rezultat:

Cum să vă îmbunătățiți între mesele de mijloc

Pentru a mări distanța dintre text și mijlocul mijlocului, prescrieți atributul "umplutură celulară"înainte de etichetă

Pentru valorile atributului „cellpadding”, specificați diferența de acces

rândul 1 ochiul 1 ciot 2

Rezultat:

Pentru a crește numărul de mijlocii la mese, atributul face cu ochiul spațierea celulelorînainte de etichetă

Atributul valorilor spațierea celulelor indicați între mijloc

rândul 1 ochiul 1 ciot 2

Rezultat:

Cum se creează fundal de tabel HTML

Pentru a genera eticheta HTML de fundal a tabelului

і

astfel de atribute:

  • BGCOLOR – colorează fundalul tuturor tabelelor sau centrul pielii din mijloc. Culoarea este determinată de cod sau de cuvânt.
  • FUNDAL - fundalul mesei este umplut cu un mic.
Tabele în HTML - site
rândul -1 / ochiul 1 ciot 2 ciotul 3
rândul -2 / ochiul 1 ciot 2 ciotul 3 stovpchik 4

Rezultat:

Cum se inserează o imagine într-un tabel HTML

Pentru a insera o imagine într-un tabel HTML, între etichete

introduceți eticheta .

rândul 1 mijlocul 1 seredok 2

Rezultat:

Valorile sunt setate pentru pixeli (px) sau pentru pixeli (%)

Navigați în tabelele HTML

Pentru a verifica tabelele HTML, evidențiați eticheta atribut "alinia"і "valliniaza" :

ALINIA– vedere orizontală în locul mesei.
Valoare:

  • stânga - strângeți-vă în partea stângă (pentru blocare);
  • centru introduceți în centru;
  • dreapta - strângeți-vă în partea dreaptă

VALIGN– vedere verticală în locul meselor.
Valoare:

  • top strângeți-l până sus;
  • partea de jos strângeți-l până în jos;
  • mijloc pus la mijloc
text

în mijlocul ecluzei vmіst virіvnyuєmo orizontal de la marginea dreaptă, vertical - apăsat în jos
vmіst virіvnyuєmo orizontal de-a lungul marginii din stânga, vertical - apăsat în sus vmіst virіvnyuєmo orizontal în centru, vertical - apăsat în mijloc

Rezultat:

Cum să aliniați tabelele HTML în centru

Pentru a sorta masa în centru, trebuie să înconjurați masa cu o etichetă

:

Cod tabel

rândul -1 / ochiul 1 ciot 2 ciotul 3

Etichete suplimentare și principale pentru tabele

Tabel pentru site
Nume 1 Titlul 2
1 2

Rezultat:

De la am terminat cu tabele. Puteți crea independent o masă, fie că este pliabilă. Închide-ți lecția. Încercați să creați independent un tabel.
Vă verific la ora următoare. Abonați-vă la actualizările blogului meu.

Înainte de intrare
Înainte de intrare

Începuturile versatilității tabelelor, numărul mare de parametri care le controlează aspectul, tabelele au devenit de mult timp standardul pentru aspectul paginilor web. Un tabel cu o limită invizibilă este o grilă modulară nibi, în blocuri pe care le poți plasa manual elementele paginii web. Prote tse nu cunosc pidhid-ul corect, chiar dacă obiectul HTML este atribuit în scopuri proprii și, de regulă, nu este acordat pentru recunoaștere, în plus, peste tot, înseamnă că nu există alternative. Așa că a fost o lungă perioadă de timp, până când au venit bile pentru a schimba tabelele în aspectul site-urilor. Acest lucru nu înseamnă că acum bilele sunt desenate des, dar tendința a început deja să fie clară - tabelele sunt plasate pentru plasarea datelor tabelare, iar bilele sunt pentru aspectul respectiv design.

Creații de masă

Masa este pliată pe rânduri și rânduri de rânduri, astfel încât textul și micuții să poată fi șters. Apelați tabelele pentru a aranja prezentarea datelor, tabelele nu sunt intercalate. Pentru ajutor suplimentar, tastați manual layout-urile laturilor, putrezind fragmentele de text și imaginea cu rangul necesar.

Pentru a adăuga tabele pe pagina web, se adaugă eticheta

. Acest element servește ca un container de elemente care sunt folosite în loc de tabele. Fie că masa este pliată în rânduri și în mijloc, li se solicită etichete suplimentare і ,
  • tabelul este stivuit pe rânduri - etichete
  • ,
  • rândul de piele este stivuit cu stovptsiv - etichete
  • ,
  • stoptsi poate fi numit, roztashovani în primul rând - etichete
  • . Să creăm un tabel, de yak vmіst vkamomo peretin numere în rânduri și coloane:

    Rezultat:

    Iac bachite, nu era prea frumos, impodobit.

    Parametrii tabelului html: intrare, lățime, culoare corpului, cadru

    Pentru cine etichetezi

    . Masa este vinovată de răzbunare pentru că a dorit un mijloc (cap 12.1). Înlocuirea etichetelor este permisă etichetă . Textul din centru, decorat pentru ajutorul etichetei , afișat de browser într-un font aldine al imaginii și redat în centrul mijlocului. În caz contrar, comerțul cu amănuntul între mijloc, creat prin etichete і Nu.

    Exemplul 12.1. Creații de masă

    Eticheta TABLE

    Oseredok 1 Oseredok 2
    Oseredok 3 Oseredok 4

    Ordinea roztashuvannya seredkіv care arată yogo este prezentată în fig. 12.1.

    Un tabel este unul dintre instrumentele principale pentru crearea paginilor web.

    Fără a utiliza CSS, puteți crea mese alăturate cu un design pliabil. Dacă ați parcurs o serie de lecții pe site-ul Robimo - primii pași, atunci veți înțelege ce este limbajul.

    Fie că este un tabel - un set de rânduri și stovptsiv, pe retina cărora există centre. De exemplu:

    Să aruncăm o privire la tabelul nostru în HTML:

    • tabelului în sine i se solicită etichete suplimentare
      ,
    • tabelul are un nume - etichete
    Utilizați o serie de parametri:

    • lăţime- Specificați lățimea tabelului (pentru pixeli sau % din lățimea ecranului),
    • bgcolor- setați culoarea pentru fundalul meselor din mijloc,
    • fundal- umple fundalul mesei cu un mic,
    • frontieră- setați cadrul cu lățimea specificată (în pixeli) pe tabel,
    • umplutura celulara- Setați în schimb accesul între pixeli dintre cordonul clitinei și її.
    Trebuie să modificăm parametrii:

    Rezultat:

    Și mai bine, dar masa noastră este strânsă pe marginea stângă a ferestrei, ca și textul acesteia. O reparăm adăugând încă trei parametri:

    • alinia- setați alinierea mesei: stângaci (dreapta), dreptaci (stânga), centrat (centru),
    • spațierea celulelor- setați diferența dintre mijlocul tabelelor (în pixeli),
    • umplutura celulara- setați mijlocul tabelului (prin pixeli) cu textul și cordonul interior.
    Trebuie să modificăm parametrii:

    Rezultat:

    A da respect, intre mesele subvinilor. Cum să spun cellspacing="0", apoi între nabudut zvochnogo viglyadu:

    Rezultat:


    Vzagalі, pentru între vіdpovіdat doi parametri:

    • cadru- setați aspectul cadrului în jurul mesei și puteți adăuga următoarele valori:
      • vid- nu există cadre,
      • de mai sus- Doar cadrul de sus,
      • de mai jos- Doar cadrul de jos,
      • hsides- doar cadrele superioare și inferioare,
      • contra- doar cadre din stânga și din dreapta,
      • lhs- Tіlki lіva frame,
      • rhs- doar cadrul potrivit,
      • cutie- Mustață unele părți ale cadrului.
    • reguli- setați aspectul cordoanelor interne în tabele și puteți adăuga următoarele valori:
      • nici unul- între mijloc nu există între,
      • grupuri- între numai între grupuri de rânduri și grupuri de stovptsiv (va fi analizat de trei ori mai târziu),
      • rânduri- mezhі mai puțin între rânduri,
      • cols- între tilki și stovptsy,
      • toate- vodobrazhati mezhі.
    Pentru ajutor cu acești parametri, puteți stabili limitele în așa fel încât să fiți tentat. Aici tintim doar un singur cap, experimenteaza-te cu noi.

    Rezultat:


    Rețineți că între diferite browsere sunt redate în trei moduri diferit.

    Etichetele HTML tr și td

    Tabelele sunt formate pe rând. Prin urmare, sarcina din rândul (tr) este să-și extindă parametrii la toate mijlocurile (td) ale rândului. Rândurile pot avea trei parametri:

    • alinia- afișați textul în mijloc pe orizontală, puteți accepta următoarele valori: furios (dreapta), dreptaci (stânga), centrat (centru),
    • valini- vizualizați textul în mijloc pe verticală, puteți accepta următoarele valori: sus (sus), jos (jos), în centru (mijloc),
    • bgcolor- Setați culoarea rândului.
    Să ne uităm la exemplu:
    • lăţime- Specificați lățimea tabelului (pentru pixeli sau pentru lățimea lățimii, unde lățimea tabelului este luată ca 100%),
    • înălţime- setează înălțimea mijlocului, iar toate mijlocurile din același rând devin înălțimi.
    De exemplu, dodamo în codul nostru, în etichete

    Rezultat:


    Dacă specificați, dacă nu setați lățimea și înălțimea, atunci masa va fi modelată după dimensiune (deci era în fundul din față).

    Pentru că această lecție s-a terminat, exersați crearea și proiectarea meselor, de care veți avea nevoie în lecția următoare, de mi crearea meselor de structuri pliabile.

    Antetul din mijloc abo este cel mai proeminent mijloc al rândului de piele.

    Tabel creat de etichetă

    parametrii qi
    1 2 3
    poate fi împărțit în antet, subsol și partea principală, urmate de etichete suplimentare.

    Înainte de masă, puteți adăuga o legendă, o etichetă.

    În interiorul mesei

    îl poți extinde în ordine, iar în coloane poți folosi etichete vicoriste i .

    Tabelele HTML

    nu vă răsuciți pentru aspect la cadrul laturilor HTML. Conectați-le pentru o redare structurată a conținutului într-un format tabelar.

    Sintaxă

    Conținutul tabelului HTML

    Aplicați tabelul vikoristannya în cod HTML

    Mai jos sunt 2 opțiuni de tabel HTML.

    Tabel HTML simplu

    Cod HTML pentru mese pliante































    Semnătura de masă
    Centrul subsolului 1 Centrul subsolului 2 Centrul subsolului 3
    Centrul subsolului 4 Centrul subsolului 5 Centrul subsolului 6
    Oseredok 1 Oseredok 2 Oseredok 3
    Oseredok 4

    Suport de browsere

    Oferiți respect celor care, atunci când sunt uniți la mijloc, schimbă numărul de elemente la rând. De exemplu, după cum în tabel sunt 3 coloane cu mijloc, și combinăm primul și celălalt mijloc, apoi în mijlocul etichetei, care va desemna acest rând, vor fi 2 elemente, primul dintre ele va fi înlocuit cu atributul colspan = „2”.

    Un exemplu de tabele HTML pentru următoarele câteva zile

    Codul de ieșire al tabelului HTML din mediile combinate

    Etichetă
    Asa de Asa de Asa de Asa de Asa de

    Atribute

    Au etichetă HTML5

    fara atribute.

    Atribute de etichete de tabel depreciate

    Atribut Valoare Descriere
    alinia stânga
    dreapta
    centru
    justifica
    Indică regula de vizualizare în loc de tabel pe orizontală. Pentru HTML5, etichetați CSS.
    bgcolor rgb
    HTML hex
    Nume de culoare HTML

    Culoare de fundal. Pentru HTML5, etichetați CSS.

    Aplica:
    RGB: rgb(226.112.017), rgb(0, 40, 129).
    HTML hexadecimal:#1a2a2c, #eee.
    Nume de culoare HTML: galben închis;

    frontieră număr Lățimea dintre tabele în pixeli. Pentru zamovchuvannyam: 0 - nu afișați granițele.
    Pentru HTML5, etichetați CSS.
    umplutura celulara număr Acces din cordonul din mijloc spre loc. Valoarea indică numărul de pixeli. Pentru HTML5, etichetați CSS.
    spațierea celulelor număr Vіdstup mіzh intermiami oseredkіv. Valoarea indică numărul de pixeli. Pentru HTML5, etichetați CSS.
    cadru vid
    de mai sus
    de mai jos
    lhs
    rhs
    contra
    hsides
    cutie
    frontieră

    Vyznaє, yakі zovnіshnі interі vor fi vіbrazhenі:
    vid- toate intre atasamente;
    de mai sus- Doar limita superioară;
    de mai jos- Doar limita inferioară;
    lhs- Tіlki lіva hotar;
    rhs- Doar cordonul drept;
    contra- limite verticale;
    hsides- linii orizontale;
    cutie sau frontieră- Mustaţă între.

    Pentru HTML5, etichetați CSS.

    reguli nici unul
    grupuri
    rânduri
    cols
    toate

    Înseamnă că cordoanele interioare vor fi fermentate:
    nici unul- toate atasamentele;
    grupuri- între grupuri;
    rânduri- între rânduri;
    cols- între coloane;
    toate- Mustață;

    Pentru HTML5, etichetați CSS.

    rezumat text Descrierea tabelului.
    lăţime pixeli
    vіdsotki
    Lățimea mesei. Pentru HTML5, etichetați CSS.

    Codul de ieșire al unui tabel HTML simplu



















    Oseredok 1 Oseredok 2 Oseredok 3
    Oseredok 4 Oseredok 5 Oseredok 6
    Oseredok 7 Oseredok 8 Oseredok 9

    Antete de tabel HTML

    Tabelele HTML au 2 tipuri de nuclee. Eticheta atribuie un com_room unui tip special. De îndată ce komіrka câștigă rolul titlului, va juca pentru ajutorul etichetei.

    Un exemplu de tabel HTML cu un antet

    Volkswagen AG Daimler AG BMW Group
    Audi mercedes benz BMW
    Skoda Mercedes-AMG Mini
    Lamborghini Inteligent Rolls Royce

    Codul de ieșire al tabelului HTML cu antetele
























    Volkswagen AG Daimler AG BMW Group
    Audi mercedes benz BMW
    Skoda Mercedes-AMG Mini
    Lamborghini Inteligent Rolls Royce

    Combinarea centrelor pentru tabelele HTML

    În tabelele HTML, este posibil să aveți rânduri în mijloc orizontal și vertical.

    shob unește centrele pe orizontală etichetați atributul colspan=" X, la mijloc abo , de X

    shob unește centrele pe verticală etichetați atributul rowspan=" X, la mijloc abo , de X- numărul de seredkіv pentru ob'єdnannya.

    Centrele pot fi combinate orizontal și vertical în același timp. Pentru aceasta, selectați atributele colspan și rowspan pentru mijlocul necesar:

    Text în mijloc





























    Nissan
    Model Set complet Prezentare
    Nissan Qashqai VISIA +
    TEKNA +
    Nissan X-Trail ACENTA +
    CONNECTA -

    Anteturi și subsoluri în tabelele HTML

    Tabelele HTML pot fi împărțite în 3 zone: antet, mai mare, subsol.

    Să lupți pentru ajutorul învelirii rândurilor părților selectate ale tabelelor cu etichete. selectează zona antetului - zona subsolului - partea principală a tabelului.

    În mod implicit, anteturile și subsolurile nu sunt modificate de stiluri (pot fi editate prin CSS dacă este necesar), dar pot fi modificate și de browsere. De exemplu, pentru încă o oră de masă laterală bogată, anteturile și subsolurile pot fi duplicate pe partea de supraimprimare a pielii.

    Ordinea corectă de plasare a etichetelor în zonele codului HTML al tabelelor ofensive este: mai întâi, antetul, apoi subsolul, urmat de corpul principal. Dacă da, în lateral, partea principală va fi afișată între anteturi și subsoluri.

    Dacă este necesar, puteți adăuga o semnătură la tabel. Pentru care, etichetați eticheta.

    Un exemplu de tabel HTML cu anteturi și subsoluri și o legenda

    Codul de ieșire al tabelului cu anteturi și subsoluri și legenda







































    Opțiuni Renault Sandero Stepway
    Caracteristică SUTA 09H 6R SUTA 09HR6R SUTA 15H 5R
    Prezentare + + +
    Etanșeitatea motorului 0.9 (90 CP) 0.9 (90 CP) 1.5 (90 CP)
    Palivo benzină benzină motorină
    Norma de toxicitate EURO-6 EURO-6 Euro-5

    Vorbitori și grupuri de vorbitori

    Un tabel HTML poate fi extins în coloane și grupuri de coloane urmate de etichete suplimentare.

    Acest subfișier vă permite să setați stiluri pentru tabele și numărul minim de autorități CSS, modificând astfel codul tabelului în sine (setarea stilurilor pentru coloana skin a coloanei, puteți seta stiluri pentru una sau mai multe coloane pe rând).

    Etichete și plasate în mijlocul etichetei înainte de etichete , AKP6 (EDC)

    Transmisie

    Codul de ieșire al tabelului HTML c і

































    ZEN 2E2C AL A ZEN 2E2C J5 A INTENSE 2E3C AL A Caracteristică
    1.5 (90 CP) 1.2 (115 CP) 1.5 (90 CP) Etanșeitatea motorului
    motorină benzină motorină Palivo
    AKP6 (EDC) AKP6 (EDC) AKP6 (EDC) Transmisie

    Tabele la aspectul părților laterale ale site-ului

    Pe site-urile moderne, este important să afișați corect părțile laterale atât pe computere, cât și pe anexele mobile. Nu este necesar să selectați tabele pentru a se potrivi cu cadrul HTML al paginii, deoarece este posibilă adaptarea conținutului la o varietate de dimensiuni de ecran (calculatoare, smartphone-uri, tablete).

    Etichetele grupului de tabel sunt mai probabil să fie prezentate în mijlocul paginii, pentru a afișa conținutul într-un format de tabel.



    top