Group Blog
 
<<
กรกฏาคม 2548
 
 12
3456789
10111213141516
17181920212223
24252627282930
31 
 
12 กรกฏาคม 2548
 
All Blogs
 
Blog tips เก็บ ๆ เค้ามา #14 ติดตารางอีกแล้ว





ติดตารางครั้งที่ 2!!!

เมื่อ blog ที่แล้ว เราได้เรียนการสร้างตารางพื้นฐานไปแล้วนะครับ มาดูการตกแต่งตารางต่อครับ






ว่าด้วยการตกแต่ง cell



ตารางก็มีง่าย ๆ แค่นั้นล่ะครับ ต่อไปก็เป็นการตบแต่งตัวช่องตารางแต่ละช่องครับ


cellpadding เป็นการกำหนดระยะรอบ ๆ ข้อมูลในตารางหรือใน td ครับ โดยเราจะลงคำสั่งไปในช่องของ tags ครับ

ตัวอย่าง :

cellpadding="10">

  

รอบ ๆ โอ่โถง โล่งสบาย

cellpadding="2">

  

โอย อย่าเบียดเด่ะ


ผลที่ได้ :

รอบ ๆ โอ่โถง โล่งสบาย
โอย อย่าเบียดเด่ะ




spacing เป็นการกำหนดระยะรอบ ๆ แต่ละตัวช่องตารางครับ จะได้ไม่ติดกัน ถ้าเราใส่เลขมาก จะมีระยะระหว่างอักษรกับขอบตารางมากไปด้วยครับ แต่โปรดระวัง หากใส่ขอบมากไปเมื่อมีข้อความค่อนข้างยาว ก็จะบีบให้ตัวหนังสือทำให้มีย่อหน้าที่เล็กลงไปด้วย ไม่เต็มช่องแบบแปลก ๆ ครับ

ตัวอย่าง :

cellspacing="30">

  

ดูขอบ ๆ cell กว้างขึ้นไหมครับ

cellspacing="2">

  

อึดอัดเฟ้ย...


ผลที่ได้ :

ดูขอบ ๆ cell กว้างขึ้นไหมครับ
อึดอัดเฟ้ย



cell alignment หรือการกำหนดตำแหน่งข้อความหรืออะไรก็ตามที่เราใส่ไปใน cell โดยคำสั่งที่ใช้คือ align="..." ครับ เป็นการกำหนดค่าในแนวนอน ดังนั้นจะมีตัวเลือกเป็น right, left และ center แค่นั้น ส่วน valign="..." นั้นหมายถึง Verticlal Alignment ก็จะมีตัวเลือกไปแทนจุดได้ 3 แบบคือ middle, bottom ,top และ baseline ครับ

ตัวอย่าง :



  
  


  
  


  
  


  
  

valign="bottom">
  
  
valign="baseline">
  
  

ลักษณะของ cell alignลักษณะของ valign
align="left"height="50">ชิดซ้าย หรือ leftvalign="top">ชิดบน หรือ top
align="center"height="50">กลาง cell แบบ centervalign="middle">กลาง cell แบบ middle
align="right"height="50">ชิดขวา หรือ rightvalign="bottom">ชิดล่าง หรือ bottom
ชิดล่างแบบ bottomjoy jogging
ชิดล่างแบบ baselinejoy jogging&t;/font>


ผลที่ได้ :

ลักษณะของ cell alignลักษณะของ valign
ชิดซ้าย หรือ leftชิดบน หรือ top
จัดกลาง cell แบบ centerจัดกลาง cell แบบ middle
ชิดขวา หรือ rightชิดล่าง หรือ bottom
ชิดล่างแบบ bottomjoggy
ชิดล่างแบบ baselinejoggy


จากตารางข้างบนให้สังเกตว่า ถ้าไม่กำหนดค่าอะไรเลย หรือค่า default ค่าที่กำหนดของ align จะเป็น left ลองมองตารางด้านขวามือ และค่า valign จะเป็น middle ลองดูแถวตารางด้านซ้ายมือนะครับ

และดูสองแถวล่างนะครับ การใช้ valign แบบ bottom กับ baseline ใน tags คำสั่ง นั้นจะเห็นว่าถ้าเลือกแบบ bottom แล้ว font ขนาดต่างกัน จะจัดแนวบรรทัดให้อยู่ในระดับล่างสุดของรูปแบบอักษร ลองดูที่ระดับจะอยู่ที่ปลายหางตัว g, y, j เลยครับ ส่วนถ้าเป็น baseline นั้นจะจัดให้ตัวอักษรอยู่ในเส้นบรรทัดเดียวกัน ไม่ได้อยู่ระดับหางของตัวอักษร (โปรดดูภาพประกอบครับ)



การขยายช่อง cell



colspan เป็นคำสั่งที่ขยายรวม (merge) cell หลาย ๆ เซลไว้ด้วยกัน โดยจะต้องใส่หลัง tag คำสั่ง
ครับ โดยจะอยู่ในบรรทัดเดียวกัน หรือในแนวนอน

rowspan เป็นคำสั่งรวม (merge) cell ในแนวตั้งครับ..

อ่านแล้วงง ๆ ต้องดูรูปครับ


รัดตาบาน
(* ^ *) แถวนี้ดูซะใครคุม เหอ เหอ กร๊ากก
(> ^ <) ตารางนี้
ใครใหญ่ฟะ.....
เคี๊ยก เคี๊ยก เคี๊ยก
('- - ) ง่ะ อารายกันเนี่ย(- -") กำ กำ กำของกรู(o_O'') เฮ้ย อารายก๊านนน
(-__-) ง่า..อึ้งกิมกี่ ซีทีเอ๊กส์ (' ~ + !) เอ่อ ก็พวกป๋าละใหญ่อ่ะ (+_+ ') เวรของตรู เฮ้อ!
(+ * o ") เหวอ! พวกนี้ท่าจะบ้า (T__T'') แม่เจ้า หนีเสือปะกางเกง (o ^ O'') เอ่อ ลงคะแนนใหม่ได้ป่ะ



และคำสั่งที่ใช้จากตารางข้างบนก็คือ


  :
  


  
  
  
  


  
  
  


  
  
  

รัดตาบาน →
colspan="3"> (* ^ *) แถวนี้ดูซะใครคุม เหอ เหอ กร๊ากก
rowspan="3"> (> ^ <) ตารางนี้
ใครใหญ่ฟะ...
เคี๊ยก เคี๊ยก เคี๊ยก
('- - ) ง่ะ อารายกันเนี่ย (- -") กำ กำ กำของกรู(o_O'') เฮ้ย อารายก๊านนน
(-__-) ง่า..อึ้งกิมกี่ ซีทีเอ๊กส์ (' ~ + !) เอ่อ ก็พวกป๋าละใหญ่อ่ะ (+_+ ') เวรของตรู เฮ้อ!
(+ * o ") เหวอ! ท่าจะบ้า (T__T'') แม่เจ้า หนีเสือปะกางเกง (o ^ O'') เอ่อ ลงคะแนนใหม่ได้ป่ะ



ตารางซ้อนตาราง




ก็คือการใส่ tag คำสั่งของตารางในช่อง cell ของตารางเดิมนั่นแหละครับ โดยใส่หลัง tag คำสั่ง
นะครับ


ตัวอย่าง:



   
   ← ปิด tag

   

   


(" - -)
      ← เริ่มขึ้น tag ตารางใหม่ในช่อง tag
      
      
      
      
      
      
ง่า โดนขังในตารางซ้อนตารางเลย
ง่ะ ซวยกว่า... โดนขังชั้นล่างอีกต่างหาก
← อย่าลืมปิด tag ครับ
   
ที่เปิดไว้ตะกี้
("-_+) ( > ~ < )       (*_ *! )


ผลที่ได้ :

(" - -)
ง่า โดนขังในตารางซ้อนตารางเลย
ง่ะ ซวยกว่า... โดนขังชั้นล่างอีกต่างหาก
("-_+) ( > ~ < )       (*_ *! )



ดังนี้แหละครับ ประโยชน์ของการทำตารางซ้อนในตารางก็คือ เราจะได้ทำสีขอบตารางได้ครับ


การทำสีให้ขอบตาราง



สังเกตว่า เราไม่สามารถใส่คำสั่งระบุขอบสีตาราง หรือ table border ได้ (เท่าที่หาจากเนตยังไม่เจอเลย ใครเจอแจ้งผมทราบด้วยนะครับ) แต่ว่า เราสามารถทำให้ขอบตารางสีสีสันสวยงามได้ โดยการทำหนดตารางให้อันข้างในเล็กกว่าข้างนอกนิดหน่อย และให้พื้นหลัง (background) ต่างกันครับ

...
...
...


งงล่ะสิ มาลองดูนี่ก่อนครับ

อยากลองใส่พื้นหลังเป็นภาพก็ยังได้ครับ และก็กำหนดให้ระยะห่างของตัวอักษรกับกรอบห่างกันได้มาก ด้วยการใส่ cellspacing ครับ
เห็นมั้ยครับขอบสีสวยเชียว
อันนี้แบบมีขอบของ border ด้วย
ถ้า cellspacing มากขึ้นครับ ช่องจะใหญ่ขึ้นครับ
ถ้าพื้นสีเข้ม อย่าลืมให้อักษรสีอ่อนครับ


ซึ่งอธิบายได้ โดย


   
   

   

   

   

   background="//www.bloggang.com/data/nutsri/picture/1120510525.gif" cellspacing="70">
   
   
อยากลองใส่พื้นหลังเป็นภาพก็ยังได้ และก็กำหนดให้ระยะห่างของตัวอักษรกับกรอบห่างกันได้มาก ด้วยการใส่ cellspacing ครับครับ

   

   
   
เห็นมั้ยครับขอบสีสวยเชียว
border="2" bgcolor="lightgreen" cellspacing="0">
   
อันนี้แบบมีขอบของ border ด้วย
cellspacing="50">
   
   
ถ้า cellspacing มากขึ้นครับ ช่องจะใหญ่ขึ้นครับ
bgcolor="black" cellspacing="0">
   
   
ถ้าพื้นสีเข้ม อย่าลืมให้อักษรสีอ่อนครับ



เป็นไงครับ งงได้ที่ตาม 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 ของเรานั้นเปลี่ยนไปพร้อม ๆ กัน คำสั่งนี้จะได้ผลกับตารางทุกชนิดที่เราได้สร้างขึ้นภายหลังด้วยครับ ทำให้ไม่มีขอบ ไม่สามารถใส่สีพื้นได้ ไปด้วยครับ

พอเข้าใจไหมครับเนี่ย....

ไปนอนดีกว่าครับ แยกย้าย แยกย้าย...


[สมุดเยี่ยม]






Create Date : 12 กรกฎาคม 2548
Last Update : 2 ธันวาคม 2549 23:54:31 น. 6 comments
Counter : 858 Pageviews.

 
ได้ประโยชน์ดีมากครับ

ปล.อ่านตอนแรกตกใจนึกว่าเข้าซังเต ไปซะแร้น


โดย: หมาร่าหมาหรอด วันที่: 12 กรกฎาคม 2548 เวลา:1:22:25 น.  

 




ค๊าบผมมมมมม



โดย: แม่สาย วันที่: 12 กรกฎาคม 2548 เวลา:1:51:09 น.  

 




ขอลองของบ้าง อิๆๆๆ



โดย: นุทศรี!! วันที่: 12 กรกฎาคม 2548 เวลา:7:48:12 น.  

 
น่ารักจังเลย ขยันเอาของมาฝากบ่อยๆ

แต่ช่วงนี้ยังไม่แต่ง blog เพิ่มล่ะค่ะ

อยากแต่งเมื่อไหร่ จะแอบกลับมาจิ๊กไปใช้นะคะ


โดย: สาวไกด์ใจซื่อ วันที่: 12 กรกฎาคม 2548 เวลา:10:49:23 น.  

 
เอาไว้ไปใช้ปรับแต่งใน dreamweaver ครับ ขอบคุณครับ


โดย: noom_no1 วันที่: 13 กรกฎาคม 2548 เวลา:2:51:03 น.  

 
งงชิหายเลย
โดยเฉพาะตอนท้ายสุด จาสอบอีก2วันแล้ว แงงงงง


โดย: fowl IP: 202.28.9.80 วันที่: 26 กรกฎาคม 2549 เวลา:1:10:04 น.  

ชื่อ : * blog นี้ comment ได้เฉพาะสมาชิก
Comment :
  *ส่วน comment ไม่สามารถใช้ javascript และ style sheet
 

dont wanna no
Location :


[ดู Profile ทั้งหมด]

ให้ทิปเจ้าของ Blog [?]
ฝากข้อความหลังไมค์
Rss Feed

ผู้ติดตามบล็อก : 2 คน [?]








Google all webbloggang



คำเตือน

ขอสงวนสิทธิ์ข้อความและภาพ ตลอดจนชื่อคำขวัญ (slogan) และข้อความ "เที่ยวไปงงไป" ที่ปรากฏทั้งหมดในสื่อคอมพิวเตอร์แห่งนี้ ตามพระราชบัญญัติลิขสิทธิ์ปี พ.ศ. ๒๕๓๙ ห้ามมิให้นำไปดัดแปลง ต่อเติม ทำซ้ำ หรือเผยแพร่และอ้างอิงส่วนหนึ่งส่วนใด หรือทั้งหมดเพื่อการค้าโดยไม่ได้รับอนุญาตเป็นลายลักษณ์อักษร ผู้ละเมิดจะถูกดำเนินคดีตามที่กฏหมายบัญญัติไว้สูงสุด



สิทธิพิเศษสำหรับสมาชิกพันทิป ท่านสามารถนำข้อมูลไปใช้ในการตกแต่ง blog ของท่านได้ด้วยความยินดีมากครับ ตกแต่งเสร็จแล้วมาตามไปดูบ้าง จะยินดีมากขึ้นไปอีก

Friends' blogs
[Add dont wanna no's blog to your web]
Links
 

 Pantip.com | PantipMarket.com | Pantown.com | © 2004 BlogGang.com allrights reserved.