วิธีแสดงความหนาของเส้นขอบองค์ประกอบใน HTML

ใช้แอตทริบิวต์ border ใน HTML เพื่อแสดงความหนาของเส้นขอบ

หมายเหตุ: แอตทริบิวต์นี้ ไม่รองรับใน HTML5

ตัวอย่าง (วิธีเก่า)

คุณสามารถลองรันโค้ดต่อไปนี้เพื่อเรียนรู้การใช้แอตทริบิวต์ border ใน HTML:

<!DOCTYPE html> 
<html> 
  <body> 
    <h2>นักขว้างลูกโป่ง</h2> 
    <table style="width:100%" border="1"> 
      <th>ชื่อ</th> 
      <tr> 
        <td>สาชิน เทนดูลการ์</td> 
      </tr> 
      <tr> 
        <td>วิรัต โกลี</td> 
      </tr> 
    </table> 
  </body> 
</html>

วิธีที่แนะนำ (ใช้ CSS)

<!DOCTYPE html> 
<html> 
  <head> 
    <style> 
      table, th, td { 
        border: 1px solid black; 
      } 
    </style> 
  </head> 
  <body> 
    <h2>นักขว้างลูกโป่ง</h2> 
    <table style="width:100%"> 
      <caption>นักขว้างลูกโป่งอินเดีย</caption> 
      <th>ชื่อ</th> 
      <tr> 
        <td>สาชิน เทนดูลการ์</td> 
      </tr> 
      <tr> 
        <td>วิรัต โกลี</td> 
      </tr> 
    </table> 
  </body> 
</html>

CSS ให้ความควบคุมมากกว่า: border-width, border-style, border-color, border-radius และสามารถกำหนดให้แต่ละด้านต่างกันได้