Change Cell Alignment

Cell အတြက္ alignment ကို css မွာ text-align နဲ႕ vertical-align properties ကို အသံုးျပုႏိုင္ပါတယ္။

text-align က အလ်ားလိုက္ alignment အတြက္ ျဖစ္ျပီးေတာ့ left , center , right စတာေတြ ကို အသံုးျပဳႏိုင္ပါတယ္။

vertical-align ကေတာ့ ေထာင္လိုက္ alignment အတြက္ပါ။ top, middle, bottom စတာေတြကို အသံုးျပဳပါတယ္။ ပံုမွန္ အားျဖင့္ စာေတြဟာ ေထာင္လိုက္ဆုိရင္ middle မွာ ေပၚပါတယ္။

Text align ေတြကို <td> သို႕မဟုတ္ <th> စတာေတြကို အသံုးျပဳႏိုင္ပါတယ္။ ဒါ့အျပင္ row တစ္ခု လံုးအတြက္ဆိုရင္ <tr> မွာ အသံုးျပဳႏိုင္ျပီး table အတြက္ ဆုိရင္ေတာ့ <table> မွာ အသံုးျပဳနိုင္ပါတယ္။.

<html>
<head>
    <title>Table</title>
    <style>
    table.pretty {
        border : 1px solid red;
        background-color :#FFFBCC; 
        border-spacing:0px;width:100%;
        height:500px;
    }
    th {border: 1px solid gray; text-align:right;}
    th.small {width:200px;}
    td {border: 1px solid gray;}
    td.align-bottom {vertical-align:bottom;}
    </style>
</head>
<body>
<table class="pretty">
    <caption>Technology Companies</caption>
    <tr>
        <th class='small'>Company</th>
        <th>Product</th>    
    </tr>
    <tr>
        <td>Apple</td>
        <td>Tablet , Phone , Computer</td>
    </tr>
    <tr>
        <td>Google</td>
        <td>Search Engine , Chrome Browser , Android</td>
    </tr>
    <tr>
        <td class="align-bottom">Microsoft</td>
        <td>Operating system, Software</td>
    </tr>
</table>
</body>
</html>

th ကို text-align:right လို႕ ေပးထားျပီးေတာ့ Microsoft ရဲ႕ td ကို align-bottom class ေပးထားပါတယ္။ ျပီးေတာ့ vertical-align ကို bottom ေပးထားလိုက္ပါတယ္။ browser မွာ အခုလိုေဖာ္ျပပါလိမ့္မယ္။

Figure 7-13

Figure 7-13.

Microsoft စာ ဟာ ေအာက္ မွာ ကပ္ေနျပီးေတာ့ th က စာေတြဟာ ညာဘက္ ကို ကပ္ေနတာ ေတြ႕ႏိုင္ပါတယ္။

results matching ""

    No results matching ""