Ինչպես ավելացնել ներքին գծերը (սահմանները) CSS- ի աղյուսակում

Իմացեք, թե ինչպես պետք է ստեղծել CSS սեղանի սահմանը ընդամենը հինգ րոպե

Դուք կարող եք լսել, որ CSS- ը եւ HTML- սեղանները չեն խառնվում: Սա պարզապես ճիշտ չէ: Այո, օգտագործելով HTML աղյուսակները դասավորության համար, այլեւս վեբ դիզայնի լավագույն պրակտիկան չէ, փոխարինվել է CSS դասավորության ոճերով, բայց սեղանները դեռեւս ճիշտ նշում են, որպեսզի օգտագործեն աղյուսակային տվյալները մի էջում:

Դժբախտաբար, քանի որ շատ վեբ մասնագետներ հեռացել են սեղաններից, մտածելով, որ նրանք թույն են, այդ մասնագետներից շատերը քիչ փորձ են ունենում աշխատել HTML- ի այս տարրերի եւ պայքարի հետ, երբ նրանք ստիպված են վարվել դրանց վրա: Օրինակ, եթե ունեք սեղան էջում եւ ցանկանում եք ներքին գծեր ավելացնել աղյուսակային բջիջներին:

CSS սեղանի սահմանները

Երբ դուք օգտագործում եք CSS- ը սեղանների սահմանները ավելացնելու համար, այն միայն ավելացնում է սեղանի դրսի շրջանակի սահմանը: Եթե ​​ցանկանում եք ավելացնել ներքին գծերը այդ սեղանի անհատական ​​բջիջներին, ապա դուք պետք է ավելացնեք սահմանները ինտերիերի CSS տարրերին: Դուք նաեւ կարող եք օգտագործել HR tag- ը `անհատական ​​բջիջների ներսում գծեր ավելացնելու համար:

Այս հոդվածում ընդգրկված ոճերի կիրառման համար դուք պետք է ակնհայտորեն ունենաք սեղան ձեր վեբ էջում: Դրանից հետո դուք պետք է ստեղծեք ոճաթերթիկ, որպես ձեր ներքին փաստաթղթերի թերթիկի էջը (հնարավոր է միայն այն, եթե ձեր «կայքը» մի էջ է) կամ փաստաթղթին կցված է որպես արտաքին ոճի թերթ (այսինքն, եթե դա տեղի ունենա, եթե ձեր կայքը մի քանի էջեր է, որը թույլ է տալիս Ձեզ ոճավորել բոլոր էջերը մի արտաքին թերթիկից): Դուք կդնեք ոճերը `ներքին ոճերը այդ ոճաթերթին ներդնելու համար:

Նախքան սկսելը

Նախ, անհրաժեշտ է որոշել, թե որտեղ եք ուզում, որ սեղանին հայտնվի գծերը: Դուք ունեք մի քանի տարբերակ, ներառյալ `

• Շրջապատող բոլոր բջիջները ցանցը ստեղծելու համար;
• Տեղադրեք գծերը ուղղակի սյունակներում.
• Պարզապես շարքերում. կամ
• Առանձին սյունակների կամ տողերի միջեւ:

Դուք նաեւ կարող եք տեղադրել գծերը առանձին բջիջների կամ ներսում անհատական ​​բջիջների մեջ:

Ինչպես ավելացնել տողեր ամբողջ բջիջների շուրջ աղյուսակում

Ձեր աղյուսակում գտնվող բոլոր բջիջների գծերը ավելացնելով, այդ ցանցային նման ազդեցություն ստեղծելով, ձեր ոճաթերթին ավելացրեք հետեւյալը.

td, th {
սահման: ամուր 1px սեւ;
}

Ինչպես ավելացնել գծեր ուղղակի սյունակների միջեւ աղյուսակում

Սյունակների միջեւ գծեր ավելացնելու համար (սա սարի սյուների վրա վերեւից ներքեւ վարող ուղղահայաց գծեր է ստեղծում) ավելացրեք ձեր ոճաթերթին.

td, th {
border-left: solid 1px սեւ;
}

Այնուհետեւ, եթե դուք չեք ցանկանում, որ նրանք հայտնվեն առաջին սյունակում, ապա ձեզ հարկավոր է ավելացնել այդ դասի եւ td բջիջներին: Այս օրինակում մենք ենթադրում ենք, որ մենք ունենք այս բջիջների անսահման դասը եւ մենք վերացնում ենք այս առավել կոնկրետ CSS կանոնը: Այսպիսով, HTML դասարանը, որը մենք օգտագործում ենք.

class = "no-border">

Եվ հետո մենք կարող էինք ավելացնել հետեւյալ ոճը մեր ոճաթերթին:

անջատված {
սահմանային-ձախ `ոչ;
}

