| ” ระบุหัวเรื่องเนื้อหา
ตารางที่สร้างขึ้นในขณะนี้มีลักษณะดังนี้: มาดูวิธีจัดรูปแบบตารางนี้กันเลย ขั้นตอนที่ 2: จัดรูปแบบองค์ประกอบ 'ร่างกาย' ร่างกาย {ตระกูลแบบอักษร: Verdana, Geneva, Tahoma, sans-serif; พื้นหลัง- สี : RGB ( 233 , 233 , 233 ) ; } องค์ประกอบ ใช้กับคุณสมบัติสไตล์ CSS ต่อไปนี้:
ขั้นตอนที่ 3: สไตล์องค์ประกอบ 'คำอธิบายภาพ' คำอธิบายภาพ {ตัวอักษร- ขนาด : 25px; ข้อความ- จัด : ศูนย์กลาง; พื้นหลัง- สี : #1C6758; สี : คอร์นซิลค์; } องค์ประกอบ
นี่คือผลลัพธ์ของรหัสที่ให้ไว้ด้านบน: ขั้นตอนที่ 4: เพิ่มเส้นขอบให้กับตาราง มาใช้เส้นขอบพร้อมกับช่องว่างภายในและระยะขอบให้กับตาราง: ตาราง, th, td {ชายแดน : 2px ทึบ #1C6758; ช่องว่างภายใน: 1px 6px; ขอบ: อัตโนมัติ; } ที่นี่:
เอาต์พุต บันทึก : หากไม่ต้องการให้มีช่องว่างระหว่างขอบตาราง ให้ใช้คุณสมบัติ border-collapse ขั้นตอนที่ 5: ยุบระยะห่างของเส้นขอบจากตาราง ขั้นตอนที่ 6: ปรับขนาดตาราง ความกว้าง : 160px; } ที่เพิ่ม “ ความกว้าง คุณสมบัติ ” ที่มีองค์ประกอบ จะปรับขนาดตารางตามนั้นโดยอัตโนมัติ::
| เรายังสามารถนำสไตล์ไปใช้กับเซลล์ตารางที่ต้องการได้อีกด้วย มาหารือกัน! ขั้นตอนที่ 7: สไตล์เซลล์ตารางเฉพาะ ตอนนี้ เข้าถึงเซลล์โดยใช้ชื่อคลาสในไฟล์ CSS: .highlight {พื้นหลัง- สี : #0f90d5; } “ .highlight ” หมายถึงไฮไลท์คลาสขององค์ประกอบ องค์ประกอบนี้ใช้กับ ' สีพื้นหลัง คุณสมบัติ ” เพื่อระบุสีบนพื้นหลัง
| อย่างที่เราเห็น เซลล์ตารางที่ระบุได้รับการจัดรูปแบบเรียบร้อยแล้ว: ขั้นตอนที่ 8: ตั้งค่าตระกูลฟอนต์และขนาดของตาราง ตาราง {ครอบครัวแบบอักษร: เล่นหาง; ตัวอักษร- ขนาด : 18px; ข้อความ- จัด : ศูนย์กลาง; } คุณสมบัติ CSS ต่อไปนี้ใช้กับองค์ประกอบตาราง:
นี่คือผลลัพธ์: ขั้นตอนที่ 9: แถวสีตามลำดับ tbody tr:ลูกคนที่ n ( สม่ำเสมอ ) { พื้นหลัง- สี : #FFB200; } ที่นี่:
สังเกตได้ว่าสีพื้นหลังใช้กับแถวคู่ได้สำเร็จ: นั่นคือทั้งหมดที่เกี่ยวกับการจัดรูปแบบตารางด้วย CSS บทสรุปตารางเป็นเครื่องมือสำคัญในการจัดระเบียบข้อมูล สามารถสร้างตารางได้โดยใช้ HTML
|
|---|
