MM Tutorials HTML & CSS HTML Tables

HTML Tables

April 26, 2010HTML & CSS

ဒီတစ်ခေါက်ကတော့ HTML Tables တွေ အကြောင်းပါ … စိတ်ဝင်စားဖို့ ကောင်းပါတယ် … ဈေးနှုံးတွေ၊ စာရင်းတွေ၊ အချိန်ဇယားတွေ ဆွဲရင် အသုံးဝင်တာပေါ့ဗျာ ကျွန်တော်ကတော့ ငှက်ပျောသီးစားနေတဲ့ အချိန်နဲ့ကြုံလို့ ငှက်ပြောသီးဈေးနှုံးတွေနဲ့ ရေးပေးလိုက်တယ် :) ။

Html Table တွေမှာ table ရေးမယ်ဆို <table> … </table> နဲ့သတ်မှတ်ပေးရပါတယ်၊ table rows တွေကိုဆိုရင်တော့ <tr> … </tr>နဲ့ သတ်မှတ်ပေးရပါတယ်၊ table data တွေကိုတော့ <td> နဲ့ </td> ကြားထဲမှာ ထည့်ရေးပေးရတယ်ဗျ။ table border ဆိုတာကတော့ ဘောင်အထူပေါ့ဗျာ၊ border ကုဒ်လေး ချန်ထားခဲ့ရင်တော့ ဘာဘောင်မှ မပါဘဲ ပေါ်လာပါလိမ့်မယ်။ လေ့လာကြည့်ပါဦး။


<html>

<body>

<h4>One Banana</h4>

<table border="1">

<tr>

<td>100 K</td>

</tr>

</table>

<h4> Three Bananas</h4>

<table border="1">

<tr>

<td>100 K</td>

<td>100 K</td>

<td>100 K</td>

</tr>

</table>

<h4> Six Bananas</h4>

<table border="1">

<tr>

<td>100 K</td>

<td>100 K</td>

<td>100 K</td>

</tr>

<tr>

<td>100 K</td>

<td>100 K</td>

<td>100 K</td>

</tr>

</table>

</body>

</html>

ဒါကတော့ ဘောင်တွေကို လေ့လာဖို့ပါ … လွယ်ပါတယ်။


<html>

<body>

<h4>ပုံမှန် ဘောင်</h4>

<table border="1">

<tr>

<td>First</td>

<td>Row</td>

</tr>

<tr>

<td>Second</td>

<td>Row</td>

</tr>

</table>

<h4>ဘောင်ကို နဲနဲထူပေးထားတယ် ...</h4>

<table border="8">

<tr>

<td>First</td>

<td>Row</td>

</tr>

<tr>

<td>Second</td>

<td>Row</td>

</tr>

</table>

<h4>ပိုထူပေးထားတယ် ...</h4>

<table border="15">

<tr>

<td>First</td>

<td>Row</td>

</tr>

<tr>

<td>Second</td>

<td>Row</td>

</tr>

</table>

</body>

</html>

ကျွန်တော်တို့ heading တွေကို <h1> to <h6> သတ်မှတ်ထားတာ သိပြီးပါပြီ။ table heading တွေကိုကျတော့ ကျွန်တော်တုုိ့က <th> … </th> နဲ့ သတ်မှတ်ပါတယ်။ နဲနဲလောက်ရေးကြည့်ပါဦး။


<html>

<body>

<table border="1">

<tr>

<th>Heading</th>

<th>Another Heading</th>

</tr>

<tr>

<td>row 1, cell 1</td>

<td>row 1, cell 2</td>

</tr>

<tr>

<td>row 2, cell 1</td>

<td>row 2, cell 2</td>

</tr>

</table>

</body>

</html>

Browser အများစုကတော့ ဘာမှမပါတဲ့ table အကွက်ကို ဖေါ်ပြလေ့ မရှိကြပါဘူး။ ဒါပေမယ့် မော်ဇီလာမှာတော့ ပေါ်ပါတယ်။ အောက်မှာက စမ်းကြည့်ဖို့ပါ။


<html>

<body>

<table border="1">

<tr>

<td>row 1, cell 1</td>

<td>row 1, cell 2</td>

</tr>

<tr>

<td>row 2, cell 1</td>

<td></td>

</tr>

</table>

</body>

</html>

Table ကတော့ ဒါပါပဲဗျာ … လွယ်ပါတယ် … ဒါပေမယ့်  tutorials တွေကိုတော့ ဆက်လေ့လာကြတော့ပေါ့။

