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

HTML5 Table Padding and Spacing

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

Table Padding

Padding คือ พื้นที่ระหว่างขอบของเซลล์ตาราง (Cell) และเนื้อหาภายในเซลล์นั้นๆ การเพิ่ม Padding ทำให้มีพื้นที่ว่างระหว่างขอบกับข้อมูลภายในเซลล์มากขึ้น

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

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        table {
            border: 1px solid black;
            border-collapse: collapse;
        }

        th, td {
            padding: 10px; /* กำหนด Padding */
            border: 1px solid black;
        }
    </style>
</head>
<body>

<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Content 1</td>
        <td>Content 2</td>
    </tr>
</table>

</body>
</html>

ผลลัพธ์: ตารางนี้จะมี Padding ในแต่ละเซลล์ขนาด 10px โดยเนื้อหาภายในแต่ละเซลล์จะห่างจากขอบ 10px

Header 1 Header 2
Content 1 Content 2

Table Spacing

Spacing หรือการเว้นระยะระหว่างเซลล์สามารถจัดการได้ด้วยการใช้คุณสมบัติ border-spacing และ border-collapse ใน CSS

  • border-spacing: ใช้กำหนดช่องว่างระหว่างเซลล์ทั้งแนวตั้งและแนวนอนในตาราง
  • border-collapse: ใช้กำหนดการรวมขอบของเซลล์ตารางเข้าด้วยกันหรือไม่ ถ้า border-collapse: collapse; ขอบของเซลล์จะถูกรวมเป็นขอบเดียว

ตัวอย่างการใช้งาน border-spacing

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        table {
            border: 1px solid black;
            border-spacing: 15px; /* กำหนดระยะห่างระหว่างเซลล์ */
        }

        th, td {
            padding: 10px;
            border: 1px solid black;
        }
    </style>
</head>
<body>

<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Content 1</td>
        <td>Content 2</td>
    </tr>
</table>

</body>
</html>

ผลลัพธ์: จะมีช่องว่างระหว่างเซลล์แต่ละเซลล์ขนาด 15px ทั้งในแนวตั้งและแนวนอน

Header 1 Header 2
Content 1 Content 2

การใช้ border-collapse

border-collapse ใช้เพื่อกำหนดว่าขอบของเซลล์จะถูกรวมกันหรือแยกกัน ถ้าใช้ collapse ขอบของเซลล์ที่ติดกันจะรวมเป็นขอบเดียว ซึ่งช่วยลดความซับซ้อนของเส้นขอบในตาราง

ตัวอย่างการใช้งาน border-collapse

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        table {
            border-collapse: collapse; /* รวมขอบของเซลล์ */
            border: 1px solid black;
        }

        th, td {
            padding: 10px;
            border: 1px solid black;
        }
    </style>
</head>
<body>

<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Content 1</td>
        <td>Content 2</td>
    </tr>
</table>

</body>
</html>

ผลลัพธ์: ขอบของเซลล์ที่ติดกันจะถูกรวมเป็นขอบเดียว โดยไม่เกิดช่องว่างระหว่างเซลล์

Header 1 Header 2
Content 1 Content 2

การประยุกต์ใช้งานในรูปแบบต่างๆ

  • หากต้องการเพิ่มช่องว่างภายในเซลล์ (Padding) ให้ใช้คุณสมบัติ padding กับเซลล์หรือหัวข้อที่ต้องการ
  • หากต้องการเว้นระยะห่างระหว่างเซลล์ (Spacing) ให้ใช้ border-spacing แต่หากต้องการลดความซับซ้อนของขอบในตาราง ให้ใช้ border-collapse เพื่อลดช่องว่างและทำให้ขอบถูกรวมเป็นขอบเดียว
Tags
แชร์เรื่องนี้

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