Lucrul cu mese html pentru incepatori, trebachev dmitry

HTML CSS Tutorial

  • Lecția nr.
    practică
    pe machete multicolumn
  • Lecția nr.
    practică
    pe machete reale

Curs avansat

  • Lecția nr.
    probleme
    cross-browser HTML și CSS
  • Lecția nr.






    avansat
    Proprietăți CSS
  • Lecția nr.
    muncă
    cu formulare HTML
  • Lecția nr.
    muncă
    cu selectori avansați
  • Lecția nr.
    Lucrul cu pseudo-
    clase și elemente

    Lucruri avansate

    • Lecția nr.
      muncă
      cu tranziții ușoare
    • Lecția nr.
      muncă
      cu animație în CSS
    • Lecția nr.
      Transformarea CSS
      în avion
    • Lecția nr.
      Transformarea CSS
      în volum
    • Lecția nr.
      Lucrul cu LESS
      Programare CSS
    • Lecția nr.
      Lucrul cu SASS
      Programare CSS

    Începând cu această lecție, nu voi mai structura întreaga pagină, consider că lucrăm întotdeauna în interiorul etichetei corporale.

    Unitate. Structura celei mai simple tabele

    Cred că vă puteți imagina ce este o masă în viața normală - un set de rânduri și coloane. la intersecția dintre care există celule.

    În HTML, tabelele sunt create într-un mod similar. Există, de asemenea, coloane și rânduri cu celule, dar codul HTML al tabelelor la prima vedere poate părea neobișnuit.

    Masa însăși are o structură rigidă: principala este eticheta

    . în interiorul căruia trebuie să fie etichete . care creează rânduri (rânduri) ale tabelului și etichete în interiorul lor
    . care creează celule.

    După cum puteți vedea, nu există etichete care să creeze coloane - tabelele sunt create de rânduri: primul rând, primul rând, apoi al doilea rând și așa mai departe.

    Studiați cu atenție exemplul de mai jos cu tabelul (tagul de tabelă a adăugat marginea atributului care stabilește limita tabelului și a celulelor acestuia):

    Codul va arăta astfel în browser:

    Faptul că spațiul de celule are o valoare implicită, poate interfera adesea cu tine. În acest caz, pur și simplu l-ați pus la zero.







    În HTML5, acest atribut este considerat învechit (dar încă mai dă o indentare în mod implicit). În schimb, ar trebui să utilizați o proprietate specială CSS, despre care vom vorbi mai târziu.

    Dacă credeți că nu ar trebui să studiați acest atribut deoarece este depășită, vă greșiți. Există mai multe site-uri din lume care nu sunt bazate pe HTML5, iar în acestea puteți întâlni acest atribut (și alte câteva învechite pe care le vom trece). În acest caz, trebuie să știți ce este și cum să lucrați cu el.

    Unitate. Atributul cellpadding

    Atributul cellpadding specifică spațiul dintre text și limita celulei. În următorul exemplu, am setat valoarea acestui atribut la 20px și acum textul se va deplasa de la limita celulei:

    Codul va arăta astfel în browser:

    Pentru comparație, rezultă modul în care tabelul va arăta în mod implicit:

    Atributul cellpadding are, de asemenea, o valoare implicită. Dacă vă împiedică, resetați-o.

    Acest atribut, la fel ca spațiul de celule, este considerat învechit în HTML5.

    Unitate. Fără spargere celulară și spațiu celular

    Să renunțăm la celulă și spațiul celular și să vedem ce se întâmplă cu masa în acest caz:

    Codul va arăta astfel în browser:

    După cum puteți vedea, în acest caz celulele mesei sunt lipite împreună. Cu toate acestea, este încă de remarcat faptul că fiecare celulă are propria limită (adică granițele sunt acum dublate). Puteți corecta acest lucru atunci când învățați limba CSS.

    Unitate. Adăugați lățime și înălțime

    Există, de asemenea, atributele de lățime și înălțime. care vă permit să setați lățimea tabelului și înălțimea tabelului respectiv (fără aceste atribute, lățimea și înălțimea tabelului sunt reglate de conținutul său: o mulțime de text - lățimea este mare, textul mic - lățimea este mică).

    Uitați-vă la exemplul aplicației:

    Codul va arăta astfel în browser:

    Valorile atributelor pot fi pixeli sau procente. Valorile în procente sunt setate astfel: width = "30%" - în acest caz tabelul va ocupa 30% din lățimea părintelui.

    Ce faceți în continuare:

    Începeți să rezolvați problemele utilizând următorul link: sarcini pentru lecție.

    Când decideți totul, mergeți la studiul unui subiect nou.

    HTML CSS Tutorial

    • Lecția nr.
      practică
      pe machete multicolumn
    • Lecția nr.
      practică
      pe machete reale

    Curs avansat

    Drepturi de autor © 2024. Toate drepturile rezervate.