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

HTML5 จัดการกับเส้นขอบของตาราง Table Border

การใช้งาน Table Border ใน HTML5 นั้นคือการกำหนดเส้นขอบ (border) ของตาราง (<table>) และเซลล์ในตาราง เพื่อปรับแต่งความสวยงามและความชัดเจนของตารางในหน้าเว็บ โดยสามารถใช้งานได้หลากหลายรูปแบบผ่านการกำหนดค่าของ CSS

การใช้งาน border แบบพื้นฐาน

ใน HTML5 เราจะไม่ใช้แอตทริบิวต์ border ในแท็ก <table> ตรงๆ เหมือนใน HTML เก่าๆ แต่จะใช้ CSS แทน

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

<table>
    <tr>
        <th>หัวข้อ 1</th>
        <th>หัวข้อ 2</th>
    </tr>
    <tr>
        <td>ข้อมูล 1</td>
        <td>ข้อมูล 2</td>
    </tr>
</table>

</body>
</html>

ตัวอย่างนี้จะกำหนดขอบ (border) หนา 1px และเป็นเส้นทึบ (solid) สีดำ สำหรับทั้งตาราง <table>, ส่วนหัวข้อ <th> และเซลล์ข้อมูล <td>

หัวข้อ 1 หัวข้อ 2
ข้อมูล 1 ข้อมูล 2

การกำหนด border-collapse

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

HTML
<!DOCTYPE html>
<html>
<head>
    <style>
        table {
            border-collapse: collapse;
            width: 50%;
        }
        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: center;
        }
    </style>
</head>
<body>

<table>
    <tr>
        <th>หัวข้อ 1</th>
        <th>หัวข้อ 2</th>
    </tr>
    <tr>
        <td>ข้อมูล 1</td>
        <td>ข้อมูล 2</td>
    </tr>
</table>

</body>
</html>

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

หัวข้อ 1 หัวข้อ 2
ข้อมูล 1 ข้อมูล 2

การกำหนด border-spacing

หากต้องการให้ขอบของเซลล์ไม่ติดกัน เราสามารถใช้ border-spacing เพื่อกำหนดระยะห่างระหว่างเซลล์ได้

HTML
<!DOCTYPE html>
<html>
<head>
    <style>
        table {
            border-spacing: 10px;
        }
        th, td {
            border: 1px solid black;
        }
    </style>
</head>
<body>

<table>
    <tr>
        <th>หัวข้อ 1</th>
        <th>หัวข้อ 2</th>
    </tr>
    <tr>
        <td>ข้อมูล 1</td>
        <td>ข้อมูล 2</td>
    </tr>
</table>

</body>
</html>

การใช้ border-spacing: 10px; จะทำให้เซลล์มีระยะห่างจากกัน 10 พิกเซล

หัวข้อ 1 หัวข้อ 2
ข้อมูล 1 ข้อมูล 2

การกำหนดเส้นขอบของแต่ละเซลล์แยกกัน

เราสามารถกำหนดขอบของแต่ละเซลล์ใน <th> หรือ <td> แยกต่างหากได้ เช่นการใช้เส้นขอบเฉพาะด้านใดด้านหนึ่ง

HTML
<!DOCTYPE html>
<html>
<head>
    <style>
        table {
            border-collapse: collapse;
        }
        th, td {
            border-left: 2px solid red;
            border-bottom: 2px solid blue;
            padding: 10px;
        }
    </style>
</head>
<body>

<table>
    <tr>
        <th>หัวข้อ 1</th>
        <th>หัวข้อ 2</th>
    </tr>
    <tr>
        <td>ข้อมูล 1</td>
        <td>ข้อมูล 2</td>
    </tr>
</table>

</body>
</html>

ตัวอย่างนี้จะกำหนดให้เส้นขอบด้านซ้ายเป็นสีแดง และด้านล่างเป็นสีน้ำเงินสำหรับเซลล์แต่ละช่อง

หัวข้อ 1 หัวข้อ 2
ข้อมูล 1 ข้อมูล 2

การกำหนดขอบแบบเฉพาะเจาะจง

หากต้องการขอบที่มีลักษณะเฉพาะ เช่น ขอบที่เป็นจุดไข่ปลา (dotted), เส้นขีด (dashed) หรือขอบที่มีหลายสี สามารถทำได้ดังนี้

HTML
<!DOCTYPE html>
<html>
<head>
    <style>
        table {
            border-collapse: collapse;
        }
        th {
            border: 2px dotted green;
        }
        td {
            border: 2px dashed orange;
        }
    </style>
</head>
<body>

<table>
    <tr>
        <th>หัวข้อ 1</th>
        <th>หัวข้อ 2</th>
    </tr>
    <tr>
        <td>ข้อมูล 1</td>
        <td>ข้อมูล 2</td>
    </tr>
</table>

</body>
</html>

ตัวอย่างนี้กำหนดให้หัวข้อ <th> มีขอบแบบเส้นไข่ปลา (dotted) สีเขียว และเซลล์ <td> มีขอบแบบเส้นขีด (dashed) สีส้ม

หัวข้อ 1 หัวข้อ 2
ข้อมูล 1 ข้อมูล 2
Tags
แชร์เรื่องนี้

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