Thursday, July 11, 2013

HTML Chapter 6 _ HTML Table

HTML document မွာ table ကို <table> tag နဲ.ေဖာ္ျပရပါတယ္။
Table တစ္ခုမွာ Rows ႏွင့္ Data cells (column) ဆိုျပီး ၂ ပိုင္း ပါ၀င္ ပါတယ္။ Table ၏ Row အတြက္ <tr> tag ကို အသံုးျပဳျပီး Data cell အတြက္ <td> tag ကိုအသံုးျပဳရပါတယ္။ td ဆိုသည္မွာ table data ကိုရည္ညြန္းျခင္း ျဖစ္ပါတယ္။ <td> tag အတြင္းမွာ text, links, images, lists, forms, စသည္တို.ကိုထည့္သြင္းေဖာ္ျပ ႏိုင္သည့္အျပင္ ေနာက္ထပ္ tables မ်ားပါ ထပ္ထည့္ ႏိုင္ပါတယ္။
Table တစ္ခုကို HTML တြင္ စေရးေတာ့မည္ဆုိလ်င္...
  1. <table> tag ကို အရင္ ေရးရပါတယ္။
  2. <table> ႏွင့္ </table> ထဲမွာမွ Row <tr> tag ကို အျမဲတမ္းအရင္ဦးဆံုး ေရးရပါတယ္။
  3. <tr> ႏွင့္ </tr> အတြင္းမွာ မွ data cell <td> ကိုေရးရပါတယ္။ Data cell (column) အေရအတြက္ အမ်ားၾကီးထည့္လို.ပါက <td></td> tags မ်ားကို ၾကိမ္ၾကိမ္ အသံုးျပဳျပီး ေရးသားႏိုင္ပါတယ္။
Table ၏ boder attribute ကိုေတာ့ border နဲပဲေရးသားျပီး border ကို web page တြင္ မျမင္ခ်င္ပါက border တန္ဖို.ကို 0 (zero) ထည့္ေပးရပါတယ္။

ေအာက္ေဖာ္ျပပါ HTML document ကို လိုက္ေရးျပီး Browser တြင္ table တစ္ခု၏ ေဖာ္ျပမွဳကို ေလ့လာၾကည့္ပါ။

<!DOCTYPE html>
<html>
<head>
<title> HTML Table </title>
</head>
<body>
    <h3> One row and one column </h3>
    <table border="1">
        <tr>
            <td> row 1, column 1 </td>
        </tr>
    </table>
<h3> One row and three columns </h3>
    <table border="1">
        <tr>
            <td> row 1, column 1 </td>
            <td> row 1, column 2 </td>
            <td> row 1, column 3 </td>
        </tr>
    </table>
<h3> Two rows and three columns </h3>
    <table border="1">
        <tr>
            <td> row 1, column 1 </td>
            <td> row 1, column 2 </td>
            <td> row 1, column 3 </td>
        </tr>
        <tr>
            <td> row 2, column 1 </td>
            <td> row 2, column 2 </td>
            <td> row 2, column 3 </td>
        </tr>
    </table>
    </body>
</html>

အထက္ပါ HTML document ကို Browser မွာၾကည့္ပါက ေအာက္ပါအတိုင္းျမင္ရပါမယ္။


No comments:

Post a Comment