Ինչպես ավելացնել գծեր ուղղակի շարքերում աղյուսակում

Ինչպես սյունակների միջեւ տողեր ավելացնելով, դուք կարող եք դա անել միայն մեկ պարզ ոճով `ձեր ոճաթերթին ավելացված: Ստորեւ CSS- ն ուղղակի գծեր կցուցադրի մեր սեղանի յուրաքանչյուր տողում:

tr {
border-bottom: solid 1px սեւ;
}

Եվ սեղանի ներքեւից հեռացրեք սահմանը, ապա կրկին կվերցնեք այդ տեքստի դաս:

class = "no-border">

Ավելացնել ոճը ձեր ոճաթերթին:

անջատված {
սահմանային-ներքեւ `ոչ;
}

Ինչպես ավելացնել գծեր հատուկ սյունակների կամ շարքերների միջեւ աղյուսակում

Եթե ​​դուք միայն գծեր ունեք հատուկ շարքերում կամ սյունակներում, ապա պետք է օգտագործեք այդ բջիջների կամ տողերի դասը: Սյունակների միջեւ գիծ ավելացնելը մի փոքր ավելի բարդ է, քան շարքերում, քանի որ դուք պետք է դասը ավելացնել այդ սյունակում գտնվող յուրաքանչյուր բջիջ: Եթե ​​ձեր աղյուսակը ավտոմատ կերպով գեներացվում է ինչ-որ բովանդակության CMS- ից, դա հնարավոր չի լինի, բայց եթե դուք ձեռքը կոդավորեք էջը, կարող եք ավելացնել համապատասխան դասեր, անհրաժեշտության դեպքում հասնելու համար:

class = "side-border">

Տողերի միջեւ տողերի ավելացումը շատ ավելի հեշտ է, քանի որ դասը կարող եք ավելացնել այն շարքին, որը ցանկանում եք գծի վրա:

class = "border-bottom">

Ապա ավելացրեք CSS ձեր ոճաթերթին:

.հարմար-
border-left: solid 1px սեւ;
}
ներքեւի մասում {
border-bottom: solid 1px սեւ;
}

Ինչպես ավելացնել գոտիներ Անհատական ​​բջիջների շուրջ աղյուսակում

Անհատական ​​բջիջների շուրջ տողեր ավելացնելու համար ավելացնում եք դասի այն բջիջները, որոնք ցանկանում եք սահմանը շրջանցել.

class = "border">

Եվ հետո ավելացրեք հետեւյալ CSS ձեր ոճաթերթին:

.border {
սահման: ամուր 1px սեւ;
}

Ինչպես ավելացնել գծեր Inside Individual Cells մի աղյուսակում

Եթե ​​ցանկանում եք ավելացնել գծեր բջջային բովանդակության ներսում, դա անել ամենադյուրին ճանապարհը հորիզոնական տիրույթի պիտակի հետ (

---

):

Օգտակար խորհուրդներ

Եթե ​​նկատում եք ձեր սահմաններում բացերը, ապա պետք է համոզվեք, որ սահմանի փլուզման ոճը սահմանված է ձեր սեղանի վրա: Հետեւեք ձեր ոճաթերթին:

սեղան {
սահմանի փլուզում. փլուզում;
}

Դուք կարող եք խուսափել բոլոր վերը նշված CSS- ից եւ օգտագործել ձեր սահմանային հատկանիշի սահմանային հատկանիշը: Հասկացեք, սակայն, որ իր հատկանիշը, սակայն, չկարգավորվեց, զգալիորեն ավելի քիչ ճկուն է, քան CSS- ն, քանի որ կարող եք սահմանել միայն սահմանի լայնությունը եւ կարող է միայն այն ունենալ սեղանի բոլոր բջիջներում կամ ոչ մեկը: