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 ครับ
ตัวอย่าง :
ลักษณะของ 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 |
valign="bottom"> ชิดล่างแบบ bottom | joy jogging |
valign="baseline"> ชิดล่างแบบ 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 |
|
6 comments |
Last Update : 2 ธันวาคม 2549 23:54:31 น. |
Counter : 1376 Pageviews. |
|
|
|
|
| |
โดย: แม่สาย 12 กรกฎาคม 2548 1:51:09 น. |
|
|
|
| |
โดย: นุทศรี!! 12 กรกฎาคม 2548 7:48:12 น. |
|
|
|
| |
โดย: noom_no1 13 กรกฎาคม 2548 2:51:03 น. |
|
|
|
| |
โดย: fowl IP: 202.28.9.80 26 กรกฎาคม 2549 1:10:04 น. |
|
|
|
|
|
|
|
ปล.อ่านตอนแรกตกใจนึกว่าเข้าซังเต ไปซะแร้น