css_10

Table Properties

CSS ကိုအသံုးျပဳျပီး table နဲ႔ table data ေတြကိုျပဳျပင္ေျပာင္းလဲႏိုင္ပါတယ္၊ ဥပမာ HTML Document ထဲမွာရွိတဲ့ table နဲ႔ table data တို႔ရဲ့ အထူကို ကို

1px ျဖစ္ေစခ်င္တယ္၊ အနက္ေရာင္ျဖစ္ေစခ်င္တယ္ဆိုရင္ျဖင့္ေအာက္ပါအတိုင္းေရးႏိုင္ပါတယ္၊

table, th, td
{
border: 1px solid black;
}

အထက္မွာေရးထားတာကေတာ့ table နဲ႔ table Data တို႔ကို border ထည့္မယ္၊ border အထူက 1 px , Solid အေနနဲ႔ထည့္မယ္၊ Solid လို႔မထည့္ရင္

သင့္ရဲ့ Table border က ေပၚမွာမဟုတ္ပါဘူး၊ black ဆိုတာကေတာ့ Table border ရဲ့အေရာင္က အနက္ေရာင္လို႔ေျပာတာပါ၊ ဒါဆိုရင္ေတာ့ ေအာက္က

ပံုစံမ်ိဳးရွိတဲ့ table ပါတဲ့ ၀က္ဆိုက္စာမ်က္ႏွာကိုရမယ္၊

အခုအဲ့ဒီ့ ၀က္ဆိုက္မွာ table ကိုေတြ႔ေနရပါပီ၊ table border ထည့္ဖို႔အတြက္သံုးတဲ့ property ကေတာ့ border ျဖစ္ပါတယ္၊ အဲ့ဒီ့ table မွာ

border ေတာ့ပါတယ္၊ ဒါေပမယ့္ ပါတဲ့ border က ႏွစ္ထပ္ျဖစ္ေနတယ္၊ တစ္ထပ္ကိုေဖ်ာက္လိုက္ခ်င္တယ္ဆိုရင္လဲ CSS ရဲ့ border-collapse ဆိုတဲ့

property ကိုသံုးျပီးေဖ်ာက္လိုက္ႏိုင္ပါတယ္၊ value ကိုေတာ့ collapse လို႔ထည့္ရမယ္၊ ဒါဆိုရင္ေတာ့ border တစ္ထပ္ထဲ ရွိေတာ့မယ္၊ ေအာက္ကအတိုင္း

table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}

အထက္က အတိုင္း CSS ဖိုင္မွာေရးလိုက္ရင္ေတာ့ ေအာက္က လို border တစ္ခုထဲ ပါေတာ့တဲ့ စာမ်က္ႏွာကိုေတြ႔ရမယ္၊

တည္ေဆာက္ထားတဲ့ table ရဲ့ width နဲ႔ height တို႔ကိုလဲ ျပဳျပင္လို႔ရပါတယ္၊ table ရဲ့ height နဲ႔ width တို႔ကိုျပဳျပင္ဖို႔အတြက္သံုးရတဲ့ property ကေတာ့

width  နဲ႔ height တို႔ကိုတိုင္ပါပဲ၊ ေအာက္မွာဥပမာ ၾကည့္ပါ၊

table

{

width:100%;

}
 

အထက္က အတိုင္း table width ကို 100% လို႔ထည့္လိုက္ရင္ေတာ့ သင့္၀က္ဆိုက္မွာ တင္ထားတဲ့ table ရဲ့ အက်ယ္က 100%

အျပည့္ျဖစ္သြားမယ္၊ ေအာက္မွာၾကည့္ပါ၊

The text in a table is aligned with the text-align and vertical-align properties.

Table ထဲမွာရွိတဲ့ text ေတြကိုလဲ ညာဘက္ မွာ ထားမလား ဘယ္ဘက္မွာထားမလား အလယ္မွာ ထားမလား စသျဖင့္ ခ်ိန္လို႔ရပါတယ္၊ သံုးရမယ့္ property

