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

HTML5 การเพิ่มสไตล์ให้กับตาราง

การใช้งาน Table Styling ใน HTML5 เป็นการเพิ่มสไตล์ให้กับตารางเพื่อทำให้ข้อมูลดูอ่านง่ายและเป็นระเบียบมากขึ้น โดยสามารถใช้ CSS เพื่อจัดการสไตล์ตาราง ซึ่งสามารถประยุกต์ใช้งานได้หลากหลายรูปแบบ

การจัดการพื้นฐานของตาราง

โดยทั่วไปการสร้างตารางใน HTML5 จะใช้ <table>, <tr>, <th>, และ <td> ตัวอย่างการจัดการสไตล์พื้นฐานเช่น การกำหนดเส้นขอบ สีพื้นหลัง และการจัดการข้อความภายในตาราง

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic Table Styling</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #4CAF50;
            color: white;
        }
        tr:nth-child(even) {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <h2>Basic Styled Table</h2>
    <table>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Country</th>
        </tr>
        <tr>
            <td>John</td>
            <td>25</td>
            <td>USA</td>
        </tr>
        <tr>
            <td>Alice</td>
            <td>22</td>
            <td>Canada</td>
        </tr>
        <tr>
            <td>James</td>
            <td>27</td>
            <td>UK</td>
        </tr>
    </table>
</body>
</html>
  • border-collapse: collapse;: ใช้เพื่อทำให้เส้นขอบของเซลล์ติดกัน
  • nth-child(even): ใช้เพื่อเปลี่ยนสีพื้นหลังของแถวที่เป็นแถวคู่
  • th: ปรับสีพื้นหลังของส่วนหัวเป็นสีเขียว และเปลี่ยนสีข้อความเป็นสีขาว

การจัดการข้อความและเซลล์

เราสามารถจัดการให้ข้อความภายในเซลล์อยู่ตรงกลาง หรือยืดขนาดความกว้างของเซลล์ให้เต็มได้ตามต้องการ

HTML
<style>
    td, th {
        text-align: center;
        vertical-align: middle;
    }
</style>
  • text-align: center;: ใช้จัดข้อความให้อยู่ตรงกลางในแนวนอน
  • vertical-align: middle;: ใช้จัดข้อความให้อยู่กลางในแนวตั้ง

การกำหนดความกว้างของคอลัมน์

สามารถปรับขนาดของคอลัมน์เพื่อให้เหมาะสมกับข้อมูลได้

HTML
<style>
    table {
        width: 80%;
    }
    th, td {
        width: 25%;
    }
</style>
  • width: 80%: กำหนดให้ตารางใช้พื้นที่ 80% ของความกว้างหน้าจอ
  • width: 25%: กำหนดให้แต่ละคอลัมน์มีความกว้าง 25% ของตารางทั้งหมด

การใส่เส้นขอบให้กับแถวและคอลัมน์

สามารถใช้ CSS เพื่อเพิ่มเส้นขอบในส่วนที่ต้องการให้โดดเด่นมากขึ้นได้

HTML
<style>
    th {
        border-bottom: 2px solid #000;
    }
    td {
        border-bottom: 1px solid #ddd;
    }
</style>
  • border-bottom: 2px solid #000;: กำหนดให้ส่วนหัวของตารางมีเส้นขอบล่างที่หนาและเป็นสีดำ
  • border-bottom: 1px solid #ddd;: กำหนดเส้นขอบล่างของเซลล์ให้บางลงเป็นสีเทา

การเพิ่มสไตล์การโต้ตอบ (Interactive Styling)

สามารถใช้การเปลี่ยนสีเมื่อเมาส์ชี้ไปที่แถว (Hover) เพื่อเพิ่มความสามารถในการโต้ตอบของผู้ใช้

HTML
<style>
    tr:hover {
        background-color: #f5f5f5;
    }
</style>
  • tr:hover: เมื่อเมาส์ชี้ไปที่แถว จะเปลี่ยนสีพื้นหลังเป็นสีเทาอ่อน

การจัดการคอลัมน์ที่รวมกัน (Column Span & Row Span)

เมื่อมีการรวมเซลล์ (Merge Cells) สามารถใช้ colspan และ rowspan เพื่อจัดการให้ตารางสมบูรณ์

HTML
<table>
    <tr>
        <th rowspan="2">Name</th>
        <th colspan="2">Contact Info</th>
    </tr>
    <tr>
        <td>Email</td>
        <td>Phone</td>
    </tr>
    <tr>
        <td>John</td>
        <td>[email protected]</td>
        <td>555-1234</td>
    </tr>
</table>
  • rowspan="2": ทำให้เซลล์ “Name” ครอบคลุม 2 แถว
  • colspan="2": ทำให้เซลล์ “Contact Info” ครอบคลุม 2 คอลัมน์

การใช้กรอบมุมโค้ง (Rounded Borders)

สามารถปรับเปลี่ยนรูปแบบเส้นขอบให้มีความโค้งมนด้วย border-radius

HTML
<style>
    table, th, td {
        border: 1px solid black;
        border-radius: 10px;
    }
</style>
  • border-radius: 10px;: ทำให้ขอบของตารางและเซลล์มีความโค้งมน
Tags
แชร์เรื่องนี้

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