ไม่ต้องสงสัยเลยว่าตารางถือเป็นวัตถุที่สำคัญที่สุดในการผลิตหน้าเว็บ เนื่องจากโดยปกติแล้วหน้าเว็บจะต้องอาศัยตารางในการจัดวางและการจัดระเบียบองค์ประกอบต่างๆ โดยตรง อย่างไรก็ตาม เพื่อนหลายคนมักละเลยการศึกษาตารางและมุ่งความสนใจไปที่เลเยอร์ รูปภาพ เอฟเฟ็กต์พิเศษ ฯลฯ ที่จริงแล้ว การใช้ตารางอย่างสมเหตุสมผลสามารถทำให้เพจของคุณสวยงามได้อย่างง่ายดาย นอกจากนี้ เรายังมักได้ยินเพื่อนบ่นว่าเพจที่สร้างโดยตารางนั้นซ้ำซากจำเจ . หยาบ ขาดความหลากหลาย และมักได้ยินคนถามวิธีทำเส้นขอบตาราง 1 พิกเซล ในความเป็นจริง ใน Dreamweaver เราสามารถปรับแต่งตารางของคุณได้สะดวกมาก จึงทำให้หน้าเว็บของคุณสวยงามและประณีตยิ่งขึ้น เราจะแนะนำวิธีปรับแต่งตารางของคุณใน Dreamweaver ในสามด้านต่อไปนี้
1. ใช้แผงคุณสมบัติ
รูปที่ 1 ก่อนอื่น เราต้องเข้าใจพารามิเตอร์บนแผงคุณสมบัติตารางทั้งสองแผง: CellPad และ CellSpace ดังแสดงในรูปที่ 1 CellPad หมายถึงระยะห่างระหว่างสองเซลล์ในตาราง และ CellSpace หมายถึงระยะห่างระหว่างแต่ละเซลล์และเนื้อหาที่อยู่ตรงกลาง ด้วยการเปลี่ยนพารามิเตอร์ทั้งสองนี้และจับคู่สีพื้นหลัง คุณสามารถสร้างเส้นขอบตารางขนาด 1 พิกเซลได้อย่างง่ายดาย
1. ใช้แผงวัตถุเพื่อแทรกตารางและกำหนดความกว้าง ความสูง แถวและคอลัมน์ของตาราง โปรดทราบว่าค่าเริ่มต้นของ CellPad, CellSpace และ Border ของตารางที่แทรกใน Dreamweaver จะเป็น 0 ทั้งหมดในขณะนี้ ดังแสดงในรูปที่ 2;
รูปที่ 2
2. กำหนดเส้นขอบของตารางในแผงคุณสมบัติเป็น 0, CellPad เป็น 5 (ซึ่งจะเก็บ 5 พิกเซลระหว่างเนื้อหาในเซลล์และขอบของเซลล์) CellSpace เป็น 1 (ซึ่งจะเก็บ 5 พิกเซลระหว่างเซลล์) ) ระยะห่าง 1 องค์ประกอบ) ดังแสดงในรูปที่ 3;
รูปที่ 3
3. ตั้งค่าสีพื้นหลังของตารางเป็น #999999 ดังแสดงในรูปที่ 4
4. ตั้งค่าสีพื้นหลังของเซลล์เป็น #FFFFFF ดังแสดงในรูปที่ 5
รูปที่ 5
5. ดูตัวอย่างเอฟเฟกต์ในเบราว์เซอร์ เราจะเห็นว่าตารางมีเส้นขอบพิกเซล ดังแสดงในรูปที่ 6
รูปภาพ 62
: การใช้การซ้อนโต๊ะ
ยังคงเป็นหลักการหลักข้างต้น เราสามารถบรรลุผลเพิ่มเติมได้โดยใช้การซ้อนตาราง
1. ขั้นแรก เราวาดตารางและตั้งค่าและสีของ CellPad และ CellSpace ของตารางนี้โดยอ้างอิงจากตัวอย่างก่อนหน้านี้ เอฟเฟกต์เฉพาะแสดงในรูปที่ 7;
รูปที่ 7 2. ต่อไปให้วาดตารางแถวเดียวและคอลัมน์เดียว ตั้งค่า CellPad=2, CellSpace=1 พารามิเตอร์เฉพาะดังแสดงในรูปที่ 8;
รูปที่ 8
3. ย้ายตารางที่สร้างในขั้นตอนแรกไปยังตารางในขั้นตอนที่สอง ตอนนี้ตารางจะดูเหมือนรูปที่ 9
ในรูปที่ 9 เราจะเห็นว่าตารางนี้มีกรอบด้านนอกแบบเส้นคู่และกรอบด้านในแบบเส้นเดียว
4. แก้ไขตารางในขั้นตอนที่สองเป็นแถวเดียวและสองคอลัมน์ และวางตารางในขั้นตอนแรกในแต่ละเซลล์ ตารางสุดท้ายจะมีลักษณะเหมือนรูปที่ 10
รูปที่ 10
ใหม่
กำหนดสไตล์ .tdstyle แยกกัน พารามิเตอร์เฉพาะดังแสดงในรูปที่ 13
โปรดทราบว่าเรากำหนดความกว้างของเส้นขอบด้านบนและด้านล่างเป็น 1 พิกเซล และความกว้างของเส้นขอบด้านซ้ายและด้านขวาเป็น 0
4. เอฟเฟกต์ตารางสุดท้ายแสดงในรูปที่ 14
(ภาพที่ 15)
ในเวลานี้ ตารางจะแสดงเอฟเฟกต์สามมิติ
6. ตารางด้านบนดูไม่สมบูรณ์แบบ ไม่มีเส้นขอบทั้งด้านขวาและด้านล่างของตาราง เราสามารถกำหนด style.table1 อื่นได้ โดยกำหนดทั้งสี่ด้านของสไตล์นี้ให้เป็น 1 พิกเซล และแนบมัน
