HTML Cell Merge, Appearance, Frame အေၾကာင္း
Cell Merge
Cell Merge ပိုင္းကေတာ့ table ပိုင္းကို ေသခ်ာ သိထားရင္ နားလည္လြယ္မယ္လို႔ ထင္ပါတယ္။ Cell Merge ကေတာ့ Cell ႏွစ္ခု ဒါမွမဟုတ္ Cell ႏွစ္ခုထက္ ေပါင္းတာေပါ့။ Cell Merge ကို ဒီလိုေပါင္းရမွာပါ။ Table တစ္ခုကို စခဲ့တုန္းက row ေတြကို <tr>နဲ႔ ေရးရမွာပါ။ <tr> တစ္ခုမွာ <td> ၂ ခုပါရင္ ေနာက္ထပ္ <tr> မွာလည္း <td> ၂ ခုပါ၀င္ရမွာပါ။ ဒါေပမယ့္ cell ေတြကို merge လုပ္လိုက္ရင္ အနည္းငယ္ ေျပာင္းလဲကုန္ပါတယ္။ အေပၚမွာ column သံုးခု ။ ဒါေၾကာင့္ <td> ၃ ခုပါမယ္။ ဒါေပမယ့္ ေအာက္မွာက column ၃ ခုမွာ ႏွစ္ခုကို ေပါင္းလိုက္တယ္။ ဒါဆိုရင္ cell က ၂ ခုပဲ ရိွေတာ့မယ္။ ဒါဆိုရင္ေတာ့ <td> ၂ ခုပဲ ပါေတာ့မယ္။ အဲဒါကေတာ့ column merge လုပ္တဲ့အခါမွာေပါ့။ Row ကလည္း အဲလိုပါပဲ။ အခုေတာ့ column merge လုပ္တဲ့ code ေလးကို ၾကည့္လိုက္ပါအံုး။
<html>
<head>
<title>Example</title>
</head>
<body>
<table border=”1">
<tr>
<td> Cell 1 </td>
<td> Cell 2 </td>
<td> Cell 3 </td>
</tr>
<tr>
<td colspan=”2"> Cell 1
</td>
<td> Cell 3 </td>
</tr>
</table>
</body>
</html>
အေပၚက code မွာ <td colspan=”2"> ဆိုတာကို ေတြ႕ႏိုင္မယ္ ထင္ပါတယ္။ အဲဒါကေတာ့ Cell ၂ ခု ေပါင္း မယ္ဆိုတဲ့ အဓိပၸာယ္ပါ။ တကယ္လို႔ Cell ၃ ခုေပါင္းခ်င္ရင္ ေတာ့ <td colspan=”3"> ပါ။ ကြၽန္ေတာ္ အဲလိုမ်ဳိး code ကို ေျပာင္းေရးလိုက္ရင္ ဒီလိုေတြ႕ရမွာပါ။
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<table border=”1">
<tr>
<td> Cell 1 </td>
<td> Cell 2 </td>
<td> Cell 3 </td>
</tr>
<tr>
<td colspan=”3">
Cell 1
</td>
</tr>
</table>
</body>
</html>
ကြၽန္ေတာ္တို႕ေတြ column ကုိ ၃ ခုစလံုး ေပါင္း လိုက္တဲ့အတြက္ စုစုေပါင္း column ၁ ခုပဲရိွေတာ့တယ္။ ဒါေၾကာင့္ <td> တစ္ခုကိုပဲ သံုးတာပါ။ ကဲ... ဆက္ၿပီး ေတာ့ example တစ္ခုေလာက္ ေဆာက္ၾကည့္ရေအာင္။
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<table border=”1">
<tr>
<td colspan=”3">
List Of Adboe Software
</td>
</tr>
<tr>
<td> Adobe Acrobat </td>
<td> Adobe Dreamweaver </td>
<td> Adboe Flash </td>
</tr>
<tr>
<td> Adobe InDesign </td>
<td> Adobe Photoshop </td>
<td> Adboe Bridge </td>
</tr>
</table>
</body>
</html>
အဲဒီက code မွာဆိုရင္ေတာ့ List Of Adboe Sofware အတြက္ Column ၃ ခုလံုးကို merge လုပ္ထား တာကို ေတြ႕မွာပါ။
Column ၃ ခုကို merge လုပ္လိုက္တဲ့အတြက္ column ၁ ခုပဲ ရိွပါေတာ့တယ္။ ဒါေၾကာင့္ <td> တစ္ခုပဲ လိုအပ္ပါေတာ့တယ္။
အခုေလာက္ဆိုရင္ေတာ့ Column Merge ကို သိေလာက္ၿပီ ထင္ပါတယ္။ ဆက္ျပီး Row Merge အေၾကာင္းေလး ေလ့လာရေအာင္။
Row ေတြ Merge လုပ္တဲ့အခါမွာလည္း column merge လုပ္သလိုပါပဲ။ အရင္ဆံုး code ေလးစေရးလိုက္ရ ေအာင္။
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<table border=”1">
<tr>
<td rowspan=”2">
Cell Left
</td>
<td> Cell 2 </td>
</tr>
<tr>
<td> Cell 3 </td>
</tr>
</table>
</body>
</html>
ပထမဆံုး Column မွာ <td rowspan=”2"> ဆိုတာေလး ရိွပါတယ္။ ပထမဆံုး Column မွာ Row ၂ခုကို ေပါင္းမယ္ဆိုတဲ့ အဓိပၸာယ္ပါ။ အေပၚမွာ column ၂ ခု ရိွေပမယ့္ ေနာက္ထပ္တစ္ဆင့္မွာေတာ့ Column ၁ ခုပဲ ရိွပါ ေတာ့မယ္။
ဘာျဖစ္လို႔လည္း ဆိုရင္ေတာ့ First Column မွာ သူ႕ေအာက္က First Column နဲ႕ ေပါင္းလိုက္ေတာ့ Column တစ္ခု ေပ်ာက္သြားတာေပါ့။ ထပ္ၿပီးရွင္းေအာင္ ေနာက္ ထပ္ example တစ္ခု ထပ္ျပပါမယ္။
<html>
<head>
<title> Example </title>
</head>
<body>
<table border=”1">
<tr>
<td> Row1 , Cell1
</td>
<td> Row1 , Cell2
</td>
<td> Row1 , Cell3
</td>
</tr>
<tr>
<td rowspan=”2">
Left
</td>
<td> Center </td>
<td rowspan=”2">
Right
</td>
</tr>
<tr>
<td> Cell 1 </td>
</tr>
</table>
</body>
</html>
ဒီ example မွာဆိုရင္ row span ကုိ ေကာင္း ေကာင္းနားလည္မယ္ ထင္ပါတယ္။ Left နဲ႔ Right ဆိုျပီး row ႏွစ္ခုေပါင္းလိုက္ေတာ့ ေအာက္ဆံုး row မွာ column တစ္ကြက္ပဲ က်န္ေတာ့တဲ့အတြက္ <td> တစ္ခုပဲ ေရးရ တာပါ။
Appearnce
ကြၽန္ေတာ္တို႔ေတြဟာ Table ေတြမွာ background color ေတြ အသံုးျပဳႏိုင္ပါတယ္။ border အသံုးျပဳနည္းကို ေတာ့ အေပၚမွာ ေဖာ္ျပၿပီးသြားပါၿပီ။ အခု ကိုယ္လိုခ်င္တဲ့ cell မွာ background အေရာင္ေလးေတြ ထည့္ရေအာင္။
<html>
<head>
<title>Example</title>
</head>
<body>
<table border=”1">
<tr>
<td bgcolor=”blue”>
<font color=”#FFFFFF”>BLUE</font>
</td>
<td bgcolor=”red”>
Red
</td>
<td bgcolor=”#EABCDF”>
Hex Color
</td>
</tr>
</table>
</body>
</html>
အဲဒီမွာဆိုရင္ bgcolor ကိုေတြ႕မွာပါ။ အဲဒါကေတာ့ background အေရာင္ထည့္တာပါ။ ကြၽန္ေတာ္တို႕ေတြ background အေရာင္ကို ထည့္လို႕ရေပမယ့္ စာလံုး အေရာင္ေတြထည့္လို႔ မရပါဘူး။ ကြၽန္ေတာ္တို႕ေတြ စာလံုး အေရာင္ထည့္ခ်င္ရင္ေတာ့ font color နဲ႔ ထည့္သြင္းရပါ တယ္။ တျခားအဆင္ေျပတဲ့နည္းကေတာ့ CSS အသံုးျပဳ လိုက္ျခင္းပါပဲ။ ဒီစာအုပ္ထဲမွာေတာ့ CSS အေၾကာင္း ပါ၀င္ျခင္း မရိွေသးဘူး။ အခုဆိုရင္ေတာ့ bg color ကို နည္းနည္းနားလည္လာျပီ ထင္ပါတယ္။ တကယ္လို႕ ကြၽန္ ေတာ္တို႕ေတြ row တစ္ခုလံုးကို အေရာင္ထည့္ခ်င္ရင္ ေတာ့ <tr> မွာ bgcolor ဆိုတဲ့ attribute သံုးရပါမယ္။
<html>
<head>
<title>Example</title>
</head>
<body>
<table border=”1">
<tr>
<td bgcolor=”blue”>
<font color=”#FFFFFF”>BLUE</font>
</td>
<td bgcolor=”red”>
Red
</td>
<td bgcolor=”#EABCDF”>
Hex Color
</td>
</tr>
<tr bgcolor=”#FF6699">
<td> a </td>
<td> b </td>
<td> c </td>
</tr>
</table>
</body>
</html>
အဲဒီမွာဆိုရင္ေတာ့ <tr bgcolor=”#FF6699"> ေၾကာင့္ row တစ္ခုလံုး အေရာင္ေျပာင္းသြားတယ္ ဆိုတာ ကို ေတြ႕ႏိုင္မွာပါ။
အခုေလာက္ဆိုရင္ေတာ့ table အေၾကာင္း သိေလာက္ပါျပီ။ table က HTML နဲ႕ေရးရတာ ေတာ္ေတာ္ လက္၀င္ျပီး စိတ္ပ်က္ဖို႕ေကာင္းပါတယ္။ Dreamweaver လိုမ်ဳိး software သံုးလိုက္ရင္ေတာ့ table တစ္ခု ေဆာက္ ရတာ အရမ္းလြယ္ပါတယ္။ table ကို merge လုပ္တာ ေတြကလည္း dreamweaver မွာ အလြယ္တကူလုပ္ႏိုင္ပါ တယ္။ ဒီမွာ dreamweaver အေၾကာင္းေျပာတာ မဟုတ္ပဲ HTML ကို အေျခခံက အစနားလည္ေအာင္ ေရးတတ္ ေအာင္ ေျပာျပထားတာေၾကာင့္ အခုလိုမ်ဳိး နည္းနည္း လက္၀င္ေပမယ့္ နားလည္ေအာင္ ေလ့လာသင့္ပါတယ္။
MAGAZINE CONTENT
Career
Copyright Policy & Declaration
Website တြင္ ေဖာ္ျပထားေသာ သတင္းအခ်က္အလက္မ်ားသည္ Knowledge Bridge Magazine တြင္ ထည့္သြင္းေဖာ္ျပထားေသာ အခ်က္အလက္မ်ား ျဖစ္သည္။
Online Website မ်ား Blog မ်ားတြင္ အသုံးျပုပါက Credit ေပးရန္လိုအပ္မည္ျဖစ္ျပီး Printing Media (Offline Media) မ်ားတြင္ထည့္သြင္း အသုံးျပုလိုပါက ကာယကံရွင္(စာေရးဆရာ) ၏ ခြင့္ျပုခ်က္ လိုအပ္မည္ျဖစ္ပါသည္။
Visitors Counter
 | Today | 14 |
 | Yesterday | 174 |
 | This week | 615 |
 | Last week | 1391 |
 | This month | 1586 |
 | Last month | 5626 |
 | All days | 53456 |
Your IP: 38.107.191.96
,
Today: Sep 09, 2010