วันเสาร์ที่ 28 พฤษภาคม พ.ศ. 2559

HTML

                             
            

HTML คืออะไร?

HTML (ย่อมาจาก Hyper Text Markup Language)   เป็นภาษาประเภท Markup Language ที่ใช้ในการสร้างเว็บเพจ   มีแม่แบบมาจากภาษา SGML (Standard Generalized Markup Language) ที่ตัดความสามารถบางส่วนออกไป เพื่อให้สามารถทำความเข้าใจและเรียนรู้ได้ง่าย   ปัจจุบันมีการพัฒนาและกำหนดมาตรฐานโดยองค์กร World Wide Web Consortium (W3C)
ภาษา HTML ได้ถูกพัฒนาขึ้นอย่างต่อเนื่องตั้งแต่ HTML Level 1, HTML 2.0, HTML 3.0, HTML 3.2 และ HTML 4.0    ในปัจจุบัน ทาง W3C ได้ผลักดัน รูปแบบของ HTML แบบใหม่ ที่เรียกว่า XHTML ซึ่งเป็นลักษณะของโครงสร้าง XML แบบหนึ่ง ที่มีหลักเกณฑ์ในการกำหนดโครงสร้างของโปรแกรมที่มีรูปแบบที่มาตรฐานกว่า   มาทดแทนใช้ HTML รุ่น 4.01 ที่ใช้กันอยู่ในปัจจุบัน
HTML มีโครงสร้างการเขียนโดยอาศัย Tag ในการควบคุมการแสดงผลของข้อความ รูปภาพ หรือวัตถุอื่น ๆ แต่ละ Tag อาจจะมีส่วนขยาย เรียกว่า Attribute สําหรับจัดรูปแบบเพิ่มเติม
การสร้างเว็บเพจ โดยใช้ภาษา HTML สามารถทำโดยใช้โปรแกรม Text Editor ต่างๆ เช่น Notepad, EditPlus หรือจะอาศัยโปรแกรมที่เป็นเครื่องมือช่วยสร้างเว็บเพจ เช่น Microsoft FrontPage, Dream Weaver ซึ่งอํานวยความสะดวกในการสร้างหน้า HTML ในลักษณะ WYSIWYG (What You See Is What You Get)
แต่มีข้อเสียคือ โปรแกรมเหล่านี้มัก generate code ที่เกินความจำเป็นมากเกินไป ทําให้ไฟล์ HTML มีขนาดใหญ่ และแสดงผลช้า ดังนั้นหากเรามีความเข้าใจภาษา HTML จะเป็นประโยชน์ให้เราสามารถแก้ไข code ของเว็บเพจได้ตามความต้องการ และยังสามารถนำ script มาแทรก ตัดต่อ สร้างลูกเล่นสีสันให้กับเว็บเพจของเราได้

การเรียกใช้งานหรือทดสอบการทำงานของเอกสาร HTML จะใช้โปรแกรม Internet Web Browser เช่น Internet Explorer (IE), Mozilla Firefox, Safari, Opera, และ Google Chrome เป็นต้น
             โครงสร้างพื้นฐานของ HTML

การจัดโครงสร้างแฟ้มเอกสาร                 ในความง่ายของภาษา HTML นั้นเพราะภาษานี้ไม่มีโครงสร้างใด ๆ มากำหนดนอก จากโครงสร้างพื้นฐานเท่านั้น
หรือ แม้แต่จะไม่มีโครงสร้าง พื้นฐานอยู่ โปรแกรมที่เขียนขึ้นมานั้นก็สามารถทำงานได้เสมือนมี โครงสร้างทั่งนี้เป็นเพราะว่าตัวโปรแกรม
เว็บเบราเซอร์ จะมองเห็นทุกสิ่งทุกอย่างในโปรแกรม HTML เป็นส่วนเนื้อหาทั้งสิ้น

                  ยกเว้นใน ส่วนหัว ที่ต้อง มีการกำหนด แยกออกไปให้ เห็นชัดเท่านั้น จะเขียน คำสั่ง หรือ ข้อความที่ ต้องการ ให้แสดง อย่างไรก็ได้
เป็นเสมือนพิมพ์งานเอกสารทั่ว ๆ ไปเพียง แต่ ทำตำแหน่ง ใดมีการ ทำตำแหน่ง พิเศษขึ้นมา เว็บเบราเซอร์ถึงจะแสดงผล ออกมาตามที่
ถูกกำหนด โดยใช้คำสั่งให้ตรงกับ รหัสที่กำหนดเท่านั้น
การแสดงผลที่เว็บเบราเซอร์                 
            หลังจากมีการพิมพ์โปรแกรมนี้เสร็จเรียบร้อยแล้ว ให้บันทึกเป็น ไฟล์ที่มีนามสกุล .htm หรือ .html จากนั้นให้เรียกโปรแกรมเว็บเบราเซอร์ขึ้นมาทำการทดสอบ ข้อมูลที่เราสร้างจะถูก นำมาที่ออกมาแสดงที่จอภาพ ถ้าไม่เขียนอะไรผิด บนจอภาพก็จะแสดงผลตามนั้น
ถ้าเรามีการปรับปรุงแก้ไขข้อมูลในโปรแกรมเดิม ให้อยู่ในรูปของ โปรแกรมใหม่ ก็จำ เป็นต้องโหลดโปรแกรมขึ้นมาใหม่ เพียงแต่เลื่อนเมาส์
ไปคลิกที่ปุ่ม Refresh โปรแกรมก็จะทำการ ประมวลผลและแสดงผลออกมาใหม่ ในคำสั่ง HTML ส่วนใหญ่ใช้ตัวเปิด เป็นเครื่องหมายน้อยกว่า
< ตามด้วยคำสั่ง และปิดท้ายด้วยเครื่องหมายมากกว่า > และมีตัวปิดที่มีรูปแบบเหมือนตัวเปิดเสมอ เพียงแต่จะมีเครื่อง หมาย / อยู่หน้าคำสั่งนั้นๆ เช่น คำสั่ง <BODY> จะมี </BODY> เป็นคำสั่งปิด เมื่อใดที่ผู้เขียนลืมหรือพิมพ์คำสั่งผิด จะส่งผลให้การทำงานของโปรแกรมผิดพลาดทันที

คำสั่งเริ่มต้นสำหรับ HTML 
                    คำสั่งหรือ Tag ที่ใช้ในภาษา HTML ประกอบไปด้วยเครื่องหมายน้อยกว่า <ตามด้วย ชื่อคำสั่งและปิดท้ายด้วยเครื่องหมายมากกว่า
> เป็นส่วนที่ทำหน้าที่ตกแต่งข้อความ เพื่อ การแสดงผลข้อมูล โดยทั่วไปคำสั่งของ HTML ส่วนใหญ่จะอยู่เป็นคู่ มีเพียงบาง คำสั่งเท่านั้น
ที่มีรูปแบบคำสั่งอยู่เพียงตัวเดียว ในแต่ละคำสั่ง จะมีคำสั่งเปิดและปิด คำสั่งปิดของแต่ละ คำสั่งจะมี รูปแบบเหมือนคำสั่งเปิด เพียงแต่จะเพิ่ม /
(Slash) นำหน้าคำสั่ง ปิดให้ดู แตกต่าง เท่านั้น และในคำสั่งเปิดบางคำสั่ง อาจมีส่วนขยายอื่นผสมอยู่ด้วย ในการเขียน ด้วยตัวอักษร
เล็กหรือใหญ่ ทั้งหมดหรือเขียนปนกันก็ได้ ไม่มีผลอะไร
คำสั่งเริ่มต้นรูปแบบ   <HTML>.....</HTML>
คำสั่ง <HTML> เป็นคำสั่งเริ่มต้นในการเขียนโปรแกรม และ </HTML>เป็นคำสั่งจุดสิ้นสุดโปรแกรมเหมือนคำสั่ง Beign และ End ใน Pascal
คำสั่งการทำหมายเหตุรูปแบบ <!-- ..... -->
ตัวอย่าง <!-- END WEBSTAT CODE -->   ข้อความที่อยู่ในคำสั่งจะปรากฎอยู่ในโปรแกรมแต่ไม่ถูกแสดง บนจอภาพ
ส่วนหัว รูปแบบ <HEAD>.....</HEAD>
ใช้กำหนดข้อความ ในส่วนที่เป็น ชื่อเรื่อง ภายในคำสั่งนี้ จะมีคำสั่งย่อย อีกหนึ่งคำสั่ง คือ <TITLE>
กำหนดข้อความในไตเติลบาร์
รูปแบบ <TITLE>.....</TITLE>
ตัวอย่าง <TITLE> บทเรียน HTML </TITLE>
เป็นส่วนแสดงชื่อของเอกสาร จะปรากฎ ขณะที่ไฟล์ HTML ทำงานอยู่ ข้อความ ที่กำหนด ในส่วนนี้ จะไม่ถูกนำไปแสดง ผลของ เว็บเบราเซอร์แต่จะปรากฎในส่วนของไตเติบาร์ (Title bar) ที่เป็นชื่อของวินโดว์ข้างบนไม่ควรให้ยา เกินไป เพียงให้รู้ว่าเว็บเพจที่กำลัง ใช้งานอยู่เกี่ยวข้องกับอะไร
ส่วนของเนื้อหา
รูปแบบ <BODY>.....</BODY>
ส่วนเนื้อหาของโปรแกรมจะเริ่มต้นด้วย คำสั่ง <BODY> และจบลงด้วย </BODY> ภายในคำสั่งนี้ คือ ส่วนที่จะ แสดงทางจอภาพ 

                                                  การเติมสีสันให้เอกสาร
           ทำ ได้โดย การกำหนด แอตทริบิวต์ (Attribute) ของตัวอักษร สิ่งที่ต้องการนี้ จะเป็น กลุ่มตัว เลขฐาน 16 จำนวน 3 ชุด โดยชุดที่ หนึ่ง ทำหน้าที่ แทนค่าสีแดง ชุดที่สอง ทำหน้าที่ แทนสีเขียว และชุดที่สาม ทำหน้าที่แทนสี น้ำเงิน ข้อมูล ในตาราง ต่อไปนี้จะแสดง สีพื้นฐาน และรหัสสี ที่สามารถแสดงได้ทุกเว็บเพจ

สีของพื้นฉากหลัง 
รูปแบบ BGCOLOR=#สีที่ต้องการ
ตัวอย่าง <BODY BGCOLOR="#FF0000"> 
เราใช้ BGCOLOR=#สีที่ต้องการ ให้เป็นส่วนหนึ่งของ <BODY> ซึ่งจะทำให้เกิดสีตามที่เราเลือก ลักษณะเป็นฉากสีอยู่ข้างหลัง

สีของตัวอักษรบนเว็บ 
รูปแบบ Text=#รหัสสี
ตัวอย่าง <BODY TEXT="#00FF00">
เรากำหนดเช่นเดียวกับการทำสีของพื้นฉากหลังโดยให้เป็นส่วน หนึ่งของ <BODY> แต่ในการใส่รหัสสีนั้นเร าต้องดู ให้เหมาะสมกับฉากหลังด้วยเช่น <BODY TEXT="#00FF00"> ในการ ทำสีของ ตัวอักษรนี้สีจะปรากฎบนเว็บเปราเซอร์ เป็นสีเดียวตลอด
สีของตัวอักษรเฉพาะที่ 
รูปแบบ <FONT COLOR="#สีที่ต้องการ">...</FONT>
ตัวอย่าง <font color="#FF0000">สีแดง</font>
คำสั่งนี้เราใช้ในการเปลี่ยนสีของตัวอักษรในส่วนที่เราต้องการให้เกิดสีสันแตกต่างไปจากสีตัวอักษร อื่น ๆ เช่น <FONT COLOR="#FF0000">สีแดง</FONT>ตัวหนังสือคำว่าสีแดงก็จะเป็นสีแดงตามที่เราต้องการทันที

สีของตัวอักษรที่เป็นจุดคลิกเมาส์
รูปแบบ LINK="#รหัสสี" ALINK="#รหัสสี" VLINK"#รหัสสี"
ตัวอย่าง <BODY BGCOLOR="000000" TEXT="#F0F0F0" LINK="#FFFF00" ALIGN="#0077FF" VLINK="#22AA22">
กำหนดอยู่ในส่วนของ BODY โดยกำหนดให้
     LINK       =    สีของตัวอักษรก่อนมีการคลิก
     ALIGN    =    สีของตัวอักษรขณะถูกคลิก
     VLINK    =    สีของอักษรหลังจากคลิกแล้ว

ตัวอย่างสี



                                            สัญลักษณ์พิเศษ (Symbol)

จะสังเกตได้ว่าคำสั่งของ HTML จะเป็น tag ที่ใช้เครื่องหมาย "<" และ ">" เช่น <p align="center"> แล้วแบบนี้ถ้าเราต้องการแสดง เครื่องหมาย < หรือ > หรือ " บนหน้าเว็บเพจจะทำอย่างไร 

เราจะต้องใช้สัญลักษณ์พิเศษ เวลาที่เราพิมพ์ใน Text Editor ให้เราพิมพ์เป็น &lt; สำหรับเครื่องหมาย < , พิมพ์ &gt; สำหรับเครื่องหมาย > และพิมพ์ &quot; สำหรับเครื่องหมาย "

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

สัญลักษณ์พิเศษที่ใช้งานบ่อยๆ ได้แก่

©&copy;
®&reg;
™&trade;
"&quot;
&&amp;
<&lt;
>&gt;


อีกเรื่องแถมท้าย เวลาที่เราพิมพ์ข้อความ และมีเว้นวรรค ไม่ว่าเราจะเคาะ spacebar เว้นวรรคกี่ครั้งก็ตาม เวลาที่เรียกดูผลจากเว็บเบราเซอร์์ ก็จะเห็นมันเว้นวรรคให้เราเคาะเีดียวตลอดเลย แล้วถ้าอยากจะเคาะวรรคหลายครั้งทำได้อย่างไร

ให้ใช้ &nbsp; ใส่ไปหลายๆ ครั้ง ก็จะสามารถจะเว้นวรรคได้ห่างตามที่ต้องการเลยค่ะ
Example
1   2     3       4
1 &nbsp; 2 &nbsp; &nbsp; 3 &nbsp; &nbsp; &nbsp; 4
Output
1 2 3 4
1   2     3       4
                                 

การขึ้นย่อหน้าใหม่ และกำหนดตำแหน่งข้อความ (Paragraph)

ในการจัด Paragraph ของข้อความ จะใช้ tag <p> สามารถกำหนดการจัดวางตำแหน่งข้อความว่าจะชิดซ้าย / ขวา / กึ่งกลาง ด้วย attribute align  และเมื่อแสดงผลแล้วจะขึ้นบรรทัดใหม่ให้อัตโนมัติ
<p align="left | center | right |justify">...</p>
tag <p>การแสดงผล
<p align="left">ข้อดวามในพารากราฟ</p>
<p>ข้อดวามในพารากราฟ</p>
ข้อดวามในพารากราฟ
HTML (Hyper Text Markup Language) เป็นภาษาประเภท Markup Language ที่ใช้ในการสร้างเว็บเพจ เป็นภาษาที่ง่ายต่อการเรียนรู้ (ไม่ใช่ภาษาประเภท Programming Language) ปัจจุบันมีการพัฒนาและกำหนดมาตรฐานโดยองค์กร World Wide Web Consortium (W3C)
<p align="center">ข้อดวามในพารากราฟจัดวางกึ่งกลาง</p>
ข้อดวามในพารากราฟจัดวางกึ่งกลาง
HTML (Hyper Text Markup Language) เป็นภาษาประเภท Markup Language ที่ใช้ในการสร้างเว็บเพจ เป็นภาษาที่ง่ายต่อการเรียนรู้ (ไม่ใช่ภาษาประเภท Programming Language) ปัจจุบันมีการพัฒนาและกำหนดมาตรฐานโดยองค์กร World Wide Web Consortium (W3C)
<p align="right">ข้อดวามในพารากราฟจัดชิดขวา</p>
ข้อดวามในพารากราฟจัดชิดขวา
HTML (Hyper Text Markup Language) เป็นภาษาประเภท Markup Language ที่ใช้ในการสร้างเว็บเพจ เป็นภาษาที่ง่ายต่อการเรียนรู้ (ไม่ใช่ภาษาประเภท Programming Language) ปัจจุบันมีการพัฒนาและกำหนดมาตรฐานโดยองค์กร World Wide Web Consortium (W3C)
<p align="justify">ข้อดวามในพารากราฟ กระจายคำให้พอดี</p>
ข้อดวามในพารากราฟ กระจายคำให้พอดี
HTML (Hyper Text Markup Language) เป็นภาษาประเภท Markup Language ที่ใช้ในการสร้างเว็บเพจ เป็นภาษาที่ง่ายต่อการเรียนรู้ (ไม่ใช่ภาษาประเภท Programming Language) ปัจจุบันมีการพัฒนาและกำหนดมาตรฐานโดยองค์กร World Wide Web Consortium (W3C)


การขึ้นบรรทัดใหม่

โดยปกติ ถ้าข้อความยาวมากๆ เว็บเบราเซอร์์จะตัดคำขึ้นบรรทัดใหม่ให้อยู่แล้ว แต่ถ้าต้องการกำหนดการขึ้นบรรทัดใหม่เอง ให้ใช้ tag <br> ถ้าให้เป็นไปตามมาตรฐานใหม่ของ (X)HTML ใช้ <br /> 

และสามารถกำหนดรูปแบบการขึ้นบรรทัดใหม่ได้หลายแบบ ผ่าน attribute clear ที่มีค่่าเป็น left / right / all /none 
<br clear="left | right | all | none">
หรือ เพื่อให้เป็นไปตามมาตรฐานของ (X)HTML รุ่นใหม่ จะเขียนแบบนี้
<br clear="left | right | all | none" />
tag <br>, <br />การแสดงผล
<p>HTML (Hyper Text Markup Language)<br /> เป็นภาษาประเภท Markup Language ที่ใช้ในการสร้างเว็บเพจ<br /><br /> เป็นภาษาที่ง่ายต่อการเรียนรู้ (ไม่ใช่ภาษาประเภท Programming Language) ปัจจุบันมีการพัฒนาและกำหนดมาตรฐานโดยองค์กร World Wide Web Consortium (W3C) </p>HTML (Hyper Text Markup Language)
เป็นภาษาประเภท Markup Language ที่ใช้ในการสร้างเว็บเพจ

เป็นภาษาที่ง่ายต่อการเรียนรู้ (ไม่ใช่ภาษาประเภท Programming Language) ปัจจุบันมีการพัฒนาและกำหนดมาตรฐานโดยองค์กร World Wide Web Consortium (W3C)
<img src="../images/ryoma.jpg" align="left">
ข้อความข้างรูป<br />
เอจิเซ็น เรียวมะ		ข้อความข้างรูป
เอจิเซ็น เรียวมะ
<img src="../images/ryoma.jpg" align="left">
ข้อความข้างรูป<br clear="left" />
เอจิเซ็น เรียวมะ		ข้อความข้างรูป
เอจิเซ็น เรียวมะ


                        การจัดกลุ่มข้อความ (div, span)

tag <div> และ tag <span> ใช้สำหรับกำหนดรูปแบบหรือลักษณะข้อความที่อยู่ภาย tag   มักใช้ร่วมกับ CSS

tag <div> เป็น tag ที่มีไว้แบ่งส่วนเนื้อหาของ HTML ออกจากกันเป็นส่วนๆ (block) ถ้า <div> ไม่ได้กำหนดคุณลักษณะใดๆ ก็จะมีผลเหมือนกับการใช้ tag <p> และเมื่อแสดงผลแล้วจะขึ้นบรรทัดใหม่ให้อัตโนมัติ 
<div align="left | center | right |justify">...</div>
ส่วน tag <span> คล้ายกับ tag <div> แต่มักใช้จัดแต่ง ข้อความสั้นๆ (inline) ที่อยู่ใต้การกำหนดรูปแบบของ tag อื่นอยู่แล้ว เพื่อให้มีรูปแบบที่ต่างไปจากรูปแบบเหล่านั้น และจะไม่ขึ้นบรรทัดใหม่ (ไม่เหมือนกับ <div>)
<span>...</span>
Example
<div align="center">
HTML (Hyper Text Markup Language) เป็นภาษาประเภท Markup Language ที่ใช้ในการสร้างเว็บเพจ เป็นภาษาที่ง่ายต่อการเรียนรู้ (ไม่ใช่ภาษาประเภท Programming Language) ปัจจุบันมีการพัฒนาและกำหนดมาตรฐานโดยองค์กร World Wide Web Consortium (W3C)
</div> 
Output
 
HTML (Hyper Text Markup Language) เป็นภาษาประเภท Markup Language ที่ใช้ในการสร้างเว็บเพจ เป็นภาษาที่ง่ายต่อการเรียนรู้ (ไม่ใช่ภาษาประเภท Programming Language) ปัจจุบันมีการพัฒนาและกำหนดมาตรฐานโดยองค์กร World Wide Web Consortium (W3C)
Exampleใช้งาน <div> และ <span> ร่วมกับ CSS 
<div style="color:#003399">
<h2>หัวข้อ</h2>
<p>ข้อความใน <span style="font-weight:bold">พารากราฟ</span></p>
</div> 
Output
 

หัวข้อ

ข้อความใน พารากราฟ

                                         ตาราง (Table)

tag ที่ใช้สำหรับทำตารางมีอยู่หลาย tag
TagDescription
<table>ใช้สร้างตารางข้อมูล
<th>สำหรับข้อความที่เป็นหัวคอลัมน์ จะเป็นตัวหนา
<tr>สำหรับแถวของตาราง
<td>สำหรับข้อมูลในแต่ละ cell
<caption>คำอธิบายตาราง
<thead>กำหนดส่วน head ของตาราง
<tbody>กำหนดส่วน body ของตาราง
<tfoot>กำหนดส่วน footer ของตาราง
<colgroup>กำหนดคุณสมบัติให้ groups ของคอลัมน์ในตาราง ใช้ร่วมกับ <col>
(Firefox ไม่สนับสนุน)
<col>กำหนดคุณสมบัติให้คอลัมน์ใดๆ (Firefox ไม่สนับสนุน)

Example tag ที่ใช้บ่อยๆ ได้แก่ <table>, <tr>, <td>
<table>
  <tr>
    <td>รหัสพนักงาน</td>
    <td>ชื่อ</t>
    <td>เงินเดือน</td>
  </tr>
  <tr>
    <td>01</td>
    <td>อำนาจ</td>
    <td>30,000</td>
  </tr>
  <tr>
    <td>02</td>
    <td>สมชาย</td>
    <td>25,000</td>
  </tr>
  <tr>
    <td>03</td>
    <td>วีระ</td>
    <td>20,000</td>
  </tr>
  </table>
Output
รหัสพนักงานชื่อเงินเดือน
01อำนาจ30,000
02สมชาย25,000
03วีระ20,000
เราสามารถกำหนดคุณสมบัติให้ตาราง <table> ผ่าน attribute ต่างๆ ได้แก่
- align="left" | "center" | "right"   จัดตำแหน่งของตาราง
- border="number"   กำหนดความหนาของเส้นขอบตาราง
- bordercolor="สี"   สีของเส้นขอบ
- width="number"   กำหนดความกว้างให้ตาราง
- bgcolor="สี"   กำหนดสี background
- cellspacing="number"   กำหนดช่องว่างภายใน cell
- cellpadding="number"   กำหนดระยะห่างระหว่าง cell
attribute กำหนดคุณสมบัติให้แถวของตาราง <tr> ได้แก่
- align="left" | "center" | "right" จัดตำแหน่งของข้อความใน cell แนวนอนทั้งแถว
- valign= "top" | "middle" | "bottom" | "baseline"  จัดตำแหน่งของข้อความใน cell แนวตั้งทั้งแถว
- bgcolor ="สี" กำหนดสี background ให้ทั้งแถว
attribute กำหนดคุณสมบัติให้ cell ข้อมูล <td> ได้แก่
- align="left" | "center" | "right" จัดตำแหน่งของข้อความใน cell แนวนอน
- valign= "top" | "middle" | "bottom" | "baseline"  จัดตำแหน่งของข้อความใน cell แนวตั้ง
- width="ความกว้างของคอลัมน์"
- height="ความสูงของแถว"
- colspan="number"   จำนวนคอลัมน์ที่จะให้รวมเป็นคอลัมน์เดียวกัน
- rowspan="number"   จำนวนแถวที่จะให้รวมแถวเป็นแถวเีดียวกัน
- bgcolor="สี"   กำหนดสี background ให้ cell

Example attribute :align, border, width, bgcolor 
<table align="center" border="1" width="80%" bgcolor="#FFFF99">
  <tr>
    <td>รหัสพนักงาน</td>
    <td>ชื่อ</td>
    <td align="right">เงินเดือน</td>
  </tr>
  <tr>
    <td>01</td>
    <td>อำนาจ</td>
    <td align="right">30,000</td>
  </tr>
  <tr>
    <td>02</td>
    <td>สมชาย</td>
    <td align="right">25,000</td>
  </tr>
  <tr>
    <td>03</td>
    <td>วีระ</td>
    <td align="right">20,000</td>
  </tr>
</table>
Output
รหัสพนักงานชื่อเงินเดือน
01อำนาจ30,000
02สมชาย25,000
03วีระ20,000
Example attribute : cellspacing, cellpadding 
- cellspacing กำหนดระยะห่างระหว่าง cell
- cellpadding กำหนดช่องว่างภายใน cell

<table border="1" width="80%" cellspacing="10">
  <tr>
    <td>รหัสพนักงาน</td>
    <td>ชื่อ</td>
    <td align="right">เงินเดือน</td>
  </tr>
  <tr>
    <td>01</td>
    <td>อำนาจ</td>
    <td align="right">30,000</td>
  </tr>
  <tr>
    <td>02</td>
    <td>สมชาย</td>
    <td align="right">25,000</td>
  </tr>
  <tr>
    <td>03</td>
    <td>วีระ</td>
    <td align="right">20,000</td>
  </tr>
</table>

<table border="1" width="80%" cellpadding="10">
  <tr>
    <td>รหัสพนักงาน</td>
    <td>ชื่อ</td>
    <td align="right">เงินเดือน</td>
  </tr>
  <tr>
    <td>01</td>
    <td>อำนาจ</td>
    <td align="right">30,000</td>
  </tr>
  <tr>
    <td>02</td>
    <td>สมชาย</td>
    <td align="right">25,000</td>
  </tr>
  <tr>
    <td>03</td>
    <td>วีระ</td>
    <td align="right">20,000</td>
  </tr>
</table>
Output
cellspacing = ระยะห่างระหว่าง cell
รหัสพนักงานชื่อเงินเดือน
01อำนาจ30,000
02สมชาย25,000
03วีระ20,000

cellpadding = ช่องว่างภายใน cell
รหัสพนักงานชื่อเงินเดือน
01อำนาจ30,000
02สมชาย25,000
03วีระ20,000
Example attribute : colspan, rowspan 
- colspan รวมหลายๆ คอลัมน์เป็นคอลัมน์เดียว
- rowspan รวมหลายๆ แถวเป็นแถวเีดียว

<table align="center" border="1" width="80%" bgcolor="#FFFF99">
  <tr>
    <td rowspan="2">รหัสพนักงาน</td>
    <td colspan="2">ชื่อ</td>
   <td rowspan="2" align="right">เงินเดือน</td>
  </tr> 
  <tr>
    <td>ไทย</td>
    <td>eng</td>
  </tr>

  <tr>
    <td>01</td>
    <td>อำนาจ</td>
    <td>Amnaj</td>
    <td align="right">30,000</td>
  </tr>
  <tr>
    <td>02</td>
    <td>สมชาย</td>
    <td>Somchai</td>
    <td align="right">25,000</td>
  </tr>
  <tr>
    <td>03</td>
    <td>วีระ</td>
    <td>Weera</td>
    <td align="right">20,000</td>
  </tr>
</table>
Output
รหัสพนักงานชื่อเงินเดือน
ไทยeng
01อำนาจAmnaj30,000
02สมชายSomchai25,000
03วีระWeera20,000
Example attribute : col 
tag <col> ใช้กำหนดค่า attribute ได้ทั้งคอลัมน์ แทนการกำหนดซ้ำๆ ให้แต่ละ cell ตัวอย่างนี้จะเลิกใส่ attirbute align="right" ซ้ำๆ ที่ tag <td> (เงินเดือน)
<table border="1" width="80%">       
   <col align="center"></col>    
   <col align="left"></col>    
   <col align="left"></col>    
   <col align="right"></col>    
   <tr>
        <td>รหัสพนักงาน</td>
        <td>ชื่อ</td>
        <td>Name</td>
        <td>เงินเดือน</td>
   </tr>
   <tr>
        <td>01</td>
        <td>อำนาจ</td>
        <td>Amnaj</td>
        <td>30,000</td>
   </tr>
   <tr>
        <td>02</td>
        <td>สมชาย</td>
        <td>Somchai</td>
        <td>25,000</td>
   </tr>
   <tr>
        <td>03</td>
        <td>วีระ</td>
        <td>Weera</td>
        <td>20,000</td>
   </tr>
 </table>
Output
รหัสพนักงานชื่อNameเงินเดือน
01อำนาจAmnaj30,000
02สมชายSomchai25,000
03วีระWeera20,000
Example attribute : colgroup 
tag <colgroup> ใช้เพื่อจัดหลายๆ คอลัมน์เป็น group เดียวกันก่อน แล้วค่อยกำหนดค่า attribute ให้กับ group ของคอลัมน์ แทนการกำหนดซ้ำๆ ให้แต่ละ คอลัมน์ หรือแต่ละ cell 

ตัวอย่างนี้จัด group รวมคอลัมน์แรก และคอลัมน์ที่สองก่อน แล้วกำหนด attribute รวดเดียวเลย ว่าให้จัดชิดซ้าย
<table border="1" width="80%">
   <colgroup align="center"></colgroup>
   <colgroup span="2" align="left"></colgroup>
   <colgroup align="right"></colgroup>
   <tr>
       <td>รหัสพนักงาน</td>
       <td>ชื่อ</td>
       <td>Name</td>
       <td>เงินเดือน</td>
   </tr>
   <tr>
       <td>01</td>
       <td>อำนาจ</td>
       <td>Amnaj</td>
       <td>30,000</td>
   </tr>
   <tr>
       <td>02</td>
       <td>สมชาย</td>
       <td>Somchai</td>
       <td>25,000</td>
   </tr>
   <tr>
       <td>03</td>
       <td>วีระ</td>
       <td>Weera</td>
       <td>20,000</td>
   </tr>
</table>
Output
รหัสพนักงานชื่อNameเงินเดือน
01อำนาจAmnaj30,000
02สมชายSomchai25,000
03วีระWeera20,000
Example ตัวอย่างนี้ขอรวมมิตรทุก tag เลยละกันค่ะ
<table border="1" width="80%">
  <caption>รายชื่อนักเรียน และผลการเรียน</caption>
  <col align="center"></col>
  <col align="left"></col>
  <col align="right"></col> 
  <thead>
  <tr>
    <th width="20%" bgcolor="#FFFFCC">รหัสพนักงาน</th>
    <th bgcolor="#FFCCCC">ชื่อ</th>
    <th width="30%" bgcolor="#99CCFF">เงินเดือน</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>01</td>
    <td>อำนาจ</td>
    <td>30,000</td>
  </tr>
  <tr>
    <td>02</td>
    <td>สมชาย</td>
    <td>25,000</td>
  </tr>
  <tr>
    <td>03</td>
    <td>วีระ</td>
    <td >20,000</td>
  </tr>
  </tbody>
  <tfoot>
  <tr bgcolor="#EAF4FF">
    <td>&nbsp;</td> 
    <td align="right">รวม</td>
    <td>75,000</td>
  </tr>
  </tfoot>
</table>
Output
รายชื่อนักเรียน และผลการเรียน
รหัสพนักงานชื่อเงินเดือน
01อำนาจ30,000
02สมชาย25,000
03วีระ20,000
 รวม75,000

Example ตัวอย่างนี้จะทำเส้นตารางโดยใช้ cellspacing แทน border และสีของเส้นตารางคือสีจาก bgcolor
<table width="80%" cellspacing="1" bgcolor="#CCCCCC">
  <caption>รายชื่อนักเรียน และผลการเรียน</caption>
  <col align="center"></col>
  <col align="left"></col>
  <col align="right"></col> 
  <thead>
  <tr>
    <th width="20%" bgcolor="#FFFFCC">รหัสพนักงาน</th>
    <th bgcolor="#FFCCCC">ชื่อ</th>
    <th width="30%" bgcolor="#99CCFF">เงินเดือน</th>
  </tr>
  </thead>
  <tbody>
  <tr bgcolor="#FFFFFF">
    <td>01</td>
    <td>อำนาจ</td>
    <td>30,000</td>
  </tr>
  <tr bgcolor="#FFFFFF">
    <td>02</td>
    <td>สมชาย</td>
    <td>25,000</td>
  </tr>
  <tr bgcolor="#FFFFFF">
    <td>03</td>
    <td>วีระ</td>
    <td >20,000</td>
  </tr>
  </tbody>
  <tfoot>
  <tr bgcolor="#EAF4FF">
    <td>&nbsp;</td> 
    <td align="right">รวม</td>
    <td>75,000</td>
  </tr>
  </tfoot>
</table>

Output
รายชื่อนักเรียน และผลการเรียน
รหัสพนักงานชื่อเงินเดือน
01อำนาจ30,000
02สมชาย25,000
03วีระ20,000
 รวม75,000
เขียนโดย ที่

ไม่มีความคิดเห็น:

แสดงความคิดเห็น

สมัครสมาชิก: ส่งความคิดเห็น (Atom)