የኤች ቲ ኤም ኤል ኤንቢን ኤለመንት ባህሪያትን በመጠቀም

የሰንጠረዥ ባህርያት በመማር ከኤችቲኤምኤል ሰንጠረዦች የበለጠውን ማግኘት

የኤች.ቲ.ኤም.ኤል ሰንጠረዥ ባህሪያት በ HTML ሰንጠረዦች ላይ ተጨማሪ ቁጥጥር ይሰጡዎታል. ሰንጠረዦችን የበለጠ እንዲስቡ እና የገጽዎን ገጽታ እንዲለውጡ ለማድረግ ብዙ ሰንጠረዦች አሉ.

ኤች ቲ ኤም ኤል TABLE ኤለመንት ባህርያት

በኤች ቲ ኤም ኤል 5 ውስጥ ኤለ ዓለማዊ ባህርያት እና አንድ ሌላ ባህርይ ይጠቀማል:. እና 1 ወይም ባዶ እሴት ብቻ ወደ ተቀይሯል (ማለትም ድንበሮች = ""). የዚህን ክፈፍ ወርድ ለመለወጥ ከፈለጉ የድንበር-ስፊትን የሲኤስኤል ንብረት መጠቀም አለብዎት.

ስለ HTML5 ሰንጠረዥ ባህሪያት ለማወቅ ከዚህ በታች ይመልከቱ.

እንዲሁም በኤች.ቲ.ኤም.ኤል 5 ውስጥ ጊዜ ያለፈበት የኤች.ቲ.ኤል. 4.01 እሴት አካል የሆኑ ብዙ ባህሪያት አሉ.

እና በ HTML 4.01 ውስጥ የተቋረጠ አንድ ባህሪ እና እንዲሁም በ HTML5 ውስጥም ጊዜ ያለፈበት ነው.

ስለ ኤች ቲ ኤም ኤል 4.01 TABLE Attributes ተጨማሪ ይወቁ.

በተጨማሪም የማንኛቸውም የኤችቲኤምኤል መግለጫ አካል ያልሆኑ ብዙ ባህርያት አሉ.

የሚደግፏቸው አሳሾች ሊቆጣጠሯቸው እንደሚችሉ ካወቁ እና ትክክለኛውን ኤችቲኤምኤል ደን ካስጨነቁ ከሆኑ እነዚህን ባህሪያት ይጠቀሙ.

ስለ አሳሽ የተወሰኑ የ TABLE ባህርያት ተጨማሪ ይወቁ.

HTML5 TABLE Element ባህሪዎች

ከላይ እንደጠቀስነው, በ HTML5 TABLE ኤለመንት ላይ ያለው ጠቋሚ በጠቅላላው የባህርይ መገለጫ ብቻ አንድ ነው.

የድንበር መለያው በጠቅላላ ሰንጠረዥ እና በውስጡ ባሉት ሴሎች ዙሪያ ያለውን ክፈፍ ለመግለጽ ጥቅም ላይ ይውላል. በኤችቲኤም 5 ዝርዝር ውስጥ ይካተቱ እንደሆነ አንዳንድ ጥያቄዎች ነበሩ, ግን ስለ ሰንጠረዥ አወቃቀሩ መረጃዎችን ስላስተዋለ, ከቅጥ አሰራር አኳያ ብቻ ሳይሆን.

የጠርሜትን ባህሪ ለማከል, ዋጋ ከሌለው እሴቱ 1 ካልሆነ ክፈፍ ካለ እና ባዶ (ወይም ባህርይውን ተወው) ካስቀመጡት. አብዛኛዎቹ ማሰሻዎች የድንበር ስፋቶችን በፒክሰሎች ለማስታወቅ ምንም ድንበር, እና ሌላ ማንኛውም ኢንቲጀር እሴት (2, 3, 30, 500, ወዘተ) ይደግፋሉ, ግን ይህ በ HTML5 ውስጥ ጊዜ ያለፈበት ነው. በምትኩ, የድንበር ስፋትን እና ሌሎች ቅጦችን ለመለየት, የ CSS የጠረጌ ቅጥ ባህሪያትን መጠቀም አለብዎት.

ጠርዙን በጠረፍ ለመፍጠር እንዲህ ይጻፉ:

<ሰንጠረዥ ጠርዝ = "1" >

ይህ ሰንጠረዥ ያለበት ሰንጠረዥ ነው

በኤች.ቲ.ኤም.ኤል 5 ውስጥ ጊዜ ያለፈባቸው የ HTML 4.01 ባህሪዎች አሉ. ኤች.ቲ.ኤም.ኤል. 4.01 ሰነዶችን መፃፍ ካቀዱ, መማር ይችላሉ, አለበለዚያ ችላ ማለት ይችላሉ. ከእነዚህ ውስጥ አብዛኛዎቹ ባህሪያት ከዚህ በላይ የተገለጹ አማራጮች አሏቸው.

HTML5 (እና በኤችቲኤም 4.01) ውስጥ ያለው አባል የሆነውን ባህሪያት እንገልጻለን. ይህ በኤች ቲ ኤም ኤል 4.01 ውስጥ የሚሰሩ የ TABLE ባህርያት, ግን በኤች ቲ ኤም ኤል 5 ውስጥ ጊዜ ያለፈባቸው ናቸው. አሁንም ቢሆን ኤች.ቲ.ኤል. 4.01 ሰነዶችን የምትጽፍ ከሆነ እነዚህን ባህሪያት መጠቀም ይችላሉ, ነገር ግን አብዛኛዎቹ የእርስዎን ገጾች የበለጠ የወደፊት-ለኤች.ቲ.ኤም. 5 ሲቀየሩ የሚረጋገጡ አማራጮች አላቸው.

ትክክለኛ HTML 4.01 ባህርያት

ከላይ የተጠቀሰው ባህርይ.

በኤች ቲ ኤም ኤል 4.01 ውስጥ ያለው ብቸኛ ልዩነት የከፍታውን ወርድ በፒክሰሎች ለመለየት ማንኛውንም ሙሉ ኢንቲጀር (0, 1, 2, 15, 20, 200, ወዘተ.) መጥቀስ ነው.

በ 5 ፒክስል ጠርዝ ጠረጴዛ ለመገንባት, እንደሚከተለው ይጻፉ:

<ሰንጠረዥ ጠርዝ = "5" >

ይህ ሰንጠረዥ ባለ 5 ፒክሰል ጠርዝ አለው.

ሁለት ጠረጴዛዎች ያላቸውን ጠርዞች ይመልከቱ.

ዓይነቱ በሴል ጠርዝ እና በህዋስ ይዘቶች መካከል ያለው የቦታ መጠን ይገልፃል. ነባሪው ሁለት ፒክስሎች ነው. ይዘቶቹ እና ጠርዞች መካከል ምንም ክፍተት እንዲኖርዎት ካልፈለጉ የስልክ መያዣውን ወደ 0 ያቀናብሩ.

የሕዋስ ማሸጊያዎችን ወደ 20 ለማቀናበር እንዲህ ይጻፉ:

cellpadding = "20" >


ይህ ሠንጠረዥ 20 የሚሆኑ የተንቀሳቃሽ ስልክ ማስቀመጥ አለው.

የሕዋስ ክፈፎች በ 20 ፒክስሎች ይለያዩ ይሆናል.

ከስነ-ህዳግ ማጠራቀሚያ የሰንጠረዥ ምሳሌ ይመልከቱ

ባህሪው በሰንጠረዥ ሕዋሶች እና በህዋስ ይዘት መካከል ያለው የቦታ መጠን ይገልጻል. ልክ እንደ ሴሉፕሌትስ, ነባሪው ወደ ሁለት ፒክሰሎች ተቀናብሯል, ስለዚህ ምንም የሕዋስ አዘራዘር የማይፈልጉ ከሆነ ለ 0 መወሰን አለብዎት.

የሕዋስ አዘራዘር ወደ ጠረጴዛ ለመጨመር የሚከተለውን ይጻፉ

cellpacing = "20" >


ይህ ሠንጠረዥ የ 20 ሴሎች ርቀት አለው.

ሕዋሶች በ 20 ፒክስሎች ይለያዩ ይሆናል.

ከሴሎች ሴክተሮችን ጋር ያለ ሰንጠረዥ ይመልከቱ

ይህ ባህርይ ከሠንጠረዡ ውጭ ያለውን የድንበር ክፍል የትኛው ክፍል እንደሚታይ ይለያል. ጠረጴዛዎን በአራቱም ክሮች, በማናቸውም ጎን, ከላይ እና ከታች, ግራ እና ቀኝ, ወይም ምንም አልፈልግም.

ለገቢው የሠንጠረዥ ኤች ቲ ኤም ኤል እዚህ አለ,

frame = "lhs" >


ይህ ሰንጠረዥ
ይኖረዋል

ብቻ
በግራ በኩል ክፈፍ.

እንዲሁም ከታች ክፈፍ ሌላ ምሳሌ

frame = "below" >

ይህ ሰንጠረዥ ከታች ከፍራፍል አለው.

በክፈፎች አማካኝነት አንዳንድ ጠረጴዛዎችን ይመልከቱ

አይነታ ከግድፍ ባህርይ ጋር ተመሳሳይ ነው, በሰንጠረዡ ሕዋሶች ዙሪያ ያሉትን ድንበሮች ብቻ ይጎዳል. በሁሉም ሴሎች, በአምዶች መካከል, በ TBODY እና TFOOT መካከል ያሉ ቡድኖች ላይ ደንቦችን ማዘጋጀት ይችላሉ.

በመስመሮቹ መካከል መስመሮች ብቻ ሰንጠረዥ ለመገንባት, እንደሚከተለው ይጻፉ:

rules = "rows" >


ይህ 4x4 ሠንጠረዥ አለው
መስመሮች ዓምዶች አይደሉም

የተዘረዘሩ
ደንብ ባህሪ.

እና በሌላ አምድ መካከል መስመሮች

rules = "cols" >


ይሄ ነው
ሠንጠረዥ
የት;

አምዶች
ናቸው
ደምበታ

ከዚህ ጋር የ ሠንጠረዥ << ደንብ >> የያዘ ነው

መለያው ስለ ማያ ገጹ አንባቢዎች እና ሌሎች ሰንጠረዦችን ለማንበብ ችግር ሊፈጥሩ የሚችሉ ሌሎች ተጠቃሚዎችን መረጃ ያቀርባል. የማጠቃለያ ባህሪን ለመጠቀም, የሰንጠረዡን አጭር መግለጫ ይፃፉ እና እንደ ያንን ባህሪይ አድርጉት. በአጠቃላይ ድር አሳሾች ላይ ማጠቃለያ በድረ ገጽ ላይ አይታይም.

በማጠቃለያ አንድ ቀላል ሰንጠረዥ እንዴት እንደሚጻፍ እነሆ:

summary = "ይህ የሙከራ መረጃ የያዘው ናሙና ሰንጠረዥ ነው. የዚህ ሰንጠረዥ አላማ ማጠቃለያን ለማሳየት ነው." >






አምድ 1 ረድፍ 1
አምድ 2 ረድፍ 1

አምድ 1 ረድፍ 2 ​​
አምድ 2 ረድፍ 2 ​​

ከማብራሪያ ጋር ያለ ሰንጠረዥ ይመልከቱ

አይነታ የሠንጠረዡ ስፋትን በፒክሴልስ ወይም እንደ የምርት ንጥል መቶኛ ይገልጻል. ስፊቱ ካልተዘጋጀ, ሰንጠረዡ ይዘቱን ለማስቀመጥ የሚያስፈልገውን ብዙ ቦታ ብቻ ይወስዳል, እንደ የወላጅ አባዝ ስፋት ልክ እንደ ከፍተኛ ርዝመት.

በፒክሰሎች ውስጥ አንድ ስፋት ያለው ሠንጠረዥ ለመገንባት, እንደሚከተለው ይጻፉ:

<ሰንጠረዥ width = "300" >
ይህ ሠንጠረዥ ከ 80% በላይ ነው.

እና ከወላጅ አባ / እማወራ ክፍል አንድ ስፋት ያለው ሠንጠረዥ ለመገንባት, የሚከተለውን ይጻፉ:

<ሰንጠረዥ ወርድ = "80%" >
ይህ ሠንጠረዥ ከ 80% በላይ ነው.

በስፋት ያለው ሰንጠረዥ ይመልከቱ

ያልተጨመረ HTML 4.01 TABLE Attribute

ኤች ቲ ኤም ኤል 4.01 ውስጥ ተቋርጦ የነበረ እና በኤች.ቲ.ኤም.ኤል 5 ውስጥ ጊዜ ያለፈበት የ TABLE ኤሌመንት አንድ መገለጫ ባህሪ አለ. ይህ ባህርይ ሠንጠረዡ ከጎንሱ ጋር በሚዛመደው ገጽ ላይ በሚገኝበት ስፍራ እንዲቀመጥ ለማድረግ ያስችልዎታል. ይህ አይነታ በ HTML 4.01 ውስጥ ተቋርጧል እናም እሱን ከመጠቀም መቆጠብ አለብዎት. ይልቁንስ የሲአይኤስ ንብረት ወይንም ከግራ-ወደ-ግራ የግድ መጠቀም አለብዎት. እና ህዳግ-ወደ-ቀኝ: ራስ; ቅጦች. የነጥበቱ ንብረት ከቀረበው የአሰራር ባህሪ ጋር በቅርበት የሚቀርብ ውጤትን ያመጣል, ነገር ግን የተቀረው የገፅ ይዘት በሚታየው መንገድ ላይ ተጽዕኖ ሊያሳርፍ ይችላል. ኅዳግ-ቀኝ: ራስ; እና ህዳግ ወደ ግራ: ራስ; W3C እንደ አማራጭ ይቀርባል.

የአባሪ አመላካዩን በመጠቀም የተጨባጭ ምሳሌ እዚህ አለ:

<ሰንጠረዥ align = "right" >
ይህ ሰንጠረዥ ቀጥ ያለ መስመር ተስተካክሏል

ፅሁፉ ወደ ግራ በኩል ይበርዳል

የማሳያ አቀማመጦችን በመጠቀም የተቋረጠውን ምሳሌ ይመልከቱ.

እንዲሁም በተገቢ (ያልተቆራጠጠ) ኤችቲኤምኤል ተመሳሳይ ውጤት ለማግኘት የሚከተለውን ይጻፉ:

style = "float: right;" >


ይህ ሰንጠረዥ ቀጥ ያለ መስመር ተስተካክሏል

ፅሁፉ ወደ ግራ በኩል ይበርዳል

የሚከተሉት መግለጫዎች ማንኛውም የኤችቲኤምኤል መግለጫ አካል ያልሆኑ የትግበራ ባህሪያትን ያብራራሉ.

ቀዳሚው መረጃ በኤች ቲ ኤም ኤል 4.01 ውስጥ የሚገኙ የኤች ቲ ኤም ኤል መገለጫ ባህሪያትን ይገልጻል ነገር ግን በ HTML5 ውስጥ ጊዜ ያለፈባቸው ናቸው.

የሚከተሉት በየትኛውም የአሁኑ መግለጫ የማይገኙ የ TABLE ባህርያት ይገልጻሉ. የእርስዎ ገጾች ትክክለኛ መሆናቸውን ማረጋገጥ የማይፈልጉ ከሆነ እና የእርስዎ ተጠቃሚዎች እነዚህን ኤለመንቶች የሚደግፍ አሳሽ ሲጠቀሙ እነዚህን ስዕሎች መጠቀም ይችላሉ. ነገር ግን አብዛኛዎቹ በዘመናዊ አሳሾች ላይ የማይደገፉ ወይም የበለጠ ደረጃውን የጠበቁ አማራጮች ናቸው.

በእነዚህ ኤችቲኤምኤል ሰንጠረዦች ላይ እነዚህን ባህሪያት እንዲጠቀሙ እንመክራለን .

ባህሪው በሲ ኤስአይ ከመደበኛ በፊት የተካተተውን የድሮ ባህርይ ነው. የሠንጠረዡን ዳራ ቀለም እንዲቀይሩ ያስችልዎታል. የቀለም ስም ወይም የሄክዴዴሲማል ኮድ ማቀናበር ይችላሉ. ይህ አይነታ አሁንም በብዙ አሳሾች ላይ ይሰራል, ነገር ግን ለወደፊቱ አስተማማኝ ኤችቲኤምኤል ላይ ነው የሚሰራው, መጠቀም የለብዎትም, ይልቁንስ ሲኤስቀር ይጠቀሙ.

ለዚህ ባህሪ የተሻለ አማራጭ የራሱ ቅጥ ነው.

የሰንጠረዡን ዳራ ቀለም ለመቀየር, ይጻፉ:

style = "background-color: #ccc;" >

ይህ ሰንጠረዥ ግራጫ ዳራ አለው

ከ bgcolor ባህሪ ጋር ተመሳሳይነት ያለው የክፈፍ ባህሪው የአይነታውን ቀለም እንዲቀይሩ ያስችልዎታል. ይህ አይነታ በ Internet Explorer ብቻ የተደገፈ ነው. በምትኩ, ክፈፍ-ቀለም ቅጥ ያለበትን ባህሪ መጠቀም አለብዎት.

የሰንጠረዥ ጠርዝዎን ቀለም ለመቀየር, ይጻፉ:

style = "border-color: red;" >

ይህ ሰንጠረዥ ቀይ ቀለም አለው.

የጠረርቦርድ መብራት እና የመንደሪውሮአክ ባህሪያት በሠንጠረዥዎ ዙሪያ 3-ልስንፍጠር ለመፍጠር በ Internet Explorer ውስጥ ተካተዋል. ይሁንና, እንደ IE8 እና ከዚያ በላይ, ይህ በ IE7 ደረጃዎች እና በቋንቋዎች ሁነታ ብቻ የሚደገፍ ነው. Microsoft እነዚህ ባህሪያቶች ከአሁን በኋላ አይደገፉም.

በ TABLE ኤለመንት ላይ ያሉ አሻንጉሊቶች ለአጭር ጊዜ ጠቋሚዎች ጠረጴዛው ምን ያህል አምዶች እንዳላቸው እንዲያውቁ ለማገዝ ታቅዶ ነበር. ዋነኛው ምክንያት ትላልቅ ጠረጴዛዎችን መስጠትን ለማፋጠን ነው. ሆኖም ግን በኢንተርኔት ኤክስፕሎረር ብቻ ተቆጥሯል, እና እንደ IE8 እና ከዚያ በላይ, ይሄ በ IE7 ደረጃዎች እና Quirks ሁነታ ብቻ የሚደገፍ ነው.

የብራንድ ባህሪ (በ HTML5 ጊዜ ውስጥ ጊዜ ያለፈበት) ብዙ ሰዎች ለሠንጠረዦች ከፍተኛ ቁምፊ እንደሚኖራቸው ይገምታሉ. ነገር ግን ሰንጠረዦች ከይዘታቸው ስፋታቸው ጋር የተጣጣሙ ወይም በሲኤስ ወይም የስፋት ባህርይ የተቀመጠው ስፋት ሲሆኑ, ቁመቱ ሊገደብ አይችልም. ስለዚህ በተቃራኒው አሳሾች የዝግጅቱን ባህሪ ቢያንስ የሠንጠረዡን ቁመት መወሰን ይችላሉ. ጠረጴዛው ከዚህ ቁመት ከፍ ካለ, ቁመቱ ከፍ ያለ ይሆናል. ነገር ግን ንብረቱን መጠቀም አለብዎት

በ CSS የ Height ባህሪ የ CSS ባህሪን ከተጠቀሙም ከልክ ያለፈ ይዘቱ ምን እንደሚፈፀም ለመግለጽ የ "ቁመትን" መገደብ ይችላሉ.

ዝቅተኛውን ቁመት በሠንጠረዥ ለማዘጋጀት, የሚከተለውን ይጻፉ:

style = "height: 30em;" >

ይህ ሠንጠረዥ ቢያንስ 30 እጥፍ ከፍ ያለ ነው.

ሁለቱ ባህሪያት እና የሰንጠረዡ ግራ / ቀኝ ጎኖች (hspace) እና ከላይ / ቀኝ (ቬሴስ). ይልቁንስ የቅርሱን ንብረት መጠቀም አለብዎት.

ቀጥ ያለ ቦታን ወደ 20 ፒክሰሎች እና አግድም ወደ 40 ፒክሰሎች ለመጨመር የሚከተለውን ይጻፉ

style = "margin: 20px 40px;"



ይህ ሠንጠረዥ 20 ፒክሰሎች እና የ 40 ፒክስል hspace አለው.

መገለጫው የሠንጠረዡ ይዘት በወላጁ አባል ወይም መስኮት ጠርዝ ላይ መጠቀምን ወይም አለመሆኑን የሚገልጽ የቡሊያን ባህሪ ነው ወይም የግራፊንግ ማሸብለል ያስገድዱ. በምትኩ የእያንዳንዱ ሰንጠረዥ ሕዋስ የ CSS ባህሪን በመጠቀም የመጠባበቂያውን ባህሪ መግለፅ አለብዎት.

ብዙ ጽሁፍ አያቅርቡ ለማለት, የሚከተለውን ይጻፉ:

<ሠንጠረዥ>
style = "white-space: nowrap;" > ይህ ብዛት ያለው ይዘት የያዘ አምድ ነው. ነገር ግን ከመያዣው ይልቅ ሰፋፊው ወደሚቀጥለው መስመር አያይዞ መቀመጥ የለበትም, ነገር ግን በምትኩ አሳሽው መስኮቱን ሁሉንም ጎኖች ለማየት ወደ ጎን ማሸብለል ያስገድደዋል.

በመጨረሻም, ባህርዩ በእያንዳንዱ ሕዋስ ውስጥ በእያንዳንዱ ክፍል እንዴት ወደ ህዋስ ማነጣጠር እንዳለበት ይገልፃል. ከዚህ የተሳሳተ ባህሪ ይልቅ የሲ.ኤም.ኤልን ንብረቱን በድርጅትዎ መቀየር የሚፈልጉትን እያንዳንዱ ሕዋስ መጠቀም አለብዎት. የሕዋሱ ይዘት በሌሎች, ትላልቅ ሴሎች ከተፈጠረው ክፍተት ካላገኘ የዚህን ስነምግባር ውጤቶች አያስተውሉም.

አንድ ሕዋሱ ወደ ታች (ከመካከል ይልቅ ከመሠረታዊ ይልቅ ይልቅ) እንዲያሳድጉ ለማስገደድ የሚከተለውን ይጻፉ:

<ሠንጠረዥ>
ይህ ሕዋስ ከቀሩት ይልቅ ረዘም ይላል, እናም ቁመቱ ቁመቱ እንዲረዝም ያስገድዳል. ስለዚህ በቁልል የተሰራ ሕዋስ ከግርጌ ጋር የተጣጣመ መሆኑን ታያለህ.
style = "ቀጥታ-አሰላለፍ: ታች;" > ከታች ይዘቶች.
የመሃል ይዘት.