ตาราง: จัดระเบียบข้อมูล
เรียนรู้วิธีสร้างตารางสำหรับแสดงข้อมูล
ตาราง: จัดระเบียบข้อมูล เป็นบทเรียน HTML for Kids ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML for Kids และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML for Kids มีบทเรียนทั้งหมด 4 บทเรียน
ตาราง: การจัดระเบียบข้อมูล
ยินดีต้อนรับสู่บทเรียนถัดไป! วันนี้เราจะเรียนรู้วิธีสร้างตารางใน HTML ตารางเหมาะอย่างยิ่งสำหรับจัดระเบียบข้อมูลเป็นแถวและคอลัมน์
ตารางคืออะไร
ตารางเป็นวิธีแสดงข้อมูลในรูปแบบที่มีโครงสร้าง ตารางแต่ละตารางประกอบด้วยแถวและคอลัมน์
ตารางมีลักษณะดังนี้:
Name Age City
Alice 12 New York
Bob 15 London
มาสร้างตารางนี้โดยใช้ HTML กัน!
การสร้างตารางอย่างง่าย
ตารางใน HTML สร้างขึ้นโดยใช้แท็ก <table> แถวสร้างขึ้นโดยใช้แท็ก <tr> และเซลล์สร้างขึ้นโดยใช้แท็ก <td>
ตัวอย่าง:
<table>
<tr>
<td>Alice</td>
<td>12</td>
<td>New York</td>
</tr>
<tr>
<td>Bob</td>
<td>15</td>
<td>London</td>
</tr>
</table>
การเพิ่มส่วนหัวตาราง
คุณสามารถเพิ่มส่วนหัวให้ตารางได้โดยใช้แท็ก <th> ส่วนหัวช่วยให้เข้าใจตารางได้ง่ายขึ้น
ตัวอย่าง:
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>Alice</td>
<td>12</td>
<td>New York</td>
</tr>
<tr>
<td>Bob</td>
<td>15</td>
<td>London</td>
</tr>
</table>
การเพิ่มเส้นขอบให้ตาราง
โดยค่าเริ่มต้น ตารางจะไม่มีเส้นขอบ คุณสามารถเพิ่มเส้นขอบโดยใช้แอตทริบิวต์ border หรือใช้ CSS
ตัวอย่าง:
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>Alice</td>
<td>12</td>
<td>New York</td>
</tr>
<tr>
<td>Bob</td>
<td>15</td>
<td>London</td>
</tr>
</table>
การรวมคอลัมน์และแถว
บางครั้งคุณอาจต้องการให้เซลล์ครอบคลุมหลายคอลัมน์หรือหลายแถว ให้ใช้แอตทริบิวต์ colspan หรือ rowspan เพื่อทำเช่นนี้
ตัวอย่าง:
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Details</th>
</tr>
<tr>
<td>Alice</td>
<td>12</td>
<td>New York</td>
</tr>
<tr>
<td>Bob</td>
<td>15</td>
<td>London</td>
</tr>
</table>
การจัดรูปแบบตาราง
คุณสามารถทำให้ตารางดูดีขึ้นได้โดยใช้ CSS ตัวอย่างเช่น คุณสามารถเปลี่ยนสี เพิ่มระยะห่างภายใน หรือจัดแนวข้อความได้
ตัวอย่าง:
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
th {
background-color: lightgray;
}
</style>
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>Alice</td>
<td>12</td>
<td>New York</td>
</tr>
<tr>
<td>Bob</td>
<td>15</td>
<td>London</td>
</tr>
</table>
ลองทำด้วยตนเอง
มาสร้างตารางที่แสดงรายชื่อภาพยนตร์โปรดของคุณกัน ตัวอย่างมีดังนี้:
<!DOCTYPE html>
<html>
<head>
<title>My Favorite Movies</title>
</head>
<body>
<h1>My Favorite Movies</h1>
<table border="1">
<tr>
<th>Movie</th>
<th>Year</th>
<th>Genre</th>
</tr>
<tr>
<td>Inception</td>
<td>2010</td>
<td>Science Fiction</td>
</tr>
<tr>
<td>The Lion King</td>
<td>1994</td>
<td>Animation</td>
</tr>
</table>
</body>
</html>
ทำได้ดีมาก!
ขอแสดงความยินดี! คุณได้เรียนรู้วิธีสร้างตาราง เพิ่มส่วนหัว และจัดรูปแบบตารางแล้ว ตารางเป็นวิธีที่ยอดเยี่ยมในการจัดระเบียบและแสดงข้อมูล ในบทเรียนถัดไป เราจะเรียนรู้เกี่ยวกับแบบฟอร์มเพื่อรวบรวมข้อมูลที่ผู้ใช้ป้อน เตรียมทำให้หน้าเว็บของคุณโต้ตอบได้!
คำถามที่พบบ่อย
บทเรียน “ตาราง: จัดระเบียบข้อมูล” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ตาราง: จัดระเบียบข้อมูล” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML for Kids ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML for Kids มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ตาราง: จัดระเบียบข้อมูล”
เรียนรู้วิธีสร้างตารางสำหรับแสดงข้อมูล คุณปฏิบัติ HTML for Kids ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML for Kids หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML for Kids บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “ตาราง: จัดระเบียบข้อมูล” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน HTML for Kids นี้ได้ไหม
ได้ บทเรียน HTML for Kids ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- ตาราง: จัดระเบียบข้อมูล
- แบบฟอร์ม: รับข้อมูลจากผู้ใช้
- แอตทริบิวต์ของ HTML
- มัลติมีเดีย: เพิ่มวิดีโอและเสียง