Border ကုဒ် မထည့်လိုက်မိဘူးဆိုရင် … … …


<html>

<body>

<h4>This table has no borders:</h4>

<table>

<tr>

<td>100</td>

<td>200</td>

<td>300</td>

</tr>

<tr>

<td>400</td>

<td>500</td>

<td>600</td>

</tr>

</table>

<h4>And this table has no borders:</h4>

<table border="0">

<tr>

<td>100</td>

<td>200</td>

<td>300</td>

</tr>

<tr>

<td>400</td>

<td>500</td>

<td>600</td>

</tr>

</table>

</body>

</html>

ဒါကတော့ empty cell လေးပါ …


<html>

<body>

<table border="1">

<tr>

<td>Some text</td>

<td>Some text</td>

</tr>

<tr>

<td></td>

<td>Some text</td>

</tr>

</table></body>

</html>

ဒါကတော့တော့ caption ဆိုတဲ့ table ခေါင်းစီးလေးနဲ့ …


<html>

<body>

<table border="6">

<caption>My Caption</caption>

<tr>

<td>100</td>

<td>200</td>

<td>300</td>

</tr>

<tr>

<td>400</td>

<td>500</td>

<td>600</td>

</tr>

</table>

</body>

</html>

ဒါကတော့ coloumn တွေ row တွေကို span(ပေါင်းကူး) တဲ့ ကုဒ်လေးပါ။


<html>

<body>

<h4>Cell that spans two columns:</h4>

<table border="1">

<tr>

<th>Name</th>

<th colspan="2">Telephone</th>

</tr>

<tr>

<td>Bill Gates</td>

<td>555 77 854</td>

<td>555 77 855</td>

</tr>

</table>

<h4>Cell that spans two rows:</h4>

<table border="1">

<tr>

<th>First Name:</th>

<td>Bill Gates</td>

</tr>

<tr>

<th rowspan="2">Telephone:</th>

<td>555 77 854</td>

</tr>

<tr>

<td>555 77 855</td>

</tr>

</table>

</body>

</html>

Colspan ဆိုတာ coloum span ရဲ့ အတိုကောက်ဖြစ်ပြီး rowspan ကတော့ row span ရဲ့အတိုကောက်ပဲဖြစ်ပါတယ်။

နဲနဲတော့ မြင့်လာပြီ၊ ဒါပေမယ့် အကုန်သိပြီးသားတွေပါပဲ။


<html>

<body>

<table border="1">

<tr>

<td>

<p>This is a paragraph</p>

<p>This is another paragraph</p>

</td>

<td>This cell contains a table:

<table border="1">

<tr>

<td>A</td>

<td>B</td>

</tr>

<tr>

<td>C</td>

<td>D</td>

</tr>

</table>

</td>

</tr>

<tr>

<td>This cell contains a list

<ul>

<li>apples</li>

<li>bananas</li>

<li>pineapples</li>

</ul>

</td>

<td>HELLO</td>

</tr>

</table>

</body>

</html>

ဒါကတော Padding အသုံးပြုနည်းလေးပါ၊ Padding ဆိုတာကတော့ အခုအခံပေါ့ဗျာ၊ ဘေးဘယ်ညာအပေါ်အောက် မှာ မမြင်ရတဲ့အတုံးလေးတွေနဲ့ ခုထားသလိုမျိုး ဘောင်နဲ့ကွာနေတာကို ပြောတာပါ။


<html>

<body>

<h4>Without cellpadding:</h4>

<table border="1">

<tr>

<td>First</td>

<td>Row</td>

</tr>

<tr>

<td>Second</td>

<td>Row</td>

</tr>

</table>

<h4>With cellpadding:</h4>

<table border="1"

cellpadding="10">

<tr>

<td>First</td>

<td>Row</td>

</tr>

<tr>

<td>Second</td>

<td>Row</td>

</tr>

</table>

</body>

</html>

ဒါက Cell Spacing …


<html>

<body>

<h4>Without cellspacing:</h4>

<table border="1">

<tr>

<td>First</td>

<td>Row</td>

</tr>

<tr>

<td>Second</td>

<td>Row</td>

</tr>

</table>

<h4>With cellspacing:</h4>

<table border="1"

cellspacing="10">

<tr>

<td>First</td>

<td>Row</td>

</tr>

<tr>

<td>Second</td>

