พัฒนาเว็บไซต์ด้วย HTML5

HTML5 จัดการกับขนาดของตาราง Table Size

การจัดการกับขนาดของตาราง (Table Size) ใน HTML5 สามารถทำได้หลายวิธีเพื่อให้ตารางแสดงผลได้ตามที่ต้องการ ไม่ว่าจะเป็นการกำหนดขนาดตาราง ขนาดของเซลล์ หรือการควบคุมพื้นที่ภายในและภายนอกเซลล์ ตารางสามารถปรับได้ด้วยการใช้งานทั้ง CSS และ HTML

การกำหนดขนาดตารางด้วย width และ height

สามารถกำหนดขนาดของตารางได้ทั้ง width และ height โดยใช้ HTML attribute หรือ CSS property

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

HTML
<table width="500" height="300" border="1">
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
</table>

ตารางนี้จะมีความกว้าง 500px และความสูง 300px แต่การใช้ width และ height ใน HTML แบบนี้ไม่เป็นที่นิยมแล้ว แนะนำให้ใช้ CSS แทน

Cell 1 Cell 2

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

HTML
<style>
  table {
    width: 500px;
    height: 300px;
    border: 1px solid black;
  }
</style>

<table>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
</table>

การใช้ CSS ทำให้สามารถควบคุมการแสดงผลได้ง่ายกว่า และสามารถจัดการกับความยืดหยุ่นในขนาดของตารางได้มากขึ้น

Cell 1 Cell 2

การกำหนดขนาดตารางแบบเปอร์เซ็นต์

สามารถกำหนดขนาดตารางให้เป็นเปอร์เซ็นต์ของขนาดหน้าจอหรือพื้นที่ของผู้ใช้งาน

ตัวอย่าง

HTML
<style>
  table {
    width: 80%;
    border: 1px solid black;
  }
</style>

<table>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
</table>

ในตัวอย่างนี้ ตารางจะมีความกว้าง 80% ของพื้นที่ที่สามารถแสดงผลได้ เช่นหากพื้นที่กว้าง 1000px ตารางจะมีความกว้าง 800px

Cell 1 Cell 2

การควบคุมขนาดของเซลล์ในตาราง

สามารถกำหนดขนาดของเซลล์แต่ละช่องได้ด้วย width และ height ที่เซลล์ หรือใช้ colgroup และ col เพื่อควบคุมหลายคอลัมน์พร้อมกัน

การกำหนดขนาดให้แต่ละเซลล์

HTML
<table border="1">
  <tr>
    <td style="width: 200px;">Cell 1</td>
    <td style="width: 100px;">Cell 2</td>
  </tr>
</table>
Cell 1 Cell 2

การใช้ colgroup และ col

HTML
<table border="1">
  <colgroup>
    <col style="width: 200px;">
    <col style="width: 100px;">
  </colgroup>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
</table>

ในตัวอย่างนี้ ขนาดของคอลัมน์ถูกควบคุมโดย colgroup ซึ่งสามารถใช้เพื่อกำหนดขนาดให้กับคอลัมน์หลายคอลัมน์พร้อมกัน

Cell 1 Cell 2

การใช้ table-layout เพื่อควบคุมการจัดวาง

CSS table-layout ช่วยควบคุมการกระจายพื้นที่ของตาราง

  • table-layout: auto; เป็นค่าปกติที่ทำให้เซลล์ในตารางสามารถปรับขนาดได้ตามเนื้อหา
  • table-layout: fixed; ทำให้แต่ละคอลัมน์มีขนาดที่กำหนดไว้ โดยไม่ขึ้นอยู่กับขนาดของเนื้อหาในเซลล์

ตัวอย่าง table-layout: fixed

HTML
<style>
  table {
    width: 400px;
    table-layout: fixed;
    border: 1px solid black;
  }
  td {
    border: 1px solid black;
  }
</style>

<table>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
  </tr>
</table>

ในตัวอย่างนี้ ตารางจะมีความกว้าง 400px และแต่ละคอลัมน์จะถูกแบ่งตามพื้นที่เท่ากันโดยไม่คำนึงถึงเนื้อหาภายใน

Cell 1 Cell 2 Cell 3

การใช้ border-spacing และ padding

  • border-spacing ใช้ในการควบคุมช่องว่างระหว่างเซลล์ในตาราง
  • padding ใช้ในการกำหนดระยะห่างระหว่างขอบเซลล์กับเนื้อหาภายในเซลล์

ตัวอย่าง

HTML
<style>
  table {
    border: 1px solid black;
    border-spacing: 10px;
  }
  td {
    padding: 15px;
    border: 1px solid black;
  }
</style>

<table>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
</table>

ตารางนี้จะมีการเว้นระยะห่างระหว่างเซลล์และขอบ 10px และมีการเว้นระยะห่างภายในเซลล์ (padding) 15px

Cell 1 Cell 2
Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