วิธีสร้างตารางโดยใช้แท็กและ CSS เท่านั้น

” แท็กข้างในนั้น

---

---

ตัวอย่าง
พิจารณาตัวอย่างโค้ด HTML ต่อไปนี้เพื่อสร้างตาราง:

< แผนก ระดับ = 'divTable' >
< แผนก ระดับ = 'ส่วนหัวแถว' >
< แผนก ระดับ = 'ไดฟ์เซลล์' >< ข > รหัส < / ข >< / แผนก >
< แผนก ระดับ = 'ไดฟ์เซลล์' >< ข > ชื่อ < / ข >< / แผนก >
< แผนก ระดับ = 'ไดฟ์เซลล์' >< ข > อายุ < / ข >< / แผนก >
< / แผนก >
< แผนก ระดับ = 'divRow' >
< แผนก ระดับ = 'ไดฟ์เซลล์' > 001 < / แผนก >
< แผนก ระดับ = 'ไดฟ์เซลล์' > สมิธ < / แผนก >
< แผนก ระดับ = 'ไดฟ์เซลล์' > 25 < / แผนก >
< / แผนก >
< แผนก ระดับ = 'divRow' >
< แผนก ระดับ = 'ไดฟ์เซลล์' > 002 < / แผนก >
< แผนก ระดับ = 'ไดฟ์เซลล์' > จอห์น < / แผนก >
< แผนก ระดับ = 'ไดฟ์เซลล์' > 31 < / แผนก >
< / แผนก >
< แผนก ระดับ = 'divRow' >
< แผนก ระดับ = 'ไดฟ์เซลล์' > 003 < / แผนก >
< แผนก ระดับ = 'ไดฟ์เซลล์' > ชาร์ลส์ < / แผนก >
< แผนก ระดับ = 'ไดฟ์เซลล์' > 28 < / แผนก >
< / แผนก >
< / แผนก >

ในข้อมูลโค้ดด้านบน:

• เอ “
  ” แท็กถูกเพิ่มด้วยคลาสชื่อ “ divTable '.
• ข้างใน ' แผนก ” องค์ประกอบคอนเทนเนอร์ เพิ่มอีก “ แผนก ” องค์ประกอบคอนเทนเนอร์ที่มีคลาสประกาศเป็น “ ส่วนหัว แถว '.
• อีกครั้ง เพิ่มสาม “ แผนก ” องค์ประกอบที่มีคลาสชื่อ “ divRow ” พร้อมคอนเทนเนอร์ย่อยสามรายการพร้อม “ divCell ' ระดับ.
• จากนั้นเพิ่มสามองค์ประกอบ div เพิ่ม ' รหัส ”, “ ชื่อ ' และ ' อายุ ” ในแถวส่วนหัวของตาราง
• หลังจากนั้น ระบุค่าสำหรับ “ID”, “Name” และ “Age” สำหรับแต่ละองค์ประกอบ div

นี่คือทั้งหมดที่เกี่ยวกับวิธีการใช้ “ แผนก ” องค์ประกอบในการสร้างตาราง ตอนนี้ มาใช้คุณสมบัติ CSS กับมัน:

---

---

.divTable
{
จอแสดงผล: ตาราง;
ความกว้าง :อัตโนมัติ;
พื้นหลัง- สี :#อีนี่;
ชายแดน :1px ของแข็ง # 666666 ;
ระยะห่างระหว่างเส้นขอบ:5px;
}
.divRow
{
ความกว้าง :อัตโนมัติ;
จอแสดงผล: แถวตาราง;
}
.divเซลล์
{
ความกว้าง :150px;
ลอย:ซ้าย;
จอแสดงผล:ตาราง-คอลัมน์;
พื้นหลัง- สี : RGB ( 212 , 209 , 209 ) ;
}

ในองค์ประกอบสไตล์ CSS ด้านบน:

• เพิ่มตัวเลือกที่อ้างถึง ' divTable ” (ที่มีค่าตารางทั้งหมด) และกำหนดคุณสมบัติ CSS ที่ต้องการ (เช่น “ แสดง ”, “ ความกว้าง ”, “ สีพื้นหลัง ”, “ ชายแดน ' และ ' ระยะห่างระหว่างเส้นขอบ ”) สำหรับเนื้อหาตาราง
• หลังจากนั้น เพิ่มตัวเลือกคลาสที่เลือกองค์ประกอบของ ' divRow ” คลาสเพื่อเพิ่ม CSS “ ความกว้าง ' และ ' แสดง ” คุณสมบัติของธาตุ
• สุดท้าย เพิ่มคุณสมบัติสไตล์ CSS ให้กับองค์ประกอบใน ' .divเซลล์ ” ตัวเลือกคลาส

สิ่งนี้จะสร้างตารางในผลลัพธ์และจะแสดงผลลัพธ์ต่อไปนี้:

นั่นคือทั้งหมดที่เกี่ยวกับการสร้างตารางใน HTML โดยใช้แท็ก