HTML table tag : สอน tag ของ table tag, เรียน tag ของ table tag
 

Reference

Reference ในเว็บไซต์ Function.in.th เป็นการนำเสนอความรู้ในรูปแบบของแหล่งอ้างอิงของคำสั่งต่าง ๆ ที่ใช้ในการเขียนโปรแกรม โดยผู้ที่สนใจสามารถเข้ามาเรียนรู้การใช้งานคำสั่งของการเขียนโปรแกรมเหล่านี้ได้ ผ่านทาง URL code.function.in.th ทั้งนี้ผู้อ่านยังสามารถร่วมแสดงความคิดเห็นบนเนื้อหาที่มีสอนได้ ซึ่งถือเป็นการส่งเสริมให้มีการแลกเปลี่ยนประสบการณ์และความรู้ระหว่างผู้อ่านด้วยกันเอง
  • table ใช้ในการสร้างตาราง
    table border ใช้ในการกำหนดความหนาของเส้นขอบ
    table cellspacing ใช้ในการกำหนดระยะห่างระหว่าง cell ในตาราง
    table cellpadding ใช้ในการกำหนดระยะห่างระหว่างข้อมูลกับกรอบของ cell
    table width ใช้ในการกำหนดความกว้างของตาราง
    table height ใช้ในการกำหนดความสูงของตาราง
    table bordercolor ใช้ในการกำหนดสีให้กับเส้นขอบ
    table background ใช้ในการกำหนดภาพพื้นหลังให้กับตาราง
    table frame ใช้ในการกำหนดลักษณะของการแสดงเส้นขอบ
    table rules ใช้กำหนดลักษณะการแสดงเส้นแบ่งช่องเซลล์
    table bgcolor ใช้กำหนดสีพื้นหลังของตาราง
    caption ใช้กำหนดหัวข้อให้กับตาราง
    caption align ใช้กำหนดตำแหน่งของหัวข้อในตาราง
    tr ใช้กำหนดแถวให้กับตาราง
    tr bgcolor ใช้กำหนดสีพื้นหลังให้กับแถว
    th ใช้กำหนดคอลัมน์ ในลักษณะที่เป็นหัวข้อ
    th bgcolor ใช้กำหนดสีพื้นหลังให้กับคอลัมน์
    td ใช้กำหนดคอลัมน์
    td bgcolor ใช้กำหนดสีพื้นหลังให้กับคอลัมน์
    td align ใช้กำหนดตำแหน่งของข้อมูลใน cell ในแนวนอน
    td valign ใช้กำหนดตำแหน่งของข้อมูลใน cell เมื่อดูจากแนวตั้ง
    td colspan ใช้กำหนดการรวมคอลัมน์ในแนวนอน ( merge cell )
    td rowspan ใช้กำหนดการรวมคอลัมน์ในแนวตั้ง ( merge cell )
    thead tbody tfoot ใช้กำหนดเพื่อแบ่งส่วนของตารางออกเป็น 3 ส่วนใหญ่ๆ ได้แก่ thead, tbody, tfoot
  • tag :
    <table> ... </table>

    position :
    <body> ... </body>

    content :
    ใช้ในการสร้างตาราง

    example :
    <table>
         <tr>
              <td> แถวที่ 1 หลักที่ 1 </td>
              <td> แถวที่ 1 หลักที่ 2 </td>
         </tr>
         <tr>
              <td> แถวที่ 2 หลักที่ 1 </td>
              <td> แถวที่ 2 หลักที่ 2 </td>
         </tr>
    </table>

  • tag :
    <table border="value"> ... </table>

    value :
    ตัวเลข

    content :
    ใช้ในการกำหนดความหนาของเส้นขอบ

    example :
    <table border="2"> ... </table>

  • tag :
    <table cellspacing="value"> ... </table>

    value :
    ตัวเลข

    content :
    ใช้ในการกำหนดระยะห่างระหว่าง cell ในตาราง

    example :
    <table cellspacing="0"> ... </table>

  • tag :
    <table cellpadding="value"> ... </table>

    value :
    ตัวเลข

    content :
    ใช้ในการกำหนดระยะห่างระหว่างข้อมูลกับกรอบของ cell

    example :
    <table cellpadding="0"> ... </table>

  • tag :
    <table width="value"> ... </table>

    value :
    ตัวเลข, เปอร์เซ็นต์

    content :
    ใช้ในการกำหนดความกว้างของตาราง

    example :
    <table width="500px"> ... </table>

  • tag :
    <table height="value"> ... </table>

    value :
    ตัวเลข, เปอร์เซ็นต์

    content :
    ใช้ในการกำหนดความสูงของตาราง

    example :
    <table height="800px"> ... </table>

  • tag :
    <table bordercolor="value"> ... </table>

    value :
    ชื่อสี, #ค่าสี

    content :
    ใช้ในการกำหนดสีให้กับเส้นขอบ

    example :
    <table bordercolor="#ff00aa"> ... </table>

  • tag :
    <table background="value"> ... </table>

    value :
    ชื่อไฟล์ภาพ

    content :
    ใช้ในการกำหนดภาพพื้นหลังให้กับตาราง

    example :
    <table background="panda.jpg"> ... </table>

  • tag :
    <table frame="value> ... </table>

    value :
    above, below, border, box, hsides, vsides, void, lhs, rhs

    content :
    ใช้ในการกำหนดลักษณะของการแสดงเส้นขอบ

    example :
    <table frame="above"> ... </table>

  • tag :
    <table rules="value"> ... </table>

    value :
    all, none, rows, cols, groups ( กรณีมีการใช้ thead, tbody, tfoot )

    content :
    ใช้กำหนดลักษณะการแสดงเส้นแบ่งช่องเซลล์

    example :
    <table rules="rows"> ... </table>

  • tag :
    <table bgcolor="value"> ... </table>

    value :
    ชื่อสี, #ค่าสี

    content :
    ใช้กำหนดสีพื้นหลังของตาราง

    example :
    <table bgcolor="#aa0055"> ... </table>

  • tag :
    <caption> ... </caption>

    position :
    <table> ... </table>

    content :
    ใช้กำหนดหัวข้อให้กับตาราง

    example :
    <caption> ตารางสอนปี 2552 </caption>

  • tag :
    <caption align="value"> ... </caption>

    value :
    top, bottom, left, right

    content :
    ใช้กำหนดตำแหน่งของหัวข้อในตาราง

    example :
    <caption align="bottom"> สรุปยอดขาย </caption>

  • tag :
    <tr> ... </tr>

    position :
    <table> ... </table>

    content :
    ใช้กำหนดแถวให้กับตาราง

    example :
    <table>
         <tr> แถวที่ 1 </tr>
         <tr> แถวที่ 2 </tr>
    </table>

  • tag :
    <tr bgcolor="value"> ... </tr>

    value :
    ชื่อสี, #ค่าสี

    content :
    ใช้กำหนดสีพื้นหลังให้กับแถว

    example :
    <table>
         <tr bgcolor="blue"> แถวที่ 1 </tr>
         <tr bgcolor="#ff00aa"> แถวที่ 2 </tr>
    </table>

  • tag :
    <th> ... </th>

    position :
    <tr> ... </tr>

    content :
    ใช้กำหนดคอลัมน์ ในลักษณะที่เป็นหัวข้อ

    example :
    <table>
         <tr> <th> ยอดขาย </th> </tr>
         <tr> <td> 200 บาท </td> </tr>
         <tr> <td> 100 บาท </td> </tr>
    </table>

  • tag :
    <th bgcolor="value"> ... </th>

    value :
    ชื่อสี, #ค่าสี

    content :
    ใช้กำหนดสีพื้นหลังให้กับคอลัมน์

    example :
    <table>
         <tr> <th bgcolor="green"> ยอดขาย </th> </tr>
         <tr> <td> 200 บาท </td> </tr>
         <tr> <td> 100 บาท </td> </tr>
    </table>

  • tag :
    <td> ... </td>

    position :
    <tr> ... </tr>

    content :
    ใช้กำหนดคอลัมน์

    example :
    <table>
         <tr>
              <td> แถวที่ 1 หลักที่ 1 </td>
              <td> แถวที่ 1 หลักที่ 2 </td>
         </tr>
         <tr>
              <td> แถวที่ 2 หลักที่ 1 </td>
              <td> แถวที่ 2 หลักที่ 2 </td>
         </tr>
    </table>

  • tag :
    <td bgcolor="value"> ... </td>

    value :
    ชื่อสี, #ค่าสี

    content :
    ใช้กำหนดสีพื้นหลังให้กับคอลัมน์

    example :
    <table>
         <tr> <th> ยอดขาย </th> </tr>
         <tr> <td bgcolor="#1122aa"> 200 บาท </td> </tr>
         <tr> <td bgcolor="#bbaacc"> 100 บาท </td> </tr>
    </table>

  • tag :
    <td align="value"> ... </td>

    value :
    left, center, right, justify ( เต็มช่อง )

    content :
    ใช้กำหนดตำแหน่งของข้อมูลใน cell ในแนวนอน

    example :
    <table>
         <tr> <th align="center"> ยอดขาย </th> </tr>
         <tr> <td align="right"> 200 บาท </td> </tr>
         <tr> <td align="right"> 100 บาท </td> </tr>
    </table>

  • tag :
    <td valign="value"> ... </td>

    value :
    baseline คือ ตามเส้นฐาน, 
    top คือ ชิดบน, 
    middle คือ กึ่งกลาง, 
    bottom คือ ชิดล่าง

    content :
    ใช้กำหนดตำแหน่งของข้อมูลใน cell เมื่อดูจากแนวตั้ง

    example :
    <table>
         <tr> <th valign="middle"> ยอดขาย </th> </tr>
         <tr> <td valign="top"> 200 บาท </td> </tr>
         <tr> <td valign="top"> 100 บาท </td> </tr>
    </table>

  • tag :
    <td colspan="value"> ... </td>

    value :
    ตัวเลข, เปอร์เซ็นต์

    content :
    ใช้กำหนดการรวมคอลัมน์ในแนวนอน ( merge cell )

    example :
    <table>
         <tr> <th colspan="2"> ยอดขาย </th> </tr>
         <tr> <th> ผลรวม </th> <th> ค่าเฉลี่ย </th> </tr>
         <tr> <td> 200 บาท </td> <td> 150 บาท </td> </tr>
         <tr> <td> 100 บาท </td> <td> 150 บาท </td> </tr>
    </table>

  • tag :
    <td rowspan="value"> ... </td>

    value :
    ตัวเลข, เปอร์เซ็นต์

    content :
    ใช้กำหนดการรวมคอลัมน์ในแนวตั้ง ( merge cell )

    example :
    <table>
         <tr> <th colspan="2"> &nbsp; </th> <th> ปี 2552 </th> </tr>
         <tr> <th rowspan="2"> ยอดขาย </th> <th> ค่าเฉลี่ย </th> <td> 100 บาท </td> </tr>
         <tr> <th> ผลรวม </th> <td> 100 บาท </td> </tr>
    </table>

  • tag :
    <thead> ... </thead> <tbody> ... </tbody > <tfoot> ... </tfoot > 

    position :
    <table> ... </table>

    content :
    ใช้กำหนดเพื่อแบ่งส่วนของตารางออกเป็น 3 ส่วนใหญ่ๆ
    โดย thead จะอยู่บนสุดของตารางเสมอ และมีได้เีพียง 1 tag
    และ tfoot จะอยู่ล่างสุดของตารางเสมอ และมีได้เพียง 1 tag
    และ tbody จะอยู่ตรงกลางของตารางเสมอ และมีได้มากกว่า 1 tag

    example :
    <table>
         <thead>
              <tr>
                   <td> หัวของตาราง 1 </td>
                   <td> หัวของตาราง 2 </td>
              </tr>
         </thead>
         <tbody>
              <tr>
                   <td> เนื้อหาของตาราง 1 </td>
                   <td> เนื้อหาของตาราง 2 </td>
              </tr>
         </tbody >
         <tfoot>
              <tr>
                   <td> ท้ายของตาราง 1 </td>
                   <td> ท้ายของตาราง 2 </td>
              </tr>
         </tfoot >
    </table>

 
Share This Chapter Login with Facebook