**แท็ก <Table> การสร้างตารางในเอกสาร HTML อย่างมีระเบียบและสวยงาม**
การสร้างตารางในเอกสาร HTML เป็นหนึ่งในวิธีที่มีประสิทธิภาพในการแสดงข้อมูลที่มีลักษณะเป็นแบบแผนหรือต้องการการจัดระเบียบอย่างชัดเจน การใช้ตารางจะช่วยให้ผู้อ่านสามารถเข้าใจข้อมูลได้ง่ายขึ้น โดยเฉพาะเมื่อต้องการนำเสนอข้อมูลจำนวนมากในที่เดียว
ต่อไปนี้จะเป็นตัวอย่างของการสร้างตารางโดยใช้ HTML พร้อมคำอธิบายเกี่ยวกับแต่ละส่วนของโค้ด:
```html
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>การสร้างตารางใน HTML</title>
<style>
table {
width: 80%;
border-collapse: collapse;
margin: 20px auto;
}
th, td {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
th {
background-color: #f2f2f2;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
</style>
</head>
<body>
<h2 style="text-align:center;">ตารางแสดงผลการเรียนของนักเรียน</h2>
<table>
<tr>
<th>ลำดับที่</th>
<th>ชื่อ-นามสกุล</th>
<th>คะแนนวิชาคณิตศาสตร์</th>
<th>คะแนนวิชาภาษาไทย</th>
</tr>
<tr>
<td>1</td>
<td>สมชาย ใจดี</td>
<td>85</td>
<td>90</td>
</tr>
<tr>
<td>2</td>
<td>นางสาวสดใส สวยงาม</td>
<td>78</td>
<td>88</td>
</tr>
<tr>
<td>3</td>
<td>นายจอห์น สมิธ</td>
<td>92</td>
<td>79</td>
</tr>
</table>
</body>
</html>
```
### คำอธิบายโค้ด
- **DOCTYPE และแท็ก HTML**: บรรทัดแรก `<!DOCTYPE html>` ใช้เพื่อระบุว่าเอกสารนี้เป็น HTML5 ในขณะที่ `<html>` คือแท็กหลักของเอกสาร
- **แท็ก `<head>`**: ใช้เพื่อกำหนดข้อมูลเมตา เช่น ชื่อเอกสารและการตั้งค่าอันดับแรก
- **แท็ก `<style>`**: ส่วนนี้ใช้เพื่อกำหนด CSS สำหรับปรับแต่งรูปลักษณ์ของตาราง
- `border-collapse: collapse;` ทำให้เส้นขอบของเซลล์ในตารางรวมกัน
- `background-color` ใช้เพื่อเติมสีพื้นหลังให้กับเซลล์หัวข้อและแถว
- `nth-child(even)` ใช้เพื่อตั้งสีพื้นหลังให้กับแถวที่เป็นคู่ เพื่อให้การอ่านข้อมูลสะดวกยิ่งขึ้น
- **แท็ก `<body>`**: ประกอบด้วยเนื้อหาเอกสาร ได้แก่ หัวข้อและตาราง
- **แท็ก `<table>`**: ใช้เพื่อสร้างตาราง โดยภายในจะมีแท็ก `<tr>` สำหรับแถว, `<th>` สำหรับหัวข้อ และ `<td>` สำหรับข้อมูลในช่อง
การสร้างตารางใน HTML เป็นวิธีที่มีประสิทธิภาพในการแสดงข้อมูลอย่างมีระเบียบและสามารถปรับแต่งให้สวยงามได้ตามต้องการ อย่างไรก็ตาม ควรตรวจสอบให้แน่ใจว่าตารางมีความชัดเจนและเข้าใจง่ายสำหรับผู้อ่าน เพื่อให้การนำเสนอข้อมูลมีประสิทธิภาพสูงสุด