การใช้ <TABLE> (ภาค2)

Mew's profile┢┦aΡｐy ღ M e wPhotosBlogListsMore

Tools

Help

< Previous Next >

October 08

การใช้ <TABLE> (ภาค2)

ตั้งใจไว้ตั้งนานแล้วว่า...จะเขียนเรื่องตารางต่อจากภาคที่แล้ว
แต่มันก็ยาวว...จนเกรงใจคนอ่าน จะพยายามไม่ให้มันยาวมากแล้วกันนะ งิงิ...
ใครยังไม่อ่านภาคแรก ก็ไปดูได้ที่ รู้จักกับ HTML และวิธีการใช้ Table

คราวก่อน เราได้สร้างตาราง 3x3 ช่องกัน และเอามันไปใช้ในการทำกรอบข้อความไปแล้ว
วันนี้จะแนะนำให้รู้จักกับการ รวมช่องในตารางค่ะ ใครนึกภาพไม่ออกให้นึกถึงโปรแกรม Excel
ที่สามารถผสานเซลได้ (merge cell) ตารางของ html ก็ทำได้เหมือนกันค่ะ

โค้ดที่ใช้สำหรับรวมเซลมีอยู่ 2 อัน คือ
colspan=จำนวนช่องที่จะรวม ---> สำหรับรวมเซลในแนวนอน
rowspan=จำนวนช่องที่จะรวม ---> สำหรับรวมเซลในแนวตั้ง
ตำแหน่งที่ใช้ เหมือนกันคือ ในแท็กเปิดของ <TD> เช่น <TD colspan=2>

มาทดลองรวมเซลตารางกัน ในที่นี้จะใช้ตาราง 3แถว 2 ช่อง เพื่ออธิบาย

ใช้คำสั่ง colspan=2
Code

ใช้คำสั่ง rowspan=2
Code

<TABLE border=1>
<TR>
<TD rowSpan=2>รวมแถว 1 กับ 2
</TD>
<TD>ช่อง 2 แถว 1</TD></TR>
<TR>
<TD>ช่อง 2 แถว 2</TD></TR>
<TR>
<TD>ช่อง 1 แถว 3</TD>
<TD>ช่อง 2 แถว 3</TD></TR>
</TABLE>

ใช้คำสั่ง rowspan=2 และ colspan=2
พร้อมกัน
Code

<TABLE border=1>
<TR>
<TD colSpan=2 rowSpan=2>
รวมทั้ง ช่องและแถวพร้อมกัน</TD>
<TD>ช่อง 3 แถว 1</TD></TR>
<TR>
<TD>ช่อง 3 แถว 2</TD></TR>
<TR>
<TD>ช่อง 1 แถว 3</TD>
<TD>ช่อง 2 แถว 3</TD>
<TD>ช่อง 3 แถว 3</TD></TR>
</TABLE>

รวมช่อง 1 กับ 2
ช่อง 1 แถว 2	ช่อง 2 แถว 2
ช่อง 1 แถว 3	ช่อง 2 แถว 3

รวมแถว 1 กับ 2	ช่อง 2 แถว 1
รวมแถว 1 กับ 2	ช่อง 2 แถว 2
ช่อง 1 แถว 3	ช่อง 2 แถว 3

รวมทั้ง ช่องและแถวพร้อมกัน		ช่อง 3 แถว 1
รวมทั้ง ช่องและแถวพร้อมกัน		ช่อง 3 แถว 2
ช่อง 1 แถว 3	ช่อง 2 แถว 3	ช่อง 3 แถว 3

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

ต่อไปก็จะเป็นวิธีการประยุกต์ใช้ตาราง
โดยเราจะเอาวิธีการรวมตารางมาช่วยในการทำกระดาษเขียนจดหมาย ซึ่งก็ไม่ยากเลยนะ ^^"
วิธีทำจะอยู่ในบลอค การประยุกต์ใช้ Table (ภาค2) ค่ะ

...┢┦aΡｐy ❤ M e w...
I'm Me, No One Else! Just Remember That!

1:12 AM | Blog it | Html ZonE

Comments (17)

To add a comment, sign in with your Windows Live ID (if you use Hotmail, Messenger, or Xbox LIVE, you have a Windows Live ID). Sign in

Don't have a Windows Live ID? Sign up

	(""- -")("- -"")wrote: ขอบคุงมากค่าที่ช่วยสอน ได้ความรู้เยอะเลย ว่างๆๆมาสอนเรื่องอื่นอีกนะค่ะ ขอเอาไปเผยแพร่บอกเพื่อนๆๆด้วยนะค่ะ Sept. 24
	SeA Serieswrote: ThanK...=^___^= July 15
	ReasoningNUS wrote: ขอบคุณมากนะครับที่ให้คำปรึกษา ถ้าไม่มีพี่ช่วยบอก ผมคงทำไม่เป็นแน่เลย ขอบคุณมากๆนะครับพี่สาวสุดสวย Oct. 25
	Kat_NaaKaa wrote: แวะมาทักทายค่า แบบว่าเพิ่งเริ่มทำ space น่ะค่ะ ก้อได้ space นี้ล่ะที่ช่วยสอน อิอิ ดีจังเยย ขอบคุณน๊าค๊า.... Oct. 12
	ohclub wrote: +ดีครับ+ +ถ้ากำหนดความยาวของ คอลัม ตรงกลาง แล้วตัวขนาบ 2 ข้างมันจะเล็กลง หรือใหญ่ขึ้นตามความกว้างที่เรากำหนดใช่รึป่าว ครับ ความยาว(ลง)ใน อันที่ 3 มันจะยืดไปไม่มีที่สุดเพราะมันจะซ่ำกับอันบนสุดใช่มั้ยครับ อย่างนี้นี่เอง +ตอนนี้ผมทำแค่กรอบด้านหลังแต่ว่ามัน มีความสูงจำกัดยังทำให้มันไร้ขีดจำกัดไม่ได้เพราะทำแค่ แถวเดียวแล้วเดี๋ยวจะพัฒนาต่อไป ก็จะเข้ามาศึกษาจากเวปพี่(ผมอายุ17ปีครับ) อาจจะก๊อบแล้วมาดัดแปลงบ้าง(คริ คริ)แต่ก็จะพยายามทำเองให้ได้ครับ+ +ตอนนี้ก็มีกรอบ ไม่เชิงกรอบเป็นแบ็คกราวด์ซะมากกว่าทำเอง 95 % ที่เหลือ ก็ดูจากโค้ดของพี่เอาอ่ะครับ ไปละครับ โชคดีนะครับ Oct. 11
	nuOSera wrote: ^^ ดีจัง เราว่าจะทำ blog สอนเรื่องนี้อยู่พอดีเลย แฮะๆ ของ link แระกันเนอะ ____________________________________ nuose™ Oct. 10
	RathWJJ wrote: โอ html tag เพียบ Oct. 9
	•Mol2i Vee• wrote: ว้าวว...หั้ยความรู้มากๆๆเลยค่ะ สาระเยอะเลย แล้วจาแวะมาให่มีอีกนะคะ หวาดดีค่า ^.^ ถ้าว่างๆแวะปายเยี่ยมกานบ้างนะคะ ..อิอิ Oct. 9
	SP_Ladplakao62 wrote: วันนี้ลองดูที่ Settings>>>Statistics ก็เห็น referring address หนึ่งมาจาก http://www.geocities.com/chang_zone/space/link.html?20058 ก็งงๆ ว่ามีใครทำลิงค์มายังสเปซของเราแล้วเอาไปฝากไว้ที่ geocities ลองคลิกเข้าไปดูนะเองนะครับ และแล้วหนูมิวก็กลับมาแนะนำเทคนิคให้กับเพื่อนๆ ต่อไป ดีใจจังครับ Oct. 8
	nomyen19 wrote: มีความรู้ดีๆมาแจกอีกแล้ว Oct. 8
	อิคิวงับผม wrote: คือว่า...จะถามนอกเรื่องได้ป่าวอ่ะคับ คือผมจะหา URL เพลงที่ใช่เล่นใน Windows Media Player อ่ะทำไงเหรอคับ มาตอนใน space ผมก็ได้นะคับ จะขอบคุณมาเลยจ๊ะ Oct. 8
	Mainarakๆ wrote: หวัดดีคับพี่มิวคือผมได้ทิปจากที่ปชมีมากมายเลยนะคับ ขอบคุณจิงๆคับ ผมเรื่องนึงอยากจาถามพี่อ่ะคับ Category ทามใส่ลิ้งไปยางใงคับ ไม่รู้จิงๆคับพี่มิว ช่วยสอนผมทีคับ^^ Oct. 8
	ann wrote: บอกได้เลยว่า สเป๊ซของพี่มิว มีประโยชน์มาก ขอบคุนสำหรับ ทริคนะคะ หุๆๆๆ........ แอนนะ ยินดีที่ได้รุจักค่ะ Oct. 8
	Alcoholism wrote: มีทริคดีๆมาแนะนำอีกแล้วสิเนี่ย Oct. 8
	Kookkai6642 wrote: - แวะมาทักทายจ้า.. ขอบคุณนะคะ ที่แนะนำสิ่งดีๆๆให้นำมาใช้ จะลองทำตามค่ะ.. Oct. 8
	:::Ami~ja-klub-yipun::: wrote: ดีจัง กำลังหาเทคนิคแต่งspaceอยู่ค่ะ เพิ่งเคยทำ หลงทางมาเจอเข้าพอดี ขอบคุณนะจ๊ะ เดี๋ยวจะลองไปทำดูบ้างนะ Oct. 8
	AliceJan2 wrote: แวะมาทักทายกันอ่ะค่ะ ช่วงนี้เลยไม่ได้ลองวิชาของคุณครู เลย เพราะว่า ถือศีลอด อยู่อ่ะค่ะ คงจะตามทำๆๆๆๆๆๆๆ หลังจากออกบวช แล้วนะคะ ขอบตุณหลายๆๆค่ะ สำหรับความรู้ใหม่ๆๆ Oct. 8

Trackbacks

Weblogs that reference this entry

None