በ 5 ደቂቃዎች ውስጥ የ CSS የጠረጴዛ ድንበር እንዴት እንደሚፈጥር ይወቁ
የ CSS እና የኤች ቲ ኤም ኤል ሰንጠረዦች ካልደባለቀ ሰምተው ይሆናል. ይህ ግን በጭራሽ እውነት አይደለም. አዎ, ለዕንዲታች የኤችቲኤምኤል ሠንጠረዦችን በመጠቀም የዲጂታል አቀማመጥ ቅጦች በሲውስ ዲዛይን አቀማመጦች አልተተኩም, ነገር ግን ሰንጠረዦች አሁንም የተጠባባቂ ውሂብ ወደ ድረ-ገጽ ለመደመር ስራ ላይ የሚውሉት ትክክለኛው የአከፋፈል ማሳያ ነው.
እንደ አለመታደል ሆኖ ብዙ የድር ባለሙያዎች ከጠረጴዛዎች ርቀዋል ብለው ስለሚያስቡ ብዙዎቹ ባለሙያዎች ከዚህ የተለመደው የኤችቲኤምኤል አካል ጋር ሲሰሩ እና በድረ-ገጻቸው ላይ ሲያስቸግሩ ትግል የላቸውም. ለምሳሌ, በአንድ ገጽ ሰንጠረዥ ካለዎት እና ወደ ሰንጠረዥ ህዋሶች የውስጥ መስመሮችን ማከል ከፈለጉ.
የሲቢኤስ የሰንጠረዥ ድንበሮች
ወደ ሠንጠረዦች ጠርዞችን ለመጨመር CSS ስትጠቀም, ከማዕከላዊው ውጪ አካባቢ ያለውን ክበብ ብቻ ይጨምራል. በዛ ሰንጠረዥ ወደ ተወሰዱ ሕዋሶች ውስጥ ውስጣዊ መስመሮችን ለማከል ከፈለጉ ወደ ውስጣዊ የሲ.ኤስ.ኤስ ክፍሎችን ክፈፍ ማከል ያስፈልግዎታል. እንዲሁም በእያንዳንዱ ሕዋስ ውስጥ መስመሮችን ለማከል የ HR መለያን መጠቀም ይችላሉ.
በዚህ ጽሑፍ ውስጥ የተሸፈነውን ቅጦች ለመተግበር, በድረ ገፃችሁ ላይ ሰንጠረዥ ሊኖርዎ ይገባል. ከዚያም በሰነድዎ ራስዎ ላይ የውስጣዊ ገጽታ ቅጥ ( እንደ " የውስጠ-ቅጥ" ገጽ ) መፍጠር አለብዎት (የእርስዎ "ጣቢያ" አንድ ገጽ ነው ከሆነ) ወይም ከሰነዱ ጋር እንደ ውጫዊ ቅጥ ሉህ (እንደ ጣቢያዎ የተለያዩ ገጾች - ሁሉንም ገፆች ከአንድ ውጫዊ ገጽታ እንዲሰልጡ ያስችልዎታል. ወደዚያ ቅጥ ሉህ ውስጥ የውስጥ መስመሮችን ለመጨመር ቅጦች ያስቀምጣሉ.
ከመጀመርዎ በፊት
በመጀመሪያ ጠረጴዛዎን በሠንጠረዥዎ ውስጥ እንዲታይ የሚፈልጉትን መወሰን ያስፈልግዎታል. ብዙ አማራጮች አለዎት, የሚከተሉትንም ጨምሮ:
- ፍርግርግ ለመፍጠር ሁሉንም ሴሎች ዙሪያ ዙሪያ
- በመስመሮቹ መካከል ያሉትን መስመሮች ለይቶ ማስቀመጥ;
- በመስመሮቹ መካከል ብቻ; ወይም
- በተወሰኑ አምዶች ወይም ረድፎች መካከል.
በእያንዳንዱ ነጠላ ሕዋስ ወይም በግለሰብ ነጠላ ሕዋሶች ውስጥ ያሉትን መስመሮች ለይተው ማስቀመጥ ይችላሉ.
በጠረጴዛ ዙሪያ ባሉ ሴሎች ዙሪያ መስመሮችን ማከል
በሠንጠረዥ ውስጥ በሁሉም ሴሎች ዙሪያ መስመሮችን ለመጨመር, ያንን ፍርግር-ምስል አይነት በመፍጠር, የሚከተለውን ወደ ቅጥ ሉህዎ ያክሉ.
td, th {
ድንበር: ጠንካራ 1px ጥቁር;
}
በሠንጠረዥ ውስጥ ባሉት አምዶች መካከል መስመሮችን ማከል
በአምዶች መካከል መስመሮችን ለማከል (ሰንጠረዥን አምዶች ላይ ከላይ ወደ ታች የሚንከባከቡ ቀጥታ መስመሮችን ይፈጥራል), የሚከተለውን ወደ ቅጥ ሉህዎ ይጨምሩ:
td, th {
ጠርዝ-ግራ: ጠንካራ 1 ፒኤክስ ጥቁር;
}
ከዚያም በመጀመሪያ ዓምድ ላይ እንዲታዩ የማይፈልጉ ከሆነ ለት እና ቲዲ ህዋሶች አንድ ክፍል ማከል ያስፈልግዎታል. በዚህ ምሳሌ, በነዚያ ሕዋሶች ላይ የድንበር ገደብ ያለው ክፍል አለ ብለን እንወስዳለን እናም በተሻለ በተመረጡ የሲ.ኤስ.ኤስ ደንብ ላይ ወሰንን እናስወግዳለን. ስለዚህ እኛ የምንጠቀመው የኤች.ቲ.ኤም.ኤል ክፍል ነው.
class = "no-border">
እና በመቀጠል የሚከተለው ቅጥ ወደ የእኛ ቅፅል ወረቀት መጨመር እንችላለን:
.no-border {
border-left: none;
}
ሰንጠረዥን በጠረፍ መካከል ብቻ ማከል
በአምዶች መካከል መስመሮችን እንደማከል ሁሉ ይህንን ወደ አንድ ቅጥ ቀላል ገጽዎ ውስጥ አንድ ቀላል ንድፍ ብቻ ሊያደርጉት ይችላሉ. ከታች ያለው የሲኤስሲ ሰንጠረዥ በእያንዳንዱ ረድፍ ሰንጠረዥ መካከል ቀጥ ያለ መስመሮችን ያክላል.
tr {
ከታች-ከታች: ጠንካራ 1 ፒኤክስ ጥቁር;
}
እና ከሠንጠረዡ ግርጌ ላይ ያለውን ወሰን ለማስወገድ, እንደገና በዛ ት መለያ መለጠፍ ይችላሉ.
class = "no-border">
የሚከተለውን ቅፅ ወደ የእርስዎ ቅጥ ሉህ ያክሉ:
.no-border {
ከታች-ታች: ምንም;
}
በሠንጠረዥ ውስጥ በተወሰኑ አምዶች ወይም ረድፎች ውስጥ መስመሮችን ማከል
በተወሰኑ ረድፎች ወይም ዓምዶች መካከል መስመሮችን ብቻ ከፈለጉ, በእነዚያ ክፍሎች ወይም ረድፎች ላይ አንድ ክፍል መጠቀም ያስፈልግዎታል. በክምችት መካከል መስመድን መጨመር ቀላል ነው ምክንያቱም ክፍሉን በእያንዳንዱ ረድፍ ውስጥ ወደ እያንዳንዱ ሕዋስ ማከል አለብዎት. ሠንጠረዥዎ ከአንድ የ CMS አይነት በራስ-ሰር ከተመነጨ ይህ ሊገኝ አይችልም, ነገር ግን ገጹን የሚይዙ ከሆነ, ይህን ውጤት ለማስገኘት ተገቢውን መደብ ማከል ይችላሉ.
class = "side-border">
ገጹን ወደ መስመሮቹ እንዲደርሱት ስለሚፈልጉ ልክ በመስመሩ መካከል መስመሮችን መጨመር በጣም ቀላል ነው.
class = "border-bottom">
ከዚያ CSS ን ወደ ቅፅህ ወረቀትዎ ያክሉ:
.border-side {
ጠርዝ-ግራ: ጠንካራ 1 ፒኤክስ ጥቁር;
}
. bottom border {
ከታች-ከታች: ጠንካራ 1 ፒኤክስ ጥቁር;
}
በሠንጠረዥ ውስጥ በተወሰኑ ሕዋሳት ዙሪያ መስመሮችን ማከል
በእያንዳንዱ ነጠላ ሕዋስ ላይ መስመሮችን ለመጨመር አንድ ክበብ በዙሪያው ለሚፈልጉት ህዋሶች ያክላሉ:
class = "border">
እና ከዚያ የሚከተለው CSS ን ወደ ቅጦችዎ ያክሉት-
.border {
ድንበር: ጠንካራ 1px ጥቁር;
}
ሰንጠረዥ ውስጥ በተናጠል ሕዋስ ውስጥ ምን ማከሚያዎችን ማከል እንደሚቻል
በአንድ ህዋስ ውስጥ መስመሮችን ማከል ከፈለጉ, ይህን ለማድረግ ቀላሉ መንገድ ከጎንዮሽ ደንቦች (
) ጋር ነው.
ጠቃሚ ምክሮች
በክፍልችዎ ውስጥ ክፍተቶችን ካስተዋሉ የድንበር-ድፋት ቅጡ በጠረጴዛዎ ላይ መቀመጡን ያረጋግጡ. የሚከተለውን ቅደም ተከተል ወደ እርስዎ ቅጥ ሉህ ያክሉ:
ሰንጠረዥ {
ድንበር-ድፋት; ድብደባ;
}
ከላይ ባሉት የሲ.ኤስ.ኤስ. ላይ ሁሉንም ማስወገድ እና በሰንጠረዥ መለያዎ ውስጥ የክልል ባህሪን መጠቀም ይችላሉ. ይሁን እንጂ የሲሚንቶው ጠርዝ በሲኤስ ሲነት ላይ በጣም የተወሳሰበ ቢሆንም ባህርጡ ግን ምንም እንዳልተሳካ መገንዘብ እንደሚቻል መገንዘብ አለብዎት.