ทีนี้มาดูวิธีการใช้ไวยากรณ์ CSS เพื่อตกแต่งตาราง หมายเหตุ: เว้นแต่จะระบุไว้เป็นอย่างอื่นการเว้นวรรคเซลล์, cellpadding และค่าเส้นขอบของตารางที่แทรกในตัวอย่างที่กล่าวถึงในบทความนี้คือ 0 ตัวอย่าง 1: 1px ตารางตาราง
หลายคนกระตือรือร้นที่จะสร้างรูปแบบ 1px ดังนั้นพวกเขาจึงคิดค้นวิธีการต่าง ๆ ซึ่งอาจมีความยืดหยุ่นมากขึ้นเมื่อใช้กับ CSS หากคุณต้องการสร้างตาราง 1x1 1px เพียงแค่กำหนดค่าเส้นขอบ ก่อนอื่นเราแทรกตาราง 1x1 กับ Dreamweaver ด้วยความกว้าง 50 แล้วกำหนด เส้นขอบ: 1 ชาแข็ง ในโต๊ะหรือ TD ผลของตารางที่ทำมีดังนี้:
อย่างไรก็ตามมันเป็นปัญหามากขึ้นเล็กน้อยในการสร้างตาราง non-1x1 (เช่น 2x2) เพราะถ้าคุณกำหนดเส้นขอบสไตล์ TD โดยตรง: 1 ชาแข็งเอฟเฟกต์การแสดงผลมีดังนี้:
คุณจะพบว่ากล่องด้านนอกของตารางคือ 1px ในขณะที่ด้านในกลายเป็น 2px ซึ่งเกิดจากการซ้อนทับ เพื่อแก้ปัญหานี้เราสามารถทำได้:
ก่อนกำหนดสไตล์สำหรับ TD: Border:#CC0000 Solid; Border-Width: 0 1 1 0 ดังนั้นตารางจะแสดงเป็น
จากนั้นกำหนดรูปแบบสำหรับตาราง :: Border:#CC0000 Solid; Border-Width: 1 0 0 0 1 เพื่อให้คุณสามารถทำให้เป็นตาราง 1px ที่สมบูรณ์
ตัวอย่างที่ 2: 1px ตารางที่มีเส้นขอบหนา
เส้นกริดด้านในของตารางนี้คือ 1px และเส้นขอบด้านนอกคือ 3px มันไม่ยากที่จะทำด้วยพื้นฐานของตัวอย่าง 1 เพียงปรับเปลี่ยนค่าความกว้างของชายแดน
รหัสสำหรับสไตล์ที่ใช้โดยตารางคือ: เส้นขอบ: สีน้ำเงินแข็ง; ความกว้างของชายแดน: 3 2 2 3 และรหัสสำหรับสไตล์ที่ใช้โดย TD คือ: เส้นขอบ: Blue Solid; Border-Width: 0 1 1 0 ตัวอย่างที่ 3: ตารางกล่อง
การฝึกฝนนั้นคล้ายกับตัวอย่างที่ 1 และสไตล์เส้นขอบจะเปลี่ยนจากของแข็งเป็นประ รหัสสำหรับสไตล์ที่ใช้ในตารางคือ: เส้นขอบ: สีดำประ; Border-Width: 1 0 0 1 และรหัสสำหรับสไตล์ที่ใช้ใน TD คือ: Border: Black Dashed; Border-Width: 0 1 1 0 ตัวอย่าง 4: โต๊ะประและเส้นขอบเส้น
โปรดทราบว่าพิกเซลขั้นต่ำของประคือ 2 รหัสสำหรับสไตล์ที่ใช้ในตารางคือ: เส้น ขอบ: สีเขียวด่าง;
โปรดทราบว่าพิกเซลขั้นต่ำของเส้นคู่คือ 3 รหัสสำหรับสไตล์ที่ใช้ในตารางคือ: เส้นขอบ: Teal 4 Dou รหัสสำหรับสไตล์ที่ใช้ใน TD คือ: Border: Teal 1 Solid ตัวอย่าง 6: เริ่มต้นตารางนอกกรอบ
รหัสสำหรับสไตล์ที่ใช้โดยตารางคือ: เส้นขอบ: 3 เริ่มต้น และรหัสสำหรับสไตล์ที่ใช้โดย TD คือ: Border: 1 Solid ตัวอย่าง 7: Inset Outline Table Table
รหัสสำหรับสไตล์ที่ใช้โดยตารางคือ: border: 3 สิ่งที่ใส่เข้าไป และรหัสสำหรับสไตล์ที่ใช้โดย TD คือ: Border: 1 Solid ตัวอย่าง 8: โต๊ะนอกกรอบสันเขา
รหัสสำหรับสไตล์ที่ใช้โดยตารางคือ: border:#ee0000 3 ridge รหัสสำหรับสไตล์ที่ใช้โดย TD คือ: Border: 1 Solid
หน้าก่อนหน้า 1 2 3 หน้าถัดไปอ่านข้อความเต็ม