การจัดตำแหน่งตาราง CSS

สารบัญ

การจัดตำแหน่งแนวนอน

คุณสมบัติ text-align ตั้งค่าการจัดตำแหน่งแนวนอน (เช่น ซ้าย ขวา หรือกึ่งกลาง) ของเนื้อหาใน <th> หรือ <td>

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

หากต้องการจัดกึ่งกลางเนื้อหาของ <td> องค์ประกอบด้วย ให้ใช้ text-align: center:

Firstname	Lastname	Savings
Peter	Griffin	$100
Lois	Griffin	$150
Joe	Swanson	$300

ตัวอย่าง

 td
{
   
text-align: center;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
  border: 1px solid black;
}

table {
  border-collapse: collapse;
  width: 100%;
}

td {
  text-align: center;
}
</style>
</head>
<body>

<h2>The text-align Property</h2>

<p>This property sets the horizontal alignment (like left, right, or center) of the content in th or td.</p>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Joe</td>
    <td>Swanson</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Cleveland</td>
    <td>Brown</td>
    <td>$250</td>
  </tr>
</table>

</body>
</html>

หากต้องการจัดเนื้อหาให้อยู่ทางซ้าย ให้บังคับการจัดตำแหน่งขององค์ประกอบ <th> ให้เป็นเช่นนั้น จัดชิดซ้ายด้วยคุณสมบัติ text-align: left:

Firstname	Lastname	Savings
Peter	Griffin	$100
Lois	Griffin	$150
Joe	Swanson	$300

ตัวอย่าง

th
{
   
text-align: left;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
  border: 1px solid black;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th {
  text-align: left;
}
</style>
</head>
<body>

<h2>The text-align Property</h2>

<p>This property sets the horizontal alignment (like left, right, or center) of the content in th or td.</p>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Joe</td>
    <td>Swanson</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Cleveland</td>
    <td>Brown</td>
    <td>$250</td>
  </tr>
</table>

</body>
</html>

การจัดตำแหน่งแนวตั้ง

คุณสมบัติ vertical-align ตั้งค่าการจัดตำแหน่งตามแนวตั้ง (เช่น บน ล่าง หรือตรงกลาง) ของเนื้อหาใน <th> หรือ <td>

ตามค่าเริ่มต้น การจัดแนวแนวตั้งของเนื้อหาในตารางจะอยู่ตรงกลาง (สำหรับทั้ง <th> และ <td> องค์ประกอบ)

ตัวอย่างต่อไปนี้ตั้งค่าการจัดตำแหน่งข้อความแนวตั้งไปที่ด้านล่างสำหรับองค์ประกอบ <td>:

Firstname	Lastname	Savings
Peter	Griffin	$100
Lois	Griffin	$150
Joe	Swanson	$300

ตัวอย่าง

td
{
   
height: 50px;
   
vertical-align: bottom;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
  border: 1px solid black;
}

table {
  border-collapse: collapse;
  width: 100%;
}

td {
  height: 50px;
  vertical-align: bottom;
}
</style>
</head>
<body>

<h2>The vertical-align Property</h2>

<p>This property sets the vertical alignment (like top, bottom, or middle) of the content in th or td.</p>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Joe</td>
    <td>Swanson</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Cleveland</td>
    <td>Brown</td>
    <td>$250</td>
  </tr>
</table>

</body>
</html>