จุดประสงค์ของ Table Cell ใน Tailwind คืออะไร

วัตถุประสงค์ของ Table-Cell

เซลล์ตารางเป็นรายการแต่ละรายการภายในตารางที่ประกอบด้วยเซลล์อื่นๆ จำนวนมากเช่นเดียวกับเซลล์นั้น จุดประสงค์หลักของ Table Cell คือการบันทึกข้อมูลอย่างเป็นระเบียบเพื่อให้เข้าใจและเข้าใจได้ง่ายขึ้น มันหมายถึงตำแหน่งเฉพาะภายในตารางที่มีรายการอยู่

ประเภทของเซลล์ตาราง

ตารางใน HTML ส่วนใหญ่มีเซลล์สองประเภท เหล่านี้คือ “ เซลล์ส่วนหัว ' และ ' เซลล์ข้อมูล '. รายละเอียดเพิ่มเติมเกี่ยวกับความแตกต่างและความคล้ายคลึงกันมีดังต่อไปนี้

เซลล์ส่วนหัว

เซลล์ส่วนหัวแสดงด้วย “ ” แท็กใน HTML Tailwind CSS สิ่งเหล่านี้สร้างชื่อเรื่องของคอลัมน์ในตาราง ส่วนหัวกำหนดว่าค่าทั้งหมดในคอลัมน์นั้นจะเป็นอย่างไร ตัวอย่างของส่วนหัว ได้แก่ ชื่อ ที่อยู่อีเมล หมายเลขติดต่อ หมายเลขประกันสังคม เป็นต้น

เซลล์ส่วนหัวของตารางจะอยู่ที่ด้านบนสุดของคอลัมน์ และรายการด้านล่างจะเป็นเซลล์ข้อมูล เซลล์เหล่านี้ยังมีการจัดรูปแบบเฉพาะเพื่อแยกออกจากเซลล์ข้อมูลต่อไปนี้ เซลล์ส่วนหัวถูกกำหนดให้มีขนาดตัวอักษรที่ใหญ่ขึ้นและตัวอักษรตัวหนาเพื่อเพิ่มความหมายให้กับเนื้อหาในเซลล์ข้อมูล

ตัวอย่าง
ในโค้ดด้านล่าง เราได้สร้างเซลล์ส่วนหัวของตารางผ่านแท็ก “”:

ในบล็อกรหัสนี้:

• สร้างตารางโดยใช้แท็ก “”
  ตอนนี้ ใช้แท็ก “
  ”
  สุดท้าย ปิดแท็ก “
  ”, “” และ “

  ” เพื่อสร้างเซลล์ส่วนหัวของตาราง จากนั้นกำหนดรายการเซลล์ “ เซลล์ส่วนหัว 01 ” โดยใช้แท็ก “	” ภายในแท็ก “

  ” ตามลำดับเพื่อทำให้เซลล์ตารางสมบูรณ์

เอาต์พุต

ตามที่เห็น เซลล์ส่วนหัวจะแสดงเป็นตัวหนาตามค่าเริ่มต้น

เซลล์ข้อมูล

เซลล์ข้อมูลแสดงด้วย ' ” แท็กใน HTML Tailwind CSS เซลล์เหล่านี้เก็บข้อมูลทั้งหมดไว้ในตาราง รายการเหล่านี้แสดงอยู่ใต้เซลล์ส่วนหัวและมีข้อมูลสำหรับรายการทั้งหมดสำหรับส่วนหัวเฉพาะ ตัวอย่างเช่น ถ้าเซลล์ส่วนหัวมีชื่อว่า “ชื่อ” เซลล์ข้อมูลด้านล่างจะมีชื่อของบุคลากรทั้งหมดที่บันทึกข้อมูลให้

เซลล์ข้อมูลยังมีการจัดรูปแบบเฉพาะอีกด้วย สิ่งเหล่านี้มีขนาดตัวอักษรที่เล็กกว่าเซลล์ส่วนหัวและมีข้อความธรรมดาหรือตัวเลขตามความต้องการ เซลล์ข้อมูลภายใต้เซลล์ส่วนหัว 'ชื่อ' จะมีชื่อของบุคคลที่เกี่ยวข้อง เช่น จอห์น เดวิด ไมเคิล และเจมส์

ตัวอย่าง
รหัสเพื่อสร้างเซลล์ข้อมูลตารางโดยใช้ '

ขั้นตอนต่อไปนี้อธิบายรหัสเพื่อสร้างเซลล์ข้อมูลตาราง:

• แท็ก “