วิธีจัดข้อความกึ่งกลางในเซลล์ตาราง HTML ด้วย CSS

ใน HTML5 ไม่รองรับ attribute align ของ <table> หรือ <td> แล้ว ต้องใช้ CSS property text-align แทน

วิธีการ

<td style="text-align: center">ข้อความกึ่งกลาง</td>
<td style="text-align: left">ชิดซ้าย</td>
<td style="text-align: right">ชิดขวา</td>

ตัวอย่างเต็ม

<!DOCTYPE html>
<html>
<head>
  <style>
    table, td, th {
      border: 1px solid black;
      width: 300px;
    }
  </style>
</head>
<body>
  <h1>Our Technologies</h1>
  <table>
    <tr>
      <th>IDE</th>
      <th>Database</th>
    </tr>
    <tr>
      <td style="text-align:center">NetBeans</td>
      <td style="text-align:center">MySQL</td>
    </tr>
  </table>
</body>
</html>

ข้อควรทราบ

• text-align ใช้กับ <td> หรือ <th> โดยตรง
• สำหรับจัดแนวตั้ง (vertical) ใช้ vertical-align: middle/top/bottom
• inline style จะ override global styles
• แนะนำใช้ class เช่น .text-center { text-align: center; }