ફક્ત પાંચ મિનિટમાં CSS કોષ્ટકની સીમા કેવી રીતે બનાવવી તે જાણો
તમે સાંભળ્યું હશે કે CSS અને HTML કોષ્ટકો ભળતા નથી. આ ફક્ત સાચી નથી. હા, લેઆઉટ માટે HTML કોષ્ટકોનો ઉપયોગ વેબ ડિઝાઇન શ્રેષ્ઠ રીત નથી, જે CSS લેઆઉટ શૈલીઓ દ્વારા બદલવામાં આવ્યા છે, પરંતુ કોષ્ટકો હજી એક વેબપૃષ્ઠ પર કોષ્ટક ડેટા ઉમેરવા માટે ઉપયોગમાં લેવા માટે યોગ્ય માર્કઅપ છે.
કમનસીબે, કારણ કે ઘણા વેબ પ્રોફેશનલ્સ તેઓ પોઈઝન છે તે વિચારે છે તે કોષ્ટકોથી દૂર રહે છે, આ વ્યાવસાયિકોમાંના ઘણા લોકો આ સામાન્ય HTML ઘટક અને સંઘર્ષ સાથે કામ કરતા હોય છે જ્યારે તેમને વેબપેજ પર હેન્ડલ કરવાનું હોય છે. ઉદાહરણ તરીકે, જો તમારી પાસે કોઈ પૃષ્ઠ પર ટેબલ હોય અને તમે કોષ્ટક કોશિકાઓમાં આંતરિક રેખાઓ ઍડ કરવા માંગો છો.
સીએસએસ કોષ્ટક બોર્ડર્સ
જ્યારે તમે કોષ્ટકો પર સરહદો ઉમેરવા માટે CSS નો ઉપયોગ કરો છો, ત્યારે તે ફક્ત ટેબલની બહારની સરહદ ઉમેરે છે જો તમે તે કોષ્ટકની વ્યક્તિગત કોષોમાં આંતરિક રેખાઓ ઍડ કરવા માંગો છો, તો તમારે આંતરિક CSS ઘટકોની સીમાઓ ઉમેરવાની જરૂર છે. તમે વ્યક્તિગત કોષોમાં લીટીઓ ઉમેરવા માટે એચઆર ટૅગનો ઉપયોગ પણ કરી શકો છો.
આ લેખમાં શામેલ શૈલીઓ લાગુ કરવા માટે, તમારે દેખીતી રીતે તમારા વેબ પૃષ્ઠ પર કોષ્ટક હોવું જોઈએ. પછી તમારે તમારા દસ્તાવેજના માથામાં આંતરિક શૈલી શીટ તરીકે સ્ટાઇલ શીટ બનાવવી જોઈએ (જો તમે તમારી "સાઇટ" એક જ પૃષ્ઠ હોવ તો જ તમે આ કરી શકો છો) અથવા બાહ્ય સ્ટાઇલ શીટ તરીકે દસ્તાવેજ સાથે જોડાયેલ હોવ (આ તમે શું કરો છો જો તમારી સાઇટ બહુવિધ પૃષ્ઠો છે - તમે એક બાહ્ય શીટમાંથી તમામ પૃષ્ઠો શૈલીની મંજૂરી આપી શકો છો). તમે સ્ટાઇલ શીટમાં આંતરિક રેખાઓ ઉમેરવા માટે શૈલીઓ મુકીશું.
તમે પ્રારંભ કરો તે પહેલાં
પ્રથમ તમારે નક્કી કરવાની જરૂર છે કે તમે તમારી કોષ્ટકમાં લીટીઓ ક્યાં દેખાય છે. તમારી પાસે ઘણા વિકલ્પો છે, જેમાં નીચેનાનો સમાવેશ થાય છે:
- ગ્રીડ બનાવવા માટે તમામ કોષોની આસપાસ;
- માત્ર કૉલમ વચ્ચેની રેખાઓને સ્થાન આપવી;
- ફક્ત પંક્તિઓ વચ્ચે; અથવા
- ચોક્કસ કૉલમ્સ અથવા પંક્તિઓ વચ્ચે
તમે વ્યકિતગત કોશિકાઓ અથવા વ્યક્તિગત કોશિકાઓ વચ્ચેની રેખાઓ પણ ગોઠવી શકો છો.
કેવી રીતે કોષ્ટકમાં તમામ કોશિકાઓની આસપાસ લાઇન્સ ઉમેરો
તમારા કોષ્ટકમાં તમામ કોશિકાઓના રેખાઓ ઉમેરવા માટે, તે ગ્રીડ-જેવી અસર બનાવવા, તમારી શૈલી શીટને નીચે ઉમેરો:
ટીડી, મી {
સરહદ: ઘન 1px કાળા;
}
કેવી રીતે ટેબલમાં માત્ર સ્તંભો વચ્ચે રેખાઓ ઍડ કરવા
સ્તંભો વચ્ચે રેખાઓ ઉમેરવા (તે ઊભી લીટીઓ બનાવે છે જે ટેબલના કૉલમ પર ઉપરથી નીચેના સુધી ચાલે છે), તમારી શૈલી શીટને નીચે ઉમેરો:
ટીડી, મી {
સીમા-ડાબા: નક્કર 1px કાળા;
}
પછી, જો તમે તેમને પ્રથમ કૉલમ પર દેખાવા ન માંગતા હો, તો તમને તે મી અને ટીડી કોશિકાઓ માટે વર્ગ ઉમેરવાની જરૂર પડશે. આ ઉદાહરણમાં, અમે ધારીએ છીએ કે તે કોશિકાઓ પર નો-સરહદનો વર્ગ છે અને અમે આ વધુ ચોક્કસ સીએસએસ નિયમ સાથે સરહદ દૂર કરીએ છીએ. તેથી અહીં HTML વર્ગ છે જેનો આપણે ઉપયોગ કરીશું:
વર્ગ = "નો-સરહદ">
અને પછી અમે નીચેની સ્ટાઇલ શીટમાં ઉમેરી શકીએ છીએ:
.no-border {
સરહદ-ડાબી: કોઈ નહીં;
}
કેવી રીતે એક કોષ્ટકમાં માત્ર પંક્તિઓ વચ્ચે રેખાઓ ઉમેરો
કૉલમ વચ્ચેની રેખાઓ ઉમેરવાની જેમ, તમે તમારી શૈલી શીટમાં ઉમેરાયેલા એક સરળ શૈલી સાથે આ કરી શકો છો. નીચે આપેલ CSS અમારા કોષ્ટકની દરેક પંક્તિ વચ્ચે ઊભી રેખાઓ ઉમેરશે:
tr {
સીમા-નીચે: ઘન 1px કાળા;
}
અને કોષ્ટકના તળિયેની સરહદને દૂર કરવા માટે, તમે ફરી તે ટ્રેડિંગ ટેગમાં વર્ગ ઉમેરશો:
વર્ગ = "નો-સરહદ">
તમારી શૈલી શીટમાં નીચેની શૈલી ઉમેરો:
.no-border {
સરહદ તળિયે: કંઈ નહીં;
}
કોષ્ટકમાં ચોક્કસ સ્તંભ અથવા પંક્તિઓ વચ્ચેની રેખાઓ કેવી રીતે ઉમેરવી
જો તમે ફક્ત ચોક્કસ પંક્તિઓ અથવા કૉલમ્સ વચ્ચેની રેખાઓ માંગો છો, તો તમારે તે કોશિકાઓ અથવા પંક્તિઓ પર વર્ગનો ઉપયોગ કરવાની જરૂર છે કૉલમ વચ્ચેની રેખાને ઉમેરીને પંક્તિઓની વચ્ચે સહેજ વધુ મુશ્કેલ હોય છે કારણ કે તમારે તે કૉલમમાં દરેક સેલમાં વર્ગ ઉમેરવો પડશે. જો તમારો કોષ્ટક કોઈ પ્રકારની CMS થી આપમેળે જનરેટ કરવામાં આવે, તો તે શક્ય ન પણ હોઈ શકે, પરંતુ જો તમે પૃષ્ઠને હાથથી કોડિંગ કરી રહ્યાં છો, તો તમે આ અસર હાંસલ કરવા માટે યોગ્ય વર્ગો ઉમેરી શકો છો.
વર્ગ = "બાજુ-સરહદ">
પંક્તિઓ વચ્ચે રેખાઓ ઉમેરવાનું ઘણું સરળ છે, કારણ કે તમે માત્ર તે જ પંક્તિ ઉમેરી શકો છો કે જેના પર તમે રેખા જોઈ શકો છો.
વર્ગ = "સરહદ-તળિયું">
પછી તમારી શૈલી શીટમાં CSS ઉમેરો:
.border-side {
સીમા-ડાબા: નક્કર 1px કાળા;
}
.border-bottom {
સીમા-નીચે: ઘન 1px કાળા;
}
કેવી રીતે એક કોષ્ટકમાં વ્યક્તિગત સેલ આસપાસ લીટીઓ ઉમેરો
વ્યક્તિગત કોષોની આસપાસ લીટીઓ ઉમેરવા માટે, તમે કોશિકાઓનો એક વર્ગ ઉમેરો છો જે તમે કિનારાની આસપાસની છો:
વર્ગ = "સરહદ">
અને પછી તમારી શૈલી શીટમાં નીચેનો CSS ઉમેરો:
.સરહદ {
સરહદ: ઘન 1px કાળા;
}
કેવી રીતે કોષ્ટકમાં વ્યક્તિગત કોષો અંદર લીટીઓ ઉમેરો
જો તમે કોષની સામગ્રીઓની અંદર રેખાઓ ઍડ કરવા માંગો છો, તો આ કરવા માટે સૌથી સહેલો રસ્તો આડી નિયમ ટેગ (
) સાથે છે.
ઉપયોગી ટિપ્સ
જો તમે તમારી સરહદોમાં અંતરાયો જોશો તો તમારે ખાતરી કરવી જોઈએ કે સરહદ-પતન શૈલી તમારા ટેબલ પર સેટ છે. તમારી શૈલી પત્રકમાં નીચે ઉમેરો:
કોષ્ટક {
સરહદ-પતન: પતન;
}
તમે ઉપરના બધા સીએસએસને ટાળી શકો છો અને તમારા ટેબલ ટેગમાં સરહદ એટ્રીબ્યુટનો ઉપયોગ કરી શકો છો. જો કે, તેમ છતાં, તેના લક્ષણને, કે જે deprecated નથી, તે CSS કરતાં નોંધપાત્ર રીતે ઓછું લવચીક છે, કારણ કે તમે માત્ર સરહદની પહોળાઈને વ્યાખ્યાયિત કરી શકો છો અને તે ફક્ત ટેબલ અથવા કોઈની તમામ કોશિકાઓ વચ્ચે જ હોઇ શકે છે