<td>Row</td>

</tr>

</table>

</body>

</html>

ဇယားကွက်မှာ နောက်ခံအရောင်တို့ ပုံတို့ထည့်ကြည့်မယ်ဗျာ။ bgcolor ဆိုတာ background color ကိုပြောတာပါ။


<html>

<body>

<h4>A background color:</h4>

<table border="1"

bgcolor="red">

<tr>

<td>First</td>

<td>Row</td>

</tr>

<tr>

<td>Second</td>

<td>Row</td>

</tr>

</table>

<h4>A background image:</h4>

<table border="1"

background="1.jpg">

<tr>

<td>First</td>

<td>Row</td>

</tr>

<tr>

<td>Second</td>

<td>Row</td>

</tr>

</table>

</body>

</html>

ဒါကတော့ တစ်ကွက်ခြင်းမှာ ပုံတွေ အရောင်တွေ ထည့်တာပါ။ စဉ်းစားတတ်ရင် စဉ်စားတတ်သလို သုံးလို့ရတယ်ပေါ့ဗျာ။


<html>

<body>

<h4>Cell backgrounds:</h4>

<table border="1">

<tr>

<td bgcolor="red">First</td>

<td>Row</td>

</tr>

<tr>

<td

background="1.jpg">

Second</td>

<td>Row</td>

</tr>

</table>

</body>

</html>

ဘယ်ညှိ၊ ညာညှိ … :P 


<html>

<body>

<table width="400" border="1">

<tr>

<th align="left">Money spent on....</th>

<th align="right">January</th>

<th align="right">February</th>

</tr>

<tr>

<td align="left">Clothes</td>

<td align="right">$241.10</td>

<td align="right">$50.20</td>

</tr>

<tr>

<td align="left">Make-Up</td>

<td align="right">$30.00</td>

<td align="right">$44.45</td>

</tr>

<tr>

<td align="left">Food</td>

<td align="right">$730.40</td>

<td align="right">$650.00</td>

</tr>

<tr>

<th align="left">Sum</th>

<th align="right">$1001.50</th>

<th align="right">$744.65</th>

</tr>

</table>

</body>

</html>

Frame ထည့်ချင်တယ်ဆိုရင်တော့ အောက်မှာနည်းနည်းလေ့လာမှ ရမယ်။


<html>

<body>

<h4>With frame="border":</h4>

<table frame="border">

<tr>

<td>First</td>

<td>Row</td>

</tr>

<tr>

<td>Second</td>

<td>Row</td>

</tr>

</table>

<h4>With frame="box":</h4>

<table frame="box">

<tr>

<td>First</td>

<td>Row</td>

</tr>

<tr>

<td>Second</td>

<td>Row</td>

</tr>

</table>

<h4>With frame="void":</h4>

<table frame="void">

<tr>

<td>First</td>

<td>Row</td>

</tr>

<tr>

<td>Second</td>

<td>Row</td>

</tr>

</table>

<h4>With frame="above":</h4>

<table frame="above">

<tr>

<td>First</td>

<td>Row</td>

</tr>

<tr>

<td>Second</td>

<td>Row</td>

</tr>

</table>

<h4>With frame="below":</h4>

<table frame="below">

<tr>

<td>First</td>

<td>Row</td>

</tr>

<tr>

<td>Second</td>

<td>Row</td>

</tr>

</table>

<h4>With frame="hsides":</h4>

<table frame="hsides">

<tr>

<td>First</td>

<td>Row</td>

</tr>

<tr>

<td>Second</td>

<td>Row</td>

</tr>

</table>

<h4>With frame="vsides":</h4>

<table frame="vsides">

<tr>

<td>First</td>

<td>Row</td>

</tr>

<tr>

<td>Second</td>

<td>Row</td>

</tr>

</table>

<h4>With frame="lhs":</h4>

<table frame="lhs">

<tr>

<td>First</td>

<td>Row</td>

</tr>

<tr>

<td>Second</td>

<td>Row</td>

</tr>

</table>

<h4>With frame="rhs":</h4>

<table frame="rhs">

<tr>

<td>First</td>

<td>Row</td>

</tr>

<tr>

<td>Second</td>

<td>Row</td>

</tr>

</table>

</body>

</html>

ဒီနေရာမှာ …

Border ဆိုတာက ပတ်ပတ်လည် စည်းတားပြီးတော့ ဘောင်ခတ်မယ်။

Box လေးထောင့်နဲ့ အကွက်လိုက် ဘောင်ခတ်မယ်။

Void ဆိုတော့ ရှောင်မယ်ပေါ့၊ ဘာကိုရှောင်မှာလဲဆိုတော့ ဘောင်ကိုပါ၊ အဲဒါကြောင့် သူကဘောင်မပါဘူးဗျ။

Above ဆိုတော့ အပေါ်မှာ တစ်ကြောင်းပဲတားမယ်။

Below (အောက်မှာ တစ်ကြောင်းပဲ တားမယ်)

Hsides (horizontal sides ဆိုတဲ့အတွက် ရေပြင်ညီ အပေါ်အောက် နှစ်ခုကို တားမယ်)

Vsides (ဘယ်ညာ နှစ်ဘက်ကို တားမယ်)

Lhs ( left hand side ဆိုတော့ ဘယ်ဘက်ကို တားမယ်)

Rhs (right hand side ဆိုတော့ ညာဘက်ကို တားမယ်)

ဒါကတော့ border နှစ်မျိုးကို ရောရေးထားတာပါ ။


<html>

<body>

<p>

If you see no frames around the tables in these examples, your browser does not support the frame attribute.

</p>

<table frame="hsides" border="3">

<tr>

<td>First row</td>

</tr>

</table>

<br />

<table frame="vsides" border="3">

<tr>

<td>First row</td>

</tr>

</table>

</body>

</html>

ဒီတစ်ခေါက် tutorial မှာ list အကြောင်း နဲနဲပါ ပါတယ်၊ ဒါကြောင့် နောက်တစ်ခေါက်မှာ ကျွန်တော်တို့ list အကြောင်းကို လေ့လာဖြစ်ပါမယ်။

<Coming: HTML List>

Facebook comments:

2 Responses

  1. nayray says:
    May 15, 2010 at 2:38 PM

    သေချာကို စိတ်ရှည်လက်ရှည် ရှင်းပြပေးထားတာ ကျေးဇူးတင်ပါတယ် အကိုရေ… ကျွန်တော်က ခုမှ လေ့လာနေတာပါ… အကိုရေးထားတာကိုလည်း တွဲပြီး လေ့လာနေတာပါ….. အများကြီး အထောက်အကူဖြစ်ပါတယ်… နောက်ထပ်တင်မယ့် ကျူတိုရီယလ်လေးတွေကိုလည်း စောင့်မျှော်နေပါတယ်…. အမြဲတမ်းဖတ်ဖြစ်နေတာ အားပေးနေတယ် အကိုရေ…. အကိုလည်း လိုချင်သော ပညာရပ်များအားလုံး အတားအဆီးမရှိ ဆည်းပူးသင်ယူနိုင်ပါစေဗျာ…ရွှင်လန်းချမ်းမြေ့ပါစေဗျာ

    Reply
    • လူခါး ... says:
      May 17, 2010 at 2:09 AM

      ဟုတ်ကဲ့ … အခုလိုအားပေးတာကို ကျေးဇူးတင်ပါတယ် … Knowledge Sharing လုပ်တဲ့အခါ ကျွန်တော်ပြောတာကို နားမလည်မှာကို အကြောက်ဆုံးပါပဲ … ဒါကြောင့်လည်း ကျူတိုရီယယ်တွေ တင်တဲ့အခါ ကျွန်တော်ကိုယ်တိုင် သေချာစမ်းပြီးမှ တင်ပါတယ် … အဲဒီအတွက်လည်း ကျူတိုရီယယ်တွေကို အလုပ်အားတဲ့ ညဘက်တွေ အချိန်ပေးပြီး လေ့လာ၊ သေချာစမ်း၊ ပြီးမှ တင်ပါတယ် … အခုတော့ ကျောင်းကပြန်ဖွင့်နေပြီမို့လို့ အချိန်မပေးနိုင်ဖြစ်သွားတာ တောင်းပန်ပါတယ် … ရအောင်တော့တင်ပေးသွားမှာပါ … တစ်ကယ်လို့နားမလည်တာရှိရင် ကျွန်တော်အမြဲသုံးတဲ့ gtu.myowin[at]gmail.com ကို မေးပို့ပြီး မေးလို့ရပါတယ် … ကျေးဇူးတင်ပါတယ် … ။

      Reply

Leave a comment


CAPTCHA Image
*

Categories

Releases

Site Informations

MT Community

Copyright © MyanmarTutorials 2012