Blog tips เก็บ ๆ เค้ามา #14 ติดตารางอีกแล้ว ติดตารางครั้งที่ 2!!! เมื่อ blog ที่แล้ว เราได้เรียนการสร้างตารางพื้นฐานไปแล้วนะครับ มาดูการตกแต่งตารางต่อครับ ว่าด้วยการตกแต่ง cell ตารางก็มีง่าย ๆ แค่นั้นล่ะครับ ต่อไปก็เป็นการตบแต่งตัวช่องตารางแต่ละช่องครับ cellpadding เป็นการกำหนดระยะรอบ ๆ ข้อมูลในตารางหรือใน td ครับ โดยเราจะลงคำสั่งไปในช่องของ tags
ผลที่ได้ :
spacing เป็นการกำหนดระยะรอบ ๆ แต่ละตัวช่องตารางครับ จะได้ไม่ติดกัน ถ้าเราใส่เลขมาก จะมีระยะระหว่างอักษรกับขอบตารางมากไปด้วยครับ แต่โปรดระวัง หากใส่ขอบมากไปเมื่อมีข้อความค่อนข้างยาว ก็จะบีบให้ตัวหนังสือทำให้มีย่อหน้าที่เล็กลงไปด้วย ไม่เต็มช่องแบบแปลก ๆ ครับ ตัวอย่าง :
ผลที่ได้ :
cell alignment หรือการกำหนดตำแหน่งข้อความหรืออะไรก็ตามที่เราใส่ไปใน cell โดยคำสั่งที่ใช้คือ align="..." ครับ เป็นการกำหนดค่าในแนวนอน ดังนั้นจะมีตัวเลือกเป็น right, left และ center แค่นั้น ส่วน valign="..." นั้นหมายถึง Verticlal Alignment ก็จะมีตัวเลือกไปแทนจุดได้ 3 แบบคือ middle, bottom ,top และ baseline ครับ ตัวอย่าง :
ผลที่ได้ :
จากตารางข้างบนให้สังเกตว่า ถ้าไม่กำหนดค่าอะไรเลย หรือค่า default ค่าที่กำหนดของ align จะเป็น left ลองมองตารางด้านขวามือ และค่า valign จะเป็น middle ลองดูแถวตารางด้านซ้ายมือนะครับ และดูสองแถวล่างนะครับ การใช้ valign แบบ bottom กับ baseline ใน tags คำสั่ง การขยายช่อง cell colspan เป็นคำสั่งที่ขยายรวม (merge) cell หลาย ๆ เซลไว้ด้วยกัน โดยจะต้องใส่หลัง tag คำสั่ง ครับ โดยจะอยู่ในบรรทัดเดียวกัน หรือในแนวนอน | rowspan เป็นคำสั่งรวม (merge) cell ในแนวตั้งครับ.. อ่านแล้วงง ๆ ต้องดูรูปครับ
และคำสั่งที่ใช้จากตารางข้างบนก็คือ
ตารางซ้อนตาราง ก็คือการใส่ tag คำสั่งของตารางในช่อง cell ของตารางเดิมนั่นแหละครับ โดยใส่หลัง tag คำสั่ง นะครับ |
ตัวอย่าง:
ผลที่ได้ :
ดังนี้แหละครับ ประโยชน์ของการทำตารางซ้อนในตารางก็คือ เราจะได้ทำสีขอบตารางได้ครับ การทำสีให้ขอบตาราง สังเกตว่า เราไม่สามารถใส่คำสั่งระบุขอบสีตาราง หรือ table border ได้ (เท่าที่หาจากเนตยังไม่เจอเลย ใครเจอแจ้งผมทราบด้วยนะครับ) แต่ว่า เราสามารถทำให้ขอบตารางสีสีสันสวยงามได้ โดยการทำหนดตารางให้อันข้างในเล็กกว่าข้างนอกนิดหน่อย และให้พื้นหลัง (background) ต่างกันครับ ... ... ... งงล่ะสิ มาลองดูนี่ก่อนครับ
ซึ่งอธิบายได้ โดย
เป็นไงครับ งงได้ที่ตาม slogan ประจำ blog ยังครับ 5 5 5 5 สะใจ ทีนี้ก็คงเข้าใจเรื่องของการลบเส้นขอบตาราง และการลบสีแล้วใช่ไหมครับ ก็แค่กำหนดให้เส้นขอบและสีพื้นนั้น transparent หรือใสไปเท่านั้นเองครับ สำหรับคนที่เคยลง code ลบตารางไว้คงทราบที่มาแล้วนะครับ เช่น code จาก blog ของคุณรำเพย การลบสีในตารางของ bloggang รวมทั้งสีเส้นขอบด้วย การลบสีที่หัว cell ก็คือที่เป็นหัวข้อใน bloggang น่ะครับ เห็นได้ว่าใช้หลักการเดียวกัน คือ การกำหนดให้ border="0" และให้ background color เป็น transparent ซะ แต่โปรดสังเกตว่าเมื่อเราใช้ stylesheet แล้ว จะทำให้เราระบุสีของขอบได้ด้วยครับ ทุ่นเวลาในการทำสีขอบตารางด้วยแค่ code html พื้น ๆ ไปได้มากทีเดียวครับ การลงด้วย stylesheet tag นี้จะเราจะเอาไปใส่ช่อง profile หรือ ช่อง slogan ก็ได้ครับ ผลก็คือทำให้ทั้ง blog ของเรานั้นเปลี่ยนไปพร้อม ๆ กัน คำสั่งนี้จะได้ผลกับตารางทุกชนิดที่เราได้สร้างขึ้นภายหลังด้วยครับ ทำให้ไม่มีขอบ ไม่สามารถใส่สีพื้นได้ ไปด้วยครับ พอเข้าใจไหมครับเนี่ย.... ไปนอนดีกว่าครับ แยกย้าย แยกย้าย... น่ารักจังเลย ขยันเอาของมาฝากบ่อยๆ
แต่ช่วงนี้ยังไม่แต่ง blog เพิ่มล่ะค่ะ อยากแต่งเมื่อไหร่ จะแอบกลับมาจิ๊กไปใช้นะคะ ![]() โดย: สาวไกด์ใจซื่อ
![]() เอาไว้ไปใช้ปรับแต่งใน dreamweaver ครับ ขอบคุณครับ
![]() โดย: noom_no1
![]() งงชิหายเลย
โดยเฉพาะตอนท้ายสุด จาสอบอีก2วันแล้ว แงงงงง โดย: fowl IP: 202.28.9.80 วันที่: 26 กรกฎาคม 2549 เวลา:1:10:04 น.
บทความทั้งหมด
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Pantip.com | PantipMarket.com | Pantown.com | © 2004 BlogGang.com allrights reserved. |
ปล.อ่านตอนแรกตกใจนึกว่าเข้าซังเต ไปซะแร้น