ကေတာ့ text-align ပါ၊ value ကေတာ့ left, right, center တို႔ထဲက ၾကိဳက္ရာတစ္ခုကိုေရြးသံုးပါ၊ ေအာက္မွာ တစ္ခုဥပမာ ျပမယ္၊

td
{
text-align:right;
}

အထက္က အတိုင္း table data ထဲမွာရွိတဲ့စာသားေတြကို ညာဘက္ကို ေရာက္ေစခ်င္ရင္ျဖင့္  value မွာ right လို႔ထည့္လိုက္ရံုပါပဲ၊ ေအာက္မွာ

၀က္ဆိုက္စာမ်က္ႏွာ

အထက္က လို အလွ်ားလိုက္မဟုတ္ပဲ ေဒါင္လိုက္ေနရာခ်ထားခ်င္ရင္လဲ ေနရာခ်လို႔ရပါတယ္၊ သံုးရမယ့္ property ကေတာ့ vertical-align ပါ၊ value

ကေတာ့ top, middle, bottom တို႔ထဲက ၾကိဳက္ရာတစ္ခုကိုသံုးႏိုင္ပါတယ္၊ ေအာက္မွာဥပမာ ၾကည့္ပါ၊

td
{
height:50p;
vertical-align:bottom;
}

အထက္က ဥပမာမွာ Table data ရဲ့ အျမင့္ကို 50 px ထားလိုက္ျပီးေတာ့ property မွာ Vartical-align သံုးတယ္၊ bottom ဆိုတဲ့ Value ကိုထည့္တယ္၊

ဒါေၾကာင့္  table data ထဲမွာရွိတဲ့စာသားေတြက table ရဲ့ေအာက္ကိုကပ္ေနမယ္၊ ေအာက္မွာၾကည့္ပါ၊

Table Padding

Table boder နဲ႔ အဲ့ဒီ့ table အတြင္းမွာရွိတဲ့ content (အေၾကာင္းအရာ/စာသား) တို႔ရဲ့အကြာအေ၀းကိုခ်ိန္ညွိဖို႔အတြက္ဆိုရင္ေတာ့ padding ဆိုတဲ့

property ကိုသံုးႏိုင္ပါတယ္၊ ေအာက္မွာဥပမာ ၾကည့္ပါ၊

td
{
padding:15px;
}

အထက္မွာေတာ့ table border နဲ႔ table content တို႔ၾကား အကြားအေ၀းကို 15px လို႔ထည့္လိုက္ပါတယ္၊ ဒါဆိုရင္ေတာ့ ေအာက္က အတိုင္း

၀က္ဆိုက္စာမ်က္ႏွာကိုရရွိပါမယ္၊

အထက္က စာမ်က္ႏွာမွာ table နဲ႔ content တို႔ အေပၚ, ေအာက္ , ဘယ္ဘက္ေဘး အားလံုး 15px ကြားေနမွာပါ၊

Table Color

Table ရဲ့ border အေရာင္ကိုလဲ ေျပာင္းလဲႏိုင္တယ္၊ ဥပမာ သင္ဆြဲထားတဲ့ table ရဲ့ border အေရာင္ကို အစိမ္းေရာင္ျဖစ္ေစခ်င္တယ္ဆိုရင္ ေအာက္က

အတုိင္းေရးႏိုင္တယ္၊

table, td, th
{
border:1px solid green;
}

table header ရဲ့ ေနာက္ခံအေရာင္ကို အစိမ္းေရာင္ေျပာင္းျပီး စာလံုးအေရာင္ကို အျဖဴေရာင္ေျပာင္း ခ်င္ရင္ျဖင့္ ေအာက္က အတိုင္း ေရးႏိုင္ပါတယ္၊

th
{
background-color:green;
color:white;
}