Home Webboard ArticlesKnowledges  

ผู้เขียน หัวข้อ: การใช้ตารางในการตั้ง/ตอบกระทู้ (LittleCat)  (อ่าน 16824 ครั้ง)

0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้

ออฟไลน์ เซียวเหล่งนึ่งฯ

  • Global Moderator
  • *
  • กระทู้: 5547
  • เห็นด้วย&ขอบคุณ: 2148
    • SMFjusthost.com
หัวข้อนี้ ท่านลิตเติลแคททำแนะนำไว้ที่เว็บบอร์ดอื่น
เห็นว่าน่าจะมีประโยชน์อย่างยิ่งกับคนที่ใช้บีบีโค๊ดอย่างพวกเรา
จึงขออนุญาตก็อบมาลงไว้ที่นี่  จะได้ลองปวดหัวกับตารางกันดูมั่ง   555555555555555+++
(เราเองไม่เคยพิศมัยมันเลยจริงๆ เอิ๊กๆ)







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

มาลองทำดูกัน
เริ่มด้วย ข้อความที่ท่านต้องการจะใส่ตาราง



ท่านสามารถครอบข้อความทั้งหมดที่ท่านต้องการจะใส่ไว้ในตาราง แล้วกดที่ ใส่ตาราง
ก็จะได้โค้ดนี้มา

โค๊ด: [Select]
[table][/table]



จากนั้นให้ครอบข้อความทั้งหมด ที่ต้องการจะวางไว้ในบรรทัดเดียวกัน แล้วกดที่ ใส่แถวของตาราง


ก็จะมีโค้ดเพิ่มขึ้นมา

โค๊ด: [Select]
[tr][/tr]



จากนั้นก็ให้ครอบแต่ละข้อความ ที่ต้องการจะแยกคอลั่ม แล้วไปกดที่ ใส่คอลัมน์ตาราง


ก็จะได้โค้ด

โค๊ด: [Select]
[td][/td]


ทำอย่างนี้ไปเรื่อยๆ ในการแยกคอลัมน์ แยกแถวของตาราง



แล้วลองกดที่ แสดงตัวอย่าง ก็สามารถตรวจสอบผลงานการใส่โค้ดของตัวเอง




จากนั้นก็กดตั้งกระทู้ได้เลย



ขอให้สนุกกับการใช้โค้ด
« แก้ไขครั้งสุดท้าย: 03, ธันวาคม 2008, 12:04:14 AM โดย เซียวเหล่งนึ่ง แห่งสำนักสุสานโบราณ »



ออฟไลน์ เซียวเหล่งนึ่งฯ

  • Global Moderator
  • *
  • กระทู้: 5547
  • เห็นด้วย&ขอบคุณ: 2148
    • SMFjusthost.com
Re: การใช้ตารางในการตั้ง/ตอบกระทู้ (LittleCat)
« ตอบกลับ #1 เมื่อ: 02, ธันวาคม 2008, 11:58:38 PM »

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

โค๊ด: [Select]
[table][tr][td]คอลัมน์ที่หนึ่ง[/td][td]คอลัมน์ที่สอง[/td][td]คอลัมน์ที่สาม[/td][/tr]
[tr][td]คอลัมน์ที่หนึ่ง[/td][td]คอลัมน์ที่สอง[/td][td]คอลัมน์ที่สาม[/td][/tr][/table]

เช่นนี้
[ table][ tr][ td]คอลัมน์ที่หนึ่ง[ /td][ td]คอลัมน์ที่สอง[ /td][ td]คอลัมน์ที่สาม[ /td][ /tr]      <----- แถวที่ 1
[ tr][ td]คอลัมน์ที่หนึ่ง[ /td][ td]คอลัมน์ที่สอง[ /td][ td]คอลัมน์ที่สาม[ /td][ /tr][/table]       <----- แถวที่ 2


เช่นนี้

คอลัมน์ที่หนึ่งคอลัมน์ที่สองคอลัมน์ที่สาม
คอลัมน์ที่หนึ่งคอลัมน์ที่สองคอลัมน์ที่สาม


ในกรณีที่ท่านรู้สึกว่า ข้อความระหว่างคอลัมน์มันดูเบียดเสียดกันเหลือเกิน


ก็สามารถแยกให้ห่างออกจากกันได้ด้วยการ "เคาะสเปสบาร์"


ถ้าหากมีหลายบรรทัด (หลายแถว) ท่านสามารถเลือกที่จะ เคาะสเปสบาร์ แค่บรรทัดใดบรรทัดหนึ่ง ต่อจากนั้น แถวอื่นๆ ก็จะแยกห่างจากกันตามลับดับ เนื่องจากมันถูกกรอบเอาไว้ด้วยตารางอยู่แล้ว
แล้วก็จะได้ผลเช่นนี้

โค๊ด: [Select]
[table][tr][td]คอลัมน์ที่หนึ่ง          [/td][td]คอลัมน์ที่สอง          [/td][td]คอลัมน์ที่สาม[/td][/tr]
[tr][td]คอลัมน์ที่หนึ่ง[/td][td]คอลัมน์ที่สอง[/td][td]คอลัมน์ที่สาม[/td][/tr][/table]
คอลัมน์ที่หนึ่ง          คอลัมน์ที่สอง          คอลัมน์ที่สาม
คอลัมน์ที่หนึ่งคอลัมน์ที่สองคอลัมน์ที่สาม

ออฟไลน์ เซียวเหล่งนึ่งฯ

  • Global Moderator
  • *
  • กระทู้: 5547
  • เห็นด้วย&ขอบคุณ: 2148
    • SMFjusthost.com
Re: การใช้ตารางในการตั้ง/ตอบกระทู้ (LittleCat)
« ตอบกลับ #2 เมื่อ: 03, ธันวาคม 2008, 12:00:31 AM »

ทีนี้ มาว่ากันด้วย "เคล็ดลับ ที่ไม่ลับ" ของการใช้ตาราง
เรามาลองใช้ MicroSoft Excel ให้เป็นประโยชน์กัน

เริ่มด้วยการ เปิดเอกสารเอ็กเซล แล้วทำการกรอกข้อมูล แล้วก็ทำการก๊อปโค้ดตาราง ด้วยการครอบเซลแล้วลากลง


เสร็จสิ้น ก็ทำการปิดตาราง


จากนั้นก็ให้ครอบข้อความทั้งหมดที่กรอกลงไป แล้วก๊อปปี้


แล้วนำมาวางลงในกระทู้


โค๊ด: [Select]
[table]
[tr][td] หนึ่ง [/td][td] สอง [/td][td] สาม [/td][td] สี่ [/td][td] ห้า [/td][/tr]
[tr][td] หก [/td][td] เจ็ด [/td][td] แปด [/td][td] เก้า [/td][td] สิบ [/td][/tr]
[tr][td] สิบเอ็ด [/td][td] สิบสอง [/td][td] สิบสาม [/td][td] สิบสี่ [/td][td] สิบห้า [/td][/tr]
[tr][td] สิบหก [/td][td] สิบเจ็ด [/td][td] สิบแปด [/td][td] สิบเก้า [/td][td] ยี่สิบ [/td][/tr]
[/table]
   

จากนั้นก็ลองกด แสดงตัวอย่าง ท่านก็จะเห็นผลงานของตัวเองเช่นนี้

   หนึ่ง      สอง      สาม      สี่      ห้า   
   หก      เจ็ด      แปด      เก้า      สิบ   
   สิบเอ็ด      สิบสอง      สิบสาม      สิบสี่      สิบห้า   
   สิบหก      สิบเจ็ด      สิบแปด      สิบเก้า      ยี่สิบ   
   

เป็นอันเสร็จสิ้น !!
แต่ในกรณีของการใช้เอ็กเซลเป็นตัวช่วยนั้น เหมาะกับการที่เรากรอกข้อมูลด้วยตัวเอง หรือการก๊อปข้อความจากตารางในงานเอกสารอื่นๆ
แต่จะใช้ไม่ได้กับเอกสารที่เป็กไฟล์ตัวหนังสือยาวๆ แบบหนังสือ อันนี้ต้องมาทำมือในกระทู้

มามะ ! มาลองใช้ตารางในกระทู้กัน
 


ออฟไลน์ เซียวเหล่งนึ่งฯ

  • Global Moderator
  • *
  • กระทู้: 5547
  • เห็นด้วย&ขอบคุณ: 2148
    • SMFjusthost.com
Re: การใช้ตารางในการตั้ง/ตอบกระทู้ (LittleCat)
« ตอบกลับ #3 เมื่อ: 03, ธันวาคม 2008, 12:01:39 AM »

เมื่อรู้หลักในการใช้ตาราง และโค้ด [ tr] และ [ td] กันแล้ว เรามาลองปรับแต่งข้อความด้วยตารางกัน




หรือพลิกแพลงแบบอื่นๆ










เป็นต้น


ลองมายกตัวอย่างด้วยรูป เพื่อที่จะได้เห็นผลงานที่ชัดเจนขึ้น



โค๊ด: [Select]
[table]
[td][tr][img]http://i56.photobucket.com/albums/g185/catzcatch/Catz/001.jpg[/img][/tr]
[tr][img]http://i56.photobucket.com/albums/g185/catzcatch/Catz/003.jpg[/img][/tr][/td]
[td][img]http://i56.photobucket.com/albums/g185/catzcatch/Catz/002.jpg[/img][/td]
[/table]


โค๊ด: [Select]
[table]
[td][img]http://i56.photobucket.com/albums/g185/catzcatch/Catz/008.jpg[/img][/td]
[td][tr][img]http://i56.photobucket.com/albums/g185/catzcatch/Catz/006.jpg[/img][/tr]
[tr][img]http://i56.photobucket.com/albums/g185/catzcatch/Catz/007.jpg[/img][/tr][/td]
[/table]


โค๊ด: [Select]
[table]
[td][img]http://i56.photobucket.com/albums/g185/catzcatch/Catz/004.jpg[/img][/td]
[td][tr][img]http://i56.photobucket.com/albums/g185/catzcatch/Catz/010.jpg[/img][/tr]
[tr]     [img]http://i56.photobucket.com/albums/g185/catzcatch/Catz/010.jpg[/img][/tr]
[tr]          [img]http://i56.photobucket.com/albums/g185/catzcatch/Catz/010.jpg[/img][/tr][/td]
[/table]
     
         




ข้อสำคัญในการใช้ตาราง :
พึงจดจำไว้ว่า เริ่มต้นด้วยเปิดโค้ดอะไร ก็ต้องจบด้วยปิดโค้ดนั้น ตามลำดับไป

เช่นนี้
[1][2][3][4].....[/4][/3][/2][/1]


kaikimao

  • บุคคลทั่วไป
Re: การใช้ตารางในการตั้ง/ตอบกระทู้ (LittleCat)
« ตอบกลับ #4 เมื่อ: 03, ธันวาคม 2008, 08:49:45 AM »
เยี่ยมครับ ท่านเหมียวเล็ก+ท่านเซียวฯ อธิบายได้อย่างเห็นภาพชัดเจนครับ (แน่ล่ะซิ ก็ทำภาพมาใส่นี่  :haha: )

เรื่องง่ายๆ พื้นฐานๆ แบบนี้ล่ะครับ ที่ผมมักจะอธิบายกับใครต่อใครเค้าแล้วทำให้เค้าไม่รู้เรื่องมากกว่าเดิม  :grin:
« แก้ไขครั้งสุดท้าย: 05, ธันวาคม 2008, 09:31:22 PM โดย ไก่ขี้เมา »

ออฟไลน์ เซียวเหล่งนึ่งฯ

  • Global Moderator
  • *
  • กระทู้: 5547
  • เห็นด้วย&ขอบคุณ: 2148
    • SMFjusthost.com
Re: การใช้ตารางในการตั้ง/ตอบกระทู้ (LittleCat)
« ตอบกลับ #5 เมื่อ: 03, ธันวาคม 2008, 09:03:36 PM »
เซียวฯ..มิได้ทำเค่อะ   เหมียวเล็กทำหนะ อิอิ

ออฟไลน์ paker

  • Ju
  • *
  • กระทู้: 5
  • เห็นด้วย&ขอบคุณ: 5
Re: การใช้ตารางในการตั้ง/ตอบกระทู้ (LittleCat)
« ตอบกลับ #6 เมื่อ: 05, ธันวาคม 2008, 06:10:29 AM »
แหล่มเลยครับ  :yaahoo:

helpme

  • บุคคลทั่วไป
Re: การใช้ตารางในการตั้ง/ตอบกระทู้ (LittleCat)
« ตอบกลับ #7 เมื่อ: 05, ธันวาคม 2008, 09:22:39 PM »
แจ่มไปเลยครับ  บรรยายได้เห็นภาพเลยครับ :grin:

ส่วนผม เวลาทำแบบนี้จะ ใช้ Macromedia Dreamweaver ทำแล้วก๊อปปี้ โค๊ตมาใส่เอาครับ เพระผมไม่เก่งและแม่นด้าน โค๊ตเลยครับ

 :embarrassed:

ออฟไลน์ Tcomputer

  • Just Staff
  • *
  • กระทู้: 600
  • เห็นด้วย&ขอบคุณ: 498
Re: การใช้ตารางในการตั้ง/ตอบกระทู้ (LittleCat)
« ตอบกลับ #8 เมื่อ: 31, สิงหาคม 2013, 06:50:24 PM »
ขอสอบถามนิดครับ ถ้าผมจะเพิ่มขนาดตัวอักษร หรือฟอนต์ ตัวอักษร ใส่อย่างไรครับผม

คนล้านนาแก่สาวชาวเมืองเหนือ                 มีความเชื่อถือสิ้นทุกถิ่นถาน
กตัญญูรู้คุณทำบุญทานถึงสงกรานต์ชุมนุมญาติรุมล้อม
« แก้ไขครั้งสุดท้าย: 31, สิงหาคม 2013, 06:51:56 PM โดย Tcomputer »

ออฟไลน์ เซียวเหล่งนึ่งฯ

  • Global Moderator
  • *
  • กระทู้: 5547
  • เห็นด้วย&ขอบคุณ: 2148
    • SMFjusthost.com
Re: การใช้ตารางในการตั้ง/ตอบกระทู้ (LittleCat)
« ตอบกลับ #9 เมื่อ: 02, กันยายน 2013, 02:02:49 PM »
โค๊ด: [Select]
[table][tr][td]
[table][tr][td][size=18pt]คนล้านนาแก่สาวชาวเมืองเหนือ[/size]                 [/td]
[td][size=24pt]มีความเชื่อถือสิ้นทุกถิ่นถาน[/size][/td][/tr]
[tr][td][size=10pt]กตัญญูรู้คุณทำบุญทาน[/size][/td][td][size=14pt]ถึงสงกรานต์ชุมนุมญาติรุมล้อม[/size][/td][/tr][/table]
[/td][/tr][/table]

คนล้านนาแก่สาวชาวเมืองเหนือ                 มีความเชื่อถือสิ้นทุกถิ่นถาน
กตัญญูรู้คุณทำบุญทานถึงสงกรานต์ชุมนุมญาติรุมล้อม

ออฟไลน์ Tcomputer

  • Just Staff
  • *
  • กระทู้: 600
  • เห็นด้วย&ขอบคุณ: 498
Re: การใช้ตารางในการตั้ง/ตอบกระทู้ (LittleCat)
« ตอบกลับ #10 เมื่อ: 03, กันยายน 2013, 02:35:46 AM »
    ขอบคุณมากครับป้าตู่ ผมสอบถามเพิ่มอีกนิดครับผม คือ กรณีผมอยากไปกำหนดขนาดมาตรฐาน ให้มันใหญ่กว่าที่เป็นอยู่ จะได้ไม่ต้องมานั่งใส่ที่ละคอลัมถ้าเราจะไปกำหนดใน Css เราจะกำหนดตรงจุดไหนครับ พอดีเว็บที่ทำเป็นเว็บกลอนนะครับผม

ออฟไลน์ เซียวเหล่งนึ่งฯ

  • Global Moderator
  • *
  • กระทู้: 5547
  • เห็นด้วย&ขอบคุณ: 2148
    • SMFjusthost.com
Re: การใช้ตารางในการตั้ง/ตอบกระทู้ (LittleCat)
« ตอบกลับ #11 เมื่อ: 03, กันยายน 2013, 10:23:46 AM »
body {
font: 85%/130% "Tahoma", "Arial", "Helvetica", sans-serif;

85%/130% ลองเล่นๆแถวนี้ดู แต่จะมีผลกับหน้าเว็บด้วย ใหญ่ไปก็ไม่ดี

ออฟไลน์ Tcomputer

  • Just Staff
  • *
  • กระทู้: 600
  • เห็นด้วย&ขอบคุณ: 498
Re: การใช้ตารางในการตั้ง/ตอบกระทู้ (LittleCat)
« ตอบกลับ #12 เมื่อ: 03, กันยายน 2013, 08:09:15 PM »
body {
font: 85%/130% "Tahoma", "Arial", "Helvetica", sans-serif;

85%/130% ลองเล่นๆแถวนี้ดู แต่จะมีผลกับหน้าเว็บด้วย ใหญ่ไปก็ไม่ดี

ครับป้าตู่ผมลองแล้ว มันมีผลกับหน้าบอร์ดด้วย พอมีวิธีไม่ให้เกี่ยวข้องไหมครับ อยากปรับแค่ตรงส่วนใส่ตารางเท่านั้นนะครับผม


ออฟไลน์ เซียวเหล่งนึ่งฯ

  • Global Moderator
  • *
  • กระทู้: 5547
  • เห็นด้วย&ขอบคุณ: 2148
    • SMFjusthost.com
Re: การใช้ตารางในการตั้ง/ตอบกระทู้ (LittleCat)
« ตอบกลับ #13 เมื่อ: 03, กันยายน 2013, 09:51:59 PM »
งั้นก็
1. เติมบังคับขนาดฟอนท์เข้าไป
.inner {
font-size: 16pt;

2.ปรับระยะบรรทัด
.post, .personalmessage {
line-height: 2em;

ออฟไลน์ Tcomputer

  • Just Staff
  • *
  • กระทู้: 600
  • เห็นด้วย&ขอบคุณ: 498
Re: การใช้ตารางในการตั้ง/ตอบกระทู้ (LittleCat)
« ตอบกลับ #14 เมื่อ: 04, กันยายน 2013, 01:20:55 AM »
ขอบคุณครับป้าตู่ ผมทำได้แล้วครับ พอดีน้องมาช่วยดู เป็นการเพิ่ม class ให้กับ css ครับผม แล้วไปแก้ ไฟล์ sub.php เรียกใช้งาน

 

Sitemap 1 2 3 4 5 6 
Back to top