เทคนิคการสร้างตารางแบบจุดไข่ปลา

วันพุธที่ 10 กรกฏาคม 2013 เวลา 02:57 น. ผู้ดูแลระบบ
พิมพ์

เทคนิคการสร้างตารางแบบจุดไข่ปลา  หลายๆ ครั้งเห็นบางคนถามว่าเราจะสร้างได้อย่างไร หรือต้องใส่ background หรือเปล่า คิดไปคิดมาปวดหัว มาดูวิธีการสร้างแบบนี้ดีกว่าง่ายเพียงปลายนิ้ว เทคนิคนี้เราจะนำ CSS Style มาประยุกต์ใช้เข้ากับตาราง มาดูขั้นตอนการทำ

ขั้นตอนการทำ
1. อันดับแรกแน่นอนคุณจะต้องสร้างตารางขึ้นมาก่อน ตามขนาดที่คุณต้องการ แต่รูปแบบให้กำหนดดังภาพตัวอย่าง หลังจากที่เรากด ok แล้วเราจะได้ตารางขึ้นมา แบบไม่มีเส้นขอบ และระยะห่างของขอบ

2. หลังจากนั้นเรามาสร้าง CSS Style แบบจุดไข่ปลา เพื่อนำไปใช้กับตารางอีกที โดยลำดับ ตามภาพ





3. สร้างกันได้ไหมเอ่ย ถ้าไม่ได้ก็นำโค้ดนี้ไปวางที่ Head ได้เลย

<style type="text/css">
<!--
.border {
border: 1px dotted #000000;
}
-->
</style>

4. ถ้าสร้างได้แล้ว เราก็นำ CSS Style มาใส่ที่ตาราง โดยให้เราคลิดขวาที่ตารางแล้วเลือก Css ที่เราสร้างได้เลย

5. หลังจากนั้นก็ลอง Preview ดูว่าได้ผลตามที่เราต้องการหรือไม่ ขอให้สนุกกับการทำเว็บ