Bloggang.com : dont wanna no : Blog tips เก็บ ๆ เค้ามา #14 ติดตารางอีกแล้ว

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">ชิดซ้าย หรือ left	valign="top">ชิดบน หรือ top
align="center"height="50">กลาง cell แบบ center	valign="middle">กลาง cell แบบ middle
align="right"height="50">ชิดขวา หรือ right	valign="bottom">ชิดล่าง หรือ bottom
ชิดล่างแบบ bottom	joy jogging
ชิดล่างแบบ baseline	joy jogging&t;/font>

ผลที่ได้ :

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

จากตารางข้างบนให้สังเกตว่า ถ้าไม่กำหนดค่าอะไรเลย หรือค่า 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 : 1375 Pageviews.