ความสำคัญของคำบรรยายตารางคืออะไร?
“คำอธิบายตาราง” ใช้เพื่อตั้งชื่อตารางเพื่อให้ผู้ใช้สามารถกำหนดความหมายของแต่ละตารางและวิธีใช้ข้อมูลที่มีอยู่ภายในตาราง คำบรรยายยังสามารถช่วยในการกำหนดหมายเลขตารางบนเว็บเพจเพื่อให้สามารถเข้าถึงข้อมูลภายในตารางได้มากขึ้น
คำอธิบายภาพให้บริบทที่แน่นอนสำหรับแต่ละตารางในเอกสารหรือเว็บเพจที่มีตารางจำนวนมาก ยิ่งไปกว่านั้น คำบรรยายที่มีโครงสร้างยังช่วยให้แน่ใจว่าผู้อ่านเข้าใจอย่างรวดเร็วว่าข้อมูลใดบ้างที่อยู่ในแต่ละตาราง
จะใช้คำอธิบายตารางใน Tailwind CSS ได้อย่างไร
ใน Tailwind CSS คำบรรยายจะเพิ่มลงในตารางโดยใช้ ' <คำบรรยายภาพ> ” แท็ก คำอธิบายนี้ระบุชื่อเรื่องและข้อมูลเพิ่มเติมเกี่ยวกับข้อมูลในตาราง
ตัวอย่าง: การเพิ่มคำอธิบายตารางทั้งด้านบนและด้านล่างของตาราง
ในโค้ดต่อไปนี้ เราจะเพิ่ม 'คำบรรยายภาพ' ที่ด้านบนและด้านล่างของตารางดังนี้:
< โต๊ะ >
< โต๊ะ ระดับ = 'min-w-เต็มขอบ border-gray-300 หาร-y หาร-grey-300' >
< มด >
< ท >
< ไทย ระดับ = 'py-2 px-4 bg-gray-100 border-b' >
ชื่อ
< / ไทย >
< ไทย ระดับ = 'py-2 px-4 bg-gray-100 border-b' >
อีเมล
< / ไทย >
< ไทย ระดับ = 'py-2 px-4 bg-gray-100 border-b' >
รหัส
< / ไทย >
< ไทย ระดับ = 'py-2 px-4 bg-gray-100 border-b' >
ติดต่อ
< / ไทย >
< / ท >
< / มด >
< ร่างกาย >
< ท >
< td ระดับ = 'py-2 px-4 border-b' > เจมส์ < / td >
< td ระดับ = 'py-2 px-4 border-b' > james@tsl.com < / td >
< td ระดับ = 'py-2 px-4 border-b' > 61101-1234567-8 < / td >
< td ระดับ = 'py-2 px-4 border-b' > 123-456-7890 < / td >
< / ท >
< ท >
< td ระดับ = 'py-2 px-4 border-b' > ไมเคิล < / td >
< td ระดับ = 'py-2 px-4 border-b' > ไมเคิล@tsl.com < / td >
< td ระดับ = 'py-2 px-4 border-b' > 61101-8765432-1 < / td >
< td ระดับ = 'py-2 px-4 border-b' > 098-765-4321 < / td >
< / ท >
< ท >
< td ระดับ = 'py-2 px-4 border-b' > เดวิด < / td >
< td ระดับ = 'py-2 px-4 border-b' > David@TSL.com < / td >
< td ระดับ = 'py-2 px-4 border-b' > 54791-1234567-8 < / td >
< td ระดับ = 'py-2 px-4 border-b' > 123-786-4290 < / td >
< / ท >
< ท >
< td ระดับ = 'py-2 px-4 border-b' > ปีเตอร์ < / td >
< td ระดับ = 'py-2 px-4 border-b' > peter@tsl.com < / td >
< td ระดับ = 'py-2 px-4 border-b' > 54300-1234567-8 < / td >
< td ระดับ = 'py-2 px-4 border-b' > 611-239-7890 < / td >
< / ท >
< / ร่างกาย >
< คำอธิบายภาพ >
ข้อมูลส่วนตัวของพนักงาน
< / คำอธิบายภาพ >
< / โต๊ะ >
< คำอธิบายภาพ >
ชื่อบริษัท
< / คำอธิบายภาพ >
ทำตามขั้นตอนเหล่านี้ในรหัสด้านบน:
- สร้างตารางโดยใช้ปุ่ม “ <ตาราง> ” แท็ก
- ระบุการจัดรูปแบบตารางผ่านคลาสยูทิลิตี้
- กำหนดหัวตารางของ “ชื่อ” “อีเมล” “รหัส” และ “ผู้ติดต่อ” ผ่านทาง “ <ส่วนหัว> ” แท็ก
- กำหนดข้อมูลกำลังพลทั้ง 4 หน่วยภายในตารางโดยใช้ “ ' และ '
แท็ก - จากนั้นระบุคำอธิบายตารางโดยใช้ปุ่ม “ <คำบรรยายภาพ> ” แท็กและปิดตาราง
- สุดท้าย เราเพิ่มแท็ก “
” ที่ส่วนท้ายเพื่อใช้คำอธิบายตารางที่ด้านล่างของตาราง - บันทึก : คำอธิบายของตารางที่ด้านบนสุดของตารางระบุไว้ในแท็ก '
' ในขณะที่คำอธิบายด้านล่างจำเป็นต้องระบุหลังจากแท็กปิดของตาราง
เอาต์พุต
บทสรุป
คำบรรยายของตารางมีความสำคัญในการให้ข้อมูลเพิ่มเติมเกี่ยวกับตารางและข้อมูลที่อยู่ในนั้น ด้วยเหตุนี้ การเข้าถึงตารางจึงเพิ่มขึ้นอย่างมากมายทั้งสำหรับผู้ใช้และผู้อ่าน คำอธิบายภาพให้ข้อมูลเพิ่มเติมเล็กน้อยเกี่ยวกับตารางในลักษณะที่กระชับ ซึ่งสามารถดูได้ในคำอธิบายออนไลน์เช่นกัน