การเรียนรู้ HTML ตอนที่ 19: วิธีสร้างตารางใน HTML
ข้อมูลบางอย่างในเว็บไซต์มักจะแสดงในรูปแบบตาราง ตารางเป็นข้อมูลแบบตารางในรูปแบบของตารางซึ่งประกอบด้วยคอลัมน์แถวและเซลล์ซึ่งเป็นการประชุมระหว่างคอลัมน์และแถว การใช้ตารางทำให้ข้อมูลกระชับและรัดกุมยิ่งขึ้นและทำให้ผู้คนอ่านและเข้าใจข้อมูลที่อยู่ในนั้นได้ง่ายขึ้น นอกจากนี้การแสดงข้อมูลที่นำมาจากฐานข้อมูลจะง่ายต่อการอ่านและสะดวกสบายในการดูว่าคุณใช้ตารางหรือไม่
เห็นประโยชน์ของตารางแน่นอนคุณต้องเรียนรู้วิธีสร้างตารางใน HTML ดังนั้นในการสนทนานี้ฉันจะหารือเกี่ยวกับเนื้อหาเกี่ยวกับวิธีสร้างตารางใน HTML คุณสามารถสร้างตารางในเอกสาร HTML โดยใช้แท็กพิเศษที่จัดทำโดย HTML ซึ่งเริ่มต้นด้วย <table> คู่แท็ก……. </ table>
การใช้ตารางในเอกสาร HTML ไม่ถูกต้องคุณใช้เพื่อออกแบบเค้าโครงขององค์ประกอบในตารางในคำอื่น ๆ ที่ไม่ควรใช้สำหรับเค้าโครงหน้า ในอดีตมันมักจะใช้ในการออกแบบรูปลักษณ์ของเว็บไซต์ แต่ตอนนี้ฟังก์ชั่นของมันจะถูกแทนที่ด้วย CSS ซึ่งดีกว่ามากในแง่ของการทำให้เว็บไซต์ดู
แท็กทั่วไปที่มีให้โดย HTML เพื่อสร้างตารางประกอบด้วย:
| แท็ก | ฟังก์ชัน |
| ตาราง | ใช้เพื่อกำหนดตารางที่ตารางเป็น HTML |
| TR | คือความต่อเนื่องของแถวของตารางซึ่งใช้เพื่อกำหนดแถวในตาราง |
| TH | เป็นส่วนเสริมของส่วนหัวของตารางใช้เพื่อกำหนดส่วนหัวของเซลล์ในตารางที่อยู่ด้านบนสุดหรือด้านซ้ายสุดของตาราง ตารางส่วนหัวที่ด้านบนเป็นส่วนหัวของคอลัมน์ตารางในขณะที่ส่วนหัวของตารางที่อยู่ด้านซ้ายเป็นส่วนหัวของแถวของตาราง |
| td | คือความต่อเนื่องของตารางข้อมูลที่ใช้เพื่อกำหนดเนื้อหาของแต่ละเซลล์ในตาราง |
ตารางใน HTML เริ่มต้นด้วยการใช้แท็ก <table> และลงท้ายด้วยแท็ก </table> ระหว่างแท็ก <table> ... </tabel> คู่แท็ก <tr> จะถูกเขียนเพื่อสร้างแถวในตาราง
ถัดไปในแท็ก <tr> แต่ละคู่.... </tr> เขียนไว้ในคอลัมน์ใช้แท็ก <th> เพื่อสร้างส่วนหัว (เซลล์หลัก) หรือแท็ก <td> เพื่อสร้างเนื้อหาของแต่ละเซลล์ในตาราง ต่อไปนี้เป็นตัวอย่างโค้ดแบบง่ายสำหรับการสร้างตารางใน HTML:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Tabel di HTML</title>
</head>
<body>
<table>
<tr>
<th>Nama</th>
<th>Jurusan</th>
<th>Kelas</th>
</tr>
<tr>
<td>Muhammad Ridho</td>
<td>TKJ</td>
<td>12</td>
</tr>
<tr>
<td>Meilisa Niatur Rahmah</td>
<td>MM</td>
<td>11</td>
</tr>
<td>Johanes Eko Prasetyo</td>
<td>RPL</td>
<td>10</td>
</tr>
</table>
</body>
</html>หากทำงานในเบราว์เซอร์ดูเหมือนว่า:
บางทีคุณอาจสงสัยว่าทำไมตารางไม่ถึงมีระยะขอบเหมือนในตาราง exel นั่นเป็นเพราะตารางไม่มีเส้นขอบ (เส้นขอบ / กรอบ) คุณสามารถใช้แอ็ตทริบิวต์เส้นขอบเพื่อให้เค้าร่างตารางตัวอย่างเช่นโค้ด HTML ดังนี้:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Tabel di HTML</title>
</head>
<body>
<table border="1">
<tr>
<th>Nama</th>
<th>Jurusan</th>
<th>Kelas</th>
</tr>
<tr>
<td>Muhammad Ridho</td>
<td>TKJ</td>
<td>12</td>
</tr>
<tr>
<td>Meilisa Niatur Rahmah</td>
<td>MM</td>
<td>11</td>
</tr>
<tr>
<td>Johanes Eko Prasetyo</td>
<td>RPL</td>
<td>10</td>
</tr>
</table>
</body>
</html>ผลลัพธ์ในเบราว์เซอร์เช่นนี้:
ในภาพด้านบนฉันให้แอตทริบิวต์ทำเครื่องหมายด้วยค่า "1" ดังนั้นตารางจึงมีระยะขอบ 1 พิกเซล ถ้ามันไม่ได้ถูกเขียนขึ้นมาแสดงว่าตารางนั้นไม่มีระยะขอบ อีกหนึ่งคำถามที่มักถูกถามคือความแตกต่างระหว่างแท็ก <th> และแท็ก <td>
จากคำอธิบายข้างต้นยังอธิบายว่าแท็ก<th> ใช้เพื่อกำหนดชื่อ (เซลล์หลัก) สำหรับแต่ละคอลัมน์หรือแถวที่มักจะถูกทำเครื่องหมายด้วยตัวอักษรหนาตรงกลางเช่นข้อความ ชื่อ, แผนกและ ชั้น, ในขณะที่แท็ก <td> กำหนดข้อมูลเฉพาะในแต่ละตารางเซลล์ที่ทำเครื่องหมายด้วยรูปร่างตัวอักษรปกติและจัดตำแหน่งเริ่มต้นไว้ด้านซ้าย
ถัดไปคุณต้องเรียนรู้เนื้อหาต่อไป (ยังเกี่ยวกับตาราง HTML) ซึ่งเกี่ยวกับการรวมตารางใน HTML
