หัวเรื่องและเส้นตาราง <th>,border

การใส่หัวเรื่อง <th> และตีเส้นตาราง (border)

        เราสามารถตกแต่งหัวคอลัมน์ ด้วยการใช้ <th>..</th> เพื่อเน้นข้อความส่วนหัวของคอลัมน์ โดย <th> จะมีรูปแบบ   การใช้เหมือน <td> แต่ข้อความภายใน <th> จะเป็นตัวหนาและอยู่กึ่งกลางเซลล์อัตโนมัติ

    1. การใส่หัวเรื่อง <th>

  

ชื่อแท็ก 

th

ตำแหน่งของแท็ก  

รูปแบบการใช้              

th อยู่ภายใน <tr>..</tr>

<tr> <th> หัวข้อ </th > </tr>

        ตัวอย่างการใช้งาน

<body >

  <table>

<tr>  <th> หัวข้อ1 </th>  <th> หัวข้อ2 </th>  </tr>

<tr>  <td> ข้อมูล1 </td>  <td> ข้อมูล2 </td>  </tr>

<tr>  <td> ข้อมูล3 </td>  <td> ข้อมูล4 </td>  </tr>

  </table>

</body>  

ผลลัพธ์ที่ได้

  

        จากรูปจะเห็นว่า แถวที่ 1 เราใช้ แท็ก th ข้อความจะหนากว่า ข้อมูล แถวที่ 2 และ 3 ที่ใช้แท็ก td

    2. การใส่เส้นตาราง (border)

        การใส่เส้นให้ตารางจะช่วยให้การดูข้อมูลในตาราง ดูง่ายขึ้น เราสามารถใส่เส้นให้กับตารางด้วย แอตทริบิวต์ border    ในแท็ก table ได้ดังนี้

  

ชื่อแอททริบิวท์

border

ตำแหน่งของแท็ก  

รูปแบบการใช้              

อยู่ภายในแท็กเปิด table

<table border=”ความหนาของเส้นตาราง”>

ความหนาของเส้นตาราง จะมีหน่วยเป็กพิกเซล เราจะใส่ค่าเป็นตัวเลข เช่น 2,5,9 เป็นต้น ตัวอย่าง <table border=”5”>

ตัวอย่างการใช้งาน

<body >

  <table border=”1”>

<tr>    <th> หัวข้อ1 </th>  <th> หัวข้อ2 </th>  </tr>

<tr>   <td> ข้อมูล1 </td>  <td> ข้อมูล2 </td>  </tr>

<tr>   <td> ข้อมูล3 </td>  <td> ข้อมูล4 </td>  </tr>

  </table>

</body>  

 

  ผลลัพธ์ที่ได้

 

        จากภาพ border=”1” ถ้าเพิ่มตัวเลขขนาดเส้นตารางก็จะเพิ่มขนาดขึ้นด้วย ถ้าใส่ “0” จะไม่แสดงเส้นตาราง