Cum de a face limitele tabelului din html

Cum de a face limitele tabelului din html

Bună ziua tuturor! Deci, acum știi cum să creați un tabel de bază constând dintr-un astfel de număr de rânduri și coloane pe care le doriți. Nu-i rău, nu-i rău. Și acum să vorbim despre proiectarea acestor tabele.

În ultima lecție a tabelului afișată fără frontiere. Și, vezi, se pare așa-așa, și chiar și semnul nu este numit. Pentru a face granița tabelului în HTML, ar trebui să fie adăugate la tag-ul

atribut de frontieră. dându-i o valoare diferită de zero.

Așa că haideți să luăm frontiera pentru masă. De exemplu, pentru că avem deja:

Rezultatul în browser:

Cum de a elimina frontierele de masă

La rândul său, pentru a elimina frontierele tabel HTML, sau chiar se poate spune că pentru a le face invizibile, trebuie să setați atributul de frontieră la 0. După aceste acțiuni simple va elimina cadru.

Atribut vă permite să creați, dar nu controlează frontierele. Acesta vă permite să modificați numai grosimea lor.

Prin urmare, astăzi ne vom concentra pe CSS. ale căror proprietăți fac posibilă crearea unei frontiere folosind diferite limite, atât în ​​interiorul fiecărei celule, precum și extern, în jurul întregului tabel.

Să vedem cum se utilizează CSS pentru a crea frontierele interne și externe ale tabelului.
Pentru a face acest lucru, se scoate din atributul nostru de frontieră de masă și se adaugă stiluri:

Așa că am adăugat doar frontiera externă la masa albastră.

Rezultatul în browser:

Acum, haideți să adăugați un chenar și pentru fiecare celulă. Pur și simplu supliment stiluri:

Rezultatul în browser:

Cum de a elimina capitonarea dintre celulele într-un tabel HTML

Sunt de acord că limita definită prin utilizarea CSS, nu în aparență, așa cum ne-am dori. Fără îndoială, în ceea ce privește estetica, este de lucru. Se poate vedea pe pagina de browser, care în mod implicit afișează tabelele și celulele limite separat. Un exemplu al acestui lucru este clar demonstrat.

Cu toate acestea, doar prin aceste limite, care sunt denumite dublu, este posibil pentru a scăpa de, dacă utilizați CSS-proprietate de frontieră-colaps. În practică, se pare ca acest lucru:

Ca rezultat - distanța dintre celule este îndepărtată:

Înțeles colaps, frontiera atribut atribuit, permite eliminarea dublu cadru. După cum puteți vedea, rezultatul este un „colaps“ frontierele de celule, situat în apropiere, precum și cadrul de celule și cadrul exterior al mesei. În ceea ce privește acestea din urmă, acesta poate fi îndepărtat cu totul. Și dacă există o nevoie pentru a afișa este necesar pentru a crește lățimea. Așa că am scăpat de separatoarele din tabel. În lecția următoare vom vorbi despre modul în care puteți specifica granițele verticale și orizontale. Mult noroc!

articole similare