Group Blog
 
<<
กรกฏาคม 2548
 
 12
3456789
10111213141516
17181920212223
24252627282930
31 
 
16 กรกฏาคม 2548
 
All Blogs
 
นั้นจะใส่เท่ากับจำนวนแถวแนวตั้งครับ หากว่าเราต้องการเส้นเฉพาะแนวตั้งในหลายแถวต่อกัน ก็สามารถใช้คำสั่ง colspan ได้ โดยใส่คำสั่งไว้ต่อกันตามลำดับนะครับ รูปแบบคำสั่งจะเป็น จำนวนแถวที่เราต้องการให้มีเฉพาะเส้นแนวตั้ง>
*สังเกตว่า ถ้าหากว่าไม่มีเครื่องหมายผิดปกติไป ก็อาจละ quotation หรือเครื่องหมาย "..." ไปได้ และเว้นวรรคระหว่างคำสั่งแทนครับ แต่จริง ๆ ใส่ลงไปจะดีกว่าครับ

ตัวอย่าง :

หรือ หรือ หรือ ... หลาย ๆ ครั้งแทนนะครับ โดยไม่ใส่ นะครับ

ตัวอย่าง :



ครับโดยใส่ไว้หลัง tag
Blog tips เก็บ ๆ เค้ามา #15 ยังติดตารางต่อ!!!





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


ติดตารางคราวนี้ มาว่าด้วยเรื่องของการสร้างตารางด้วยการใช้คำสั่งพิเศษกันครับ


หัวตาราง รูปแบบพิเศษและเส้นขอบ




เล่ามาตั้งนาน ลืมไปเลยว่าต้องเล่าเรื่องเกี่ยวกับการทำชื่อหัวตารางด้วย...

caption



เวลาเราสร้างตารางก็คงต้องมีหัวตารางด้วย ใช่มั้ยครับ สำหรับ tag คำสั่งที่ใช้ในที่นี้คือ
ชื่อของตาราง
แล้วครับ

ตัวอย่าง :








หน้ายิ้ม
(' '. ) (' ' ,) (^ ^) c' , )
(' ^ ') (- -, ) (-''- ) (> o< )


ผลที่ได้ :

หน้ายิ้ม
(' '. ) (' ' ,) (^ ^) c' , )
(' ^ ') (- -, ) (-''- ) (> o< )


เราจัดชื่อตารางได้หลายแบบครับ ได้แก่ top, bottom, left และ right โดยค่า default นั้นจะเป็น top ครับ โดยก็ใส่ค่าที่ต้องการแทนไป
ตำแหน่งที่ต้องการวางหัวข้อ>ชื่อตารางที่ต้องการ




หน้ายิ้มชิดซ้าย
(' '. ) (' ' ,) (^ ^) c' , )
หน้ายิ้มชิดขวา
(' ^ ') (- -, ) (-''- ) (> o< )



กรณีที่ต้องการให้ชื่อตารางอยู่ด้านล่าง แต่ว่าให้เยื้องไปซ้ายหรือขวา จำเป็นต้องใช้ style เข้าช่วยครับ

หน้ายิ้มด้านล่าง
('- ' ) (-_- ) (- - !) (>-< )
หน้ายิ้มด้านล่างชิดขวา
('- ' ) (-_- ) (- - !) (>-< )
style="text-align:right">
หน้ายิ้มด้านล่างชิดซ้าย
('- ' ) (-_- ) (- - !) (>-< )
style="text-align:left">


ไม่ยากครับ ไม่ยาก

Thead, Tbody, และ Tfoot



thead มาจาก table head โดยการใช้คำสั่งนี้จะทำให้แถวของ tag คำสั่ง
ที่มี thead นำหน้ากลายเป็นแถวที่แสดงหัวข้อของตารางครับ

tbody มาจาก table body ก็ตามชื่อครับ ไว้สำหรับนำหน้า tag
ที่ต้องการใช้เป็นตัวตารางครับ

tfoot มาจาก table foot ใช้นำหน้า tag
ที่เราต้องการให้เป็นบรรทัดสุดท้ายของตารางครับ

คำสั่งนี้ ทำให้สะดวกขึ้นเวลาเราใช้คำสั่งสร้างตารางเท่านั้นครับ จะได้รู้ว่า หัวตาราง ท้ายตารางอยู่ที่ไหน แต่ผลของตารางก็เหมือนกับการใช้เพียงคำสั่ง
ทั่วไป ประโยชน์อีกข้อหนึ่งคือการใช้ร่วมกับคำสั่งอื่น ๆ เช่น frame, rule เพราะจะทำให้เราสามารถเลือกใช้ tag คำสั่งที่มีผลต่อตารางเฉพาะในส่วนนั้น ๆ ได้ง่ายขึ้น เราไม่จำเป็นต้องมีคำสั่งนี้จนครบทั้ง 3 ตัวในแต่ละตารางก็ได้ครับ เช่น อาจจะไม่มี tfoot ก็ได้ หรืออาจจะใส่ tbody เข้าไปหลาย ๆ รอบก็ไม่ผิดกติกาครับ

ตัวอย่าง :


















ชนิด แบบหน้าที่มีให้เลือก
อารมณ์ดี (' ~ ') (' ' ,) (^ ^)
'รมณ์เสีย (' ' _) (-_-) (' _ ')
อึ้ง+โกรธ (' ' _ !) (-''- ) (- -'')
ตกใจ ('o') (-o +) (=~+)
สรุปควรยิ้ม


ผลที่ได้ :

ชนิด แบบหน้าที่มีให้เลือก
อารมณ์ดี (' ~ ') (' ' ,) (^ ^)
'รมณ์เสีย (' ' _) (-_-) (' _ ')
อึ้ง+โกรธ (' ' _ !) (-''- ) (- -'')
ตกใจ ('o') (-o +) (=~+)
สรุป ควรยิ้ม


คราวนี้ผมจะลองทำให้มี



























ชนิด แบบหน้าที่มีให้เลือก
อารมณ์ดี (' ~ ') (' ' ,) (^ ^)
'รมณ์เสีย (' ' _) (-_-) (' _ ')
อึ้ง+โกรธ (' ' _ !) (-''- ) (- -'')
ตกใจ ('o') (-o +) (=~+)
อารมณ์ดี (' ~ ') (' ' ,) (^ ^)
'รมณ์เสีย (' ' _) (-_-) (' _ ')
อึ้ง+โกรธ (' ' _ !) (-''- ) (- -'')
ตกใจ ('o') (-o +) (=~+)
อารมณ์ดี (' ~ ') (' ' ,) (^ ^)
'รมณ์เสีย (' ' _) (-_-) (' _ ')
อึ้ง+โกรธ (' ' _ !) (-''- ) (- -'')
ตกใจ ('o') (-o +) (=~+)


ผลที่ได้ :

ชนิด แบบหน้าที่มีให้เลือก
อารมณ์ดี (' ~ ') (' ' ,) (^ ^)
'รมณ์เสีย (' ' _) (-_-) (' _ ')
อึ้ง+โกรธ (' ' _ !) (-''- ) (- -'')
ตกใจ ('o') (-o +) (=~+)
อารมณ์ดี (' ~ ') (' ' ,) (^ ^)
'รมณ์เสีย (' ' _) (-_-) (' _ ')
อึ้ง+โกรธ (' ' _ !) (-''- ) (- -'')
ตกใจ ('o') (-o +) (=~+)
อารมณ์ดี (' ~ ') (' ' ,) (^ ^)
'รมณ์เสีย (' ' _) (-_-) (' _ ')
อึ้ง+โกรธ (' ' _ !) (-''- ) (- -'')
ตกใจ ('o') (-o +) (=~+)


ผลที่ได้ก็คือ เราจัดรูปแบบง่ายขึ้นครับ

frame หมายถึงเส้นที่ขอบนอกสุดของตาราง หรือกรอบตารางนั่นเองครับ เราใส่เข้าไปหลัง tag คำสั่ง table ได้เลย จะได้อยู่ในรูป frame="รูปแบบที่เราต้องการ"> ซึ่งสามารถเลือกตัวเลือกได้หลายแบบครับ เช่น
(' ' , ) (' ' , )
(' ' , ) (' ' , )

box คือมีขอบตารางปกติ อันนี้เป็น default คือ ไม่ระบุก็ได้แบบนี้




(' ' , ) (' ' , )
(' ' , ) (' ' , )

void คือไม่มีขอบตารางเลยครับ




(' ' , ) (' ' , )
(' ' , ) (' ' , )

lhs หรือ Left hand side หรือมีเฉพาะด้านซ้าย




(' ' , ) (' ' , )
(' ' , ) (' ' , )

rhs หรือ right hand side หรือมีเฉพาะด้านขวา




(' ' , ) (' ' , )
(' ' , ) (' ' , )

vsides หรือ verticalsides คือมีเฉพาะขอบแนวตั้งครับ




(' ' , ) (' ' , )
(' ' , ) (' ' , )

above ก็จะมีเฉพาะขอบแนวนอนด้านบน




(' ' , ) (' ' , )
(' ' , ) (' ' , )

below คือมีเฉพาะขอบแนวนอนด้านล่าง



(' ' , ) (' ' , )
(' ' , ) (' ' , )

hsides หรือ Horizontal sides ก็จะมีเฉพาะขอบแนวนอนเท่านั้นครับ



สังเกตว่ายังมีผลของ bordercolorlight และ bordercolordark อยู่เลยครับ ด้านบนและด้านซ้ายสีจะอ่อนกว่าด้านขวาและด้านล่างครับ

rules หรือเส้นภายในตารางครับ ก็ อาจจะกำหนดให้มี หรือไม่มีเส้นคล้าย ๆ คำสั่ง frame นั่นล่ะครับ โดยอาศัยคำสั่งหลัง tag table เช่นกัน ลักษณะคำสั่งก็จะเป็นแบบนี้ครับ rules="ค่าที่เราต้องการ"> ซึ่งมีตัวเลือกให้เลือกดังนี้

(' ' , ) (' ' , )
(' ' , ) (' ' , )

all ก็จะมีเส้นตารางครบถ้วน ล้อมรอบทุก ๆ cell ในตาราง แบบนี้เป็น default ครับ



(' ' , ) (' ' , )
(' ' , ) (' ' , )

none แบบนี้ไม่มีเส้นตารางเลย ไม่เห็นมีเส้นรอบ ๆ แต่ละ cell ของใช่ไหมครับ มีแต่กรอบ



(' ' , ) (' ' , )
(' ' , ) (' ' , )

cols หรือ columns ก็จะมีเส้นเฉพาะแนวตั้ง เห็นเป็นกรอบล้อมแถวในแนวตั้ง



(' ' , ) (' ' , )
(' ' , ) (' ' , )

rows ก็จะไม่มีเส้นแนวตั้ง เห็นเป็นกรอบรอบแถวแนวนอน



สำหรับแบบสุดท้ายคือ groups จะยากขึ้นนิดหน่อยครับ คือ ถ้าเป็นตามแถวแนวนอนหรือ rows นั้น เราจะใช้ร่วมกับคำสั่ง , , ครับ

ตัวอย่าง :



















ชื่อ สัญชาติ ...
อั้ม ไทย 35 x 23 x 34
Ayum ญี่ปุ่น 38 x 24 x 36
Scarlett Johansson USA 35 x 25 x 38
Jessica Alba USA 36 x 24 x 35 >
Winner not tell you


ผลที่ได้ :

ชื่อ สัญชาติ ...
อั้ม ไทย 35 x 23 x 34
Ayumi ญี่ปุ่น 38 x 24 x 36
Scarlett Johansson USA 35 x 25 x 38
Jessica Alba USA 36 x 24 x 35
Winner not tell you


ส่วนการจัด groups ตามแถวแนวตั้งหรือ coloums อันนี้จะง่ายกว่า โดยเราจะจัดวาง tag คำสั่งไว้ด้านบนของคำสั่งตารางได้เลยครับ โดยมีคำสั่ง


← สังเกตว่ากำหนดให้มีเส้นเฉพาะแนวตั้งแถวเดียว
← ส่วนบรรทัดนี้ 3 แถว จากทั้งหมดมี 4 แถวครับ







วัน วันนัดชื่อ...
จันทร์ 18/07 อั้ม 35 x 23 x 34
อังคาร 19/07 Ayumi 38 x 24 x 36
พฤหัส 21/07 Scarlett 35 x 25 x 38
เสาร์ 22/07 Jessica 36 x 24 x 35


ผลที่ได้ :

วันวันนัดชื่อ...
จันทร์18/07อั้ม35 x 23 x 34
อังคาร19/07Ayumi38 x 24 x 36
พฤหัส21/07Scarlett35 x 25 x 38
เสาร์22/07Jessica36 x 24 x 35


นี่ล่ะครับ วิธีเขียนตาราง

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


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






Create Date : 16 กรกฎาคม 2548
Last Update : 2 ธันวาคม 2549 23:53:49 น. 6 comments
Counter : 569 Pageviews.

 
ฮือ ฮือ อ่านไป งง ไปอ่ะค่ะ ทำไมสำหรับเรามันถึงได้ยากมากๆ เลยอ่ะค่ะ


โดย: JewNid วันที่: 16 กรกฎาคม 2548 เวลา:23:48:33 น.  

 
ตามมาดู แอบบงง ด้วยคนค๊า


โดย: yadegari วันที่: 16 กรกฎาคม 2548 เวลา:23:57:43 น.  

 
จะลองทำนะคะ คงไม่เกินฟามสามารถ ถึงจะเลยวัยสมองแล่นไปหน่อย


โดย: ป้ามด วันที่: 18 กรกฎาคม 2548 เวลา:17:37:43 น.  

 
ก็งงดีนะ


โดย: nancy IP: 203.151.140.117 วันที่: 3 มิถุนายน 2549 เวลา:0:24:47 น.  

 
งง จริงๆด้วย T_T


โดย: Omomama วันที่: 26 มีนาคม 2550 เวลา:23:04:56 น.  

 
งง มากกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกกก

พยายามตั้งใจอ่านที่ละตัว ทีละประโยค ก้อยังโคตะระ งงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงง

มีวีธีการที่เข้าใจง่ายกว่าเน้ไม๊ค่ะ ???????????



โดย: ปลาทองป๊องป่อง วันที่: 9 ธันวาคม 2550 เวลา:20:11:50 น.  

ชื่อ : * 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.