วิธีกำหนดความกว้างและสูงของเซลล์ตารางใน HTML5

ใน HTML5 ไม่รองรับ attribute width และ height ของแท็ก <td> แล้ว ต้องใช้ CSS property แทน โดยระบุผ่าน attribute style หรือผ่าน stylesheet

วิธีการ

<td style="width: 100px; height: 100px">เนื้อหา</td>

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

<!DOCTYPE html>
<html>
<head>
  <style>
    table, th, td {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <h1>Tutorial</h1>
  <table>
    <tr>
      <th>Language</th>
      <th>Lessons</th>
    </tr>
    <tr>
      <td style="height:100px;width:100px">Java</td>
      <td style="height:100px;width:100px">50</td>
    </tr>
    <tr>
      <td>Ruby</td>
      <td>40</td>
    </tr>
  </table>
</body>
</html>

ข้อควรระวัง

• การใช้ style attribute จะ override style ที่ตั้งค่าไว้ใน <style> tag หรือ external CSS
• แนะนำให้ใช้ class และ external CSS แทน inline style เพื่อความสะดวกในการบำรุงรักษา
• สามารถใช้ min-width, max-width, min-height, max-height ได้เช่นกัน