|
Blog tips เก็บ ๆ เค้ามา #15 ยังติดตารางต่อ!!!
ติดตารางครั้งที่ 3!!!
ติดตารางคราวนี้ มาว่าด้วยเรื่องของการสร้างตารางด้วยการใช้คำสั่งพิเศษกันครับ
หัวตาราง รูปแบบพิเศษและเส้นขอบ
เล่ามาตั้งนาน ลืมไปเลยว่าต้องเล่าเรื่องเกี่ยวกับการทำชื่อหัวตารางด้วย...
caption
เวลาเราสร้างตารางก็คงต้องมีหัวตารางด้วย ใช่มั้ยครับ สำหรับ tag คำสั่งที่ใช้ในที่นี้คือ ชื่อของตาราง ครับโดยใส่ไว้หลัง 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 คำสั่งไว้ด้านบนของคำสั่งตารางได้เลยครับ โดยมีคำสั่ง นั้นจะใส่เท่ากับจำนวนแถวแนวตั้งครับ หากว่าเราต้องการเส้นเฉพาะแนวตั้งในหลายแถวต่อกัน ก็สามารถใช้คำสั่ง colspan ได้ โดยใส่คำสั่งไว้ต่อกันตามลำดับนะครับ รูปแบบคำสั่งจะเป็น จำนวนแถวที่เราต้องการให้มีเฉพาะเส้นแนวตั้ง>
*สังเกตว่า ถ้าหากว่าไม่มีเครื่องหมายผิดปกติไป ก็อาจละ quotation หรือเครื่องหมาย "..." ไปได้ และเว้นวรรคระหว่างคำสั่งแทนครับ แต่จริง ๆ ใส่ลงไปจะดีกว่าครับ
ตัวอย่าง :
← สังเกตว่ากำหนดให้มีเส้นเฉพาะแนวตั้งแถวเดียว
← ส่วนบรรทัดนี้ 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/07 | Ayumi | 38 x 24 x 36 | พฤหัส | 21/07 | Scarlett | 35 x 25 x 38 | เสาร์ | 22/07 | Jessica | 36 x 24 x 35 |
นี่ล่ะครับ วิธีเขียนตาราง
เวลาที่เราทำสร้างหน้า webpage หรือสร้าง blog ก็ใช้วิธีเดียวกันนี้ล่ะครับ ดูยุ่งยากหน่อย ถ้าหากมีโปรแกรมช่วยเหลืออย่าง Dreamweaver™ ก็ช่วยได้มาก เพราะแม้ว่าจะไม่ได้เขียน code เองก็ยังพอทราบว่าต้องแก้ไขตรงไหนน่ะครับ
[สมุดเยี่ยม]
| Create Date : 16 กรกฎาคม 2548 |
|
6 comments |
| Last Update : 2 ธันวาคม 2549 23:53:49 น. |
| Counter : 1107 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 น. |
|
|
|
| | |
| โดย: Omomama 26 มีนาคม 2550 23:04:56 น. |
|
|
|
|
|
|
|
ฝากข้อความหลังไมค์
Rss Feed
ผู้ติดตามบล็อก : 2 คน [