18.เชื่อมต่อเอกสารของเราด้วย hyperlink

เชื่อมต่อเอกสารของเราด้วย hyperlink

hyperlink หรือเราเรียกกันสั้นว่า link ซึ่งเราจะเห็นอยู่ในทุกเว็บไซต์ ใช้เพื่อเปิดเว็บเพจอื่นๆใน เว็บไซต์ของเรา หรือเชื่อมโยงไปที่ web site หรือ เว็บเพจอื่นๆ ซึ่งมีความสำคัญมากในเว็บไซต์

1. สร้าง hyperlink
ในตัวอย่างจะใช้ตัวอักษรในการทำ hyperlink ซึ่งการลิงค์ในตัวอย่างจะมี 2 แบบคือ

1.1. ลิงค์ภายในเว็บไซต์ด้วยกัน มีหลักการสร้าง hyperlink ดังรูปด้านล่าง

รูปแบบของ hyperlink ภายใน directory เดียวกัน

Source Code
<a href='ชื่อไฟล์ที่ต้องการลิงค์'> ตัวอักษรที่จะใช้แสดง </a>

รูปแบบของ hyperlink จาก directory ที่ต่ำกว่า 1 ขั้น

Source Code
<a href='ชื่อ directory ที่เก็บไฟล์ไว้/ชื่อไฟล์ที่ต้องการลิงค์'> ตัวอักษรที่จะใช้แสดง </a>

รูปแบบของ hyperlink จาก directory ที่สูงกว่า

Source Code
<a href='../ชื่อไฟล์ที่ต้องการลิงค์'> ตัวอักษรที่จะใช้แสดง </a>

1.2. ลิงค์กับเว็บภายนอก

รูปแบบของ hyperlink กับเว็บภายนอก

Source Code
<a href='http://domain name'> ตัวอักษรที่จะใช้แสดง </a>

2. สร้าง hyperlink ด้วยรูปภาพ
ในตัวอย่างจะเป็นการสร้างลิงค์ด้วยรูปภาพ

รูปแบบของการสร้าง hyperlink ด้วยรูปภาพ

Source Code
<a href='หน้าที่ต้องการเชื่อมโยง'> 
    <img border = '0' src ='ที่อยู่ภาพ/ชื่อภาพ'> 
</a>

3. สร้าง hyperlink ในหน้าเดียวกัน
ในหน้าที่มีบทความเยอะมากๆ เราต้องการสร้าง link เพื่อไปยังหัวข้อที่อยู่ในหน้าเดียวกันเพื่อความสะดวกในการอ่านบทความ โดยเราจะตั้งจุดที่เราต้องการจะ link ไปหาโดยใช้ <a name ='ชื่อ'> </a>

รูปแบบของการสร้าง hyperlink ในหน้าเดียวกัน

สร้างจุดที่ต้องการจะลิงก์ไป

Source Code
<a name='ชื่อจุดลิงค์'> </a>

สร้างลิงก์

Source Code
<a href='#ชื่อจุดลิงค์'> ตัวอักษรที่ต้องการแสดง </a>

4. เปิด browser ใหม่เมื่อคลิกที่ลิงก์
การสร้าง link ให้เปิด browser ใหม่เราจะใช้ Attributes โดยพิมพ์ target="_blank" ใน a tag

เปิด browser ใหม่เมื่อคลิกที่ลิงค์

Source Code
<a href="เป้าหมาย" target="_blank">ตัวอักษรที่ใช้แสดง</a>

17.การใส่รูปในเว็บเพจ

การใส่รูปในเว็บเพจ

รูปนั้นสามารถบรรยายรายละเอียดได้ดีกว่าคำพูดมาก ดังนั้นแทบทุกเว็บไซต์จึงมีรูปอยู่เกือบทุกเว็บไซต์ ในบทความนี้เราจะมาใส่รูปในเว็บเพจกัน

1. ลองใส่รูปในเว็บเพจ
จะเห็นได้ว่าการใส่รูปที่ขยับได้ หรือขยับไม่ได้นั้น code ไม่แตกต่างกัน แต่จะแตกต่างกันที่ตัวรูปเองว่าขยับได้หรือไม่

ฟอร์ตแมตของไฟต์ที่เราจะเห็นกันบ่อยๆ
1.JPEG เหมาะสำหรับภาพถ่าย หรือภาพที่มีความละเอียดและจำนวนสีมากๆ
2.GIF เหมาะสำหรับภาพลายเส้น เช่นการ์ตูน ตัวหนังสือ หรือภาพที่ต้องการสร้างให้ภาพโปร่งใส หรือ ทำให้เคลื่อนไหวได้
3.PNG เหมาะสำหรับภาพที่ต้องการให้โปร่งแสง ขนาดไฟล์จะใหญ่กว่า JPEG แต่คุณภาพจะดีกว่า JPEG

สำหรับการเปลี่ยนฟอร์ตแมตของภาพเราจะใช้โปรแกรมเช่น Photoshop ในการเปลี่ยนซึ่งเรื่องนี้เราจะไปศึกษากันที่หัวข้อ Photoshop กันต่อไป ซึ่งฟอร์ตแมตของภาพจะมีผลมากต่อการทำเว็บไซต์ของเรา

2. ใส่รูปจาก directory ที่ต่างกัน
จะเห็นว่าการใส่รูปจาก directory ที่ต่างกันใช้หลักการเดียวกับการเขียน hyperlink นั่นเอง ซึ่งหากไม่เข้าใจสามารถกลับไปดูได้ที่หัวข้อ เชื่อมต่อเอกสารของเราด้วย hyperlink

3. The Alt Attribute
รูปแบบ <img src="boat.gif" alt="Big Boat"> เราใช้ alt Attribute เพื่อแสดงผลในกรณีที่ไม่สามารถโหลดรูปได้ และแสดงผลเมื่อมีเมาส์ไปอยู่ด้านบน นอกจากนั้นยังมีผลต่อการคนหาของ google อีกด้วย

4. การใส่รูปพื้นหลัง
รูปพื้นหลังจะถูกแสดงผลซ้ำกันเองโดยเราแม้ว่ารูปจะรูปจะมีขนาดเล็ก หรือสั้นเพียงใดก็ตาม

5. การจัดตำแหน่งของรูปในตัวอักษร
จะเป็นการจัดตำแหน่งของรูปในตัวอักษร เมื่อเรามีตัวอักษรกับภาพอยู่ด้วยกัน เราจะใช้ Align Attribute เพื่อจัดตำแหน่งของภาพ

6. การจัดตำแหน่งของรูปให้ชิดซ้าย หรือขวา
จะเป็นการจัดรูปของเราให้ชิดซ้ายหรือชิดขวา เมื่อแสดงผล

7. การใช้คำสั่งกำหนดขนาดของรูป
การใส่ขนาดของรูปนั้นเราจะใส่หรือไม่ใส่ก็ได้ ถ้าเราใส่ขนาด การแสดงผลของรูปก็จะเปลี่ยนแปลงตามที่เราใส่ แต่ขนาดของรูปจริงๆจะไม่เปลี่ยนแปลง

8. ทำให้รูปภาพเป็น hyperlink
การทำให้รูปภาพเป็น hyperlink ก็ให้ใส่คำสั่งของ hyperlink ครอบคำสั่งแสดงภาพ เท่านั้นเอง

9. คำสั่งที่ใช้ในการแสดงพิกัดในภาพ
เป็นการแสดงพิกัดที่อยู่ในภาพโดยจะแสดงที่ status bar เป็นพิกัดค่า X,Y ตามจุดที่เมาส์ของเราอยู่ด้านบน คลิกที่ภาพหน้าที่ลิงก์ไปจะแสดงตำแหน่งที่เราคลิกในภาพ โดยจุด 0,0 จะอยู่ที่ด้ายซ้ายบนของภาพ

10. สร้าง hyperlink ด้วยพิกัดในรูปภาพ
ในหัวข้อที่แล้วเราทราบพิกัดจุดของภาพแล้ว ในหัวข้อนี้จะใช้พิกัดจุดในภาพมาสร้าง hyperlink ซึ่งในตัวอย่างจะเห็นว่ามี hyperlink ในรูปภาพอยู่ 2 ที่คือ keyboard , mouse

16.คำสั่งในการกำหนดลักษณะตัวอักษร และแสดงสัญลักษณ์ต่างๆ

คำสั่งในการกำหนดลักษณะตัวอักษร และแสดงสัญลักษณ์ต่างๆ

            ตัวเอียง ตัวหนา หรือแบบอักษรแบบต่างนั้นมีเพื่อให้เราอ่านบทความได้ง่ายขึ้น หรือเป็นการเน้นคำ ซึ่งในบทนี้เราจะมาดูกันว่ามีคำสั่งอะไรบ้าง

1. คำสั่งที่ใช้ในการจัดลักษณะตัวอักษร
ในหัวข้อนี้จะเป็นคำสั่งที่ใช้ในการจัดรูปแบบทั่วไปเช่นตัวเอียง ตัวหนา คำสั่งเราจะแบ่งได้เป็น 2 พวกดังนี้

1.1. แบ่งตามลักษณะที่ปรากฏ เช่นตัวเอียง ตัวหนา

HTML	รูปแบบที่แสดง
<B> <I> <S> <Sub> <Sup> <U>	ตัวอักษรแบบตัวหนา (bold) ตัวอักษรแบบตัวเอน (italic) ตัวอักษรแบบตัวขีดฆ่า (strike) ตัวอักษรแบบตัวห้อย (subscripted) ตัวอักษรแบบตัวยก (superscripted) ตัวอักษรแบบขีดเส้นใต้ (underline)

1.2. แบ่งตามการใช้งาน เช่น ใช้กับคำพูดหรือวลี ใช้กับข้อความที่สำคัญมาก

HTML	รูปแบบที่แสดง
<Em> <Stong> <Ins> <Del> <Code> <Address>	ใช้เน้นข้อความ คำพูดหรือวลี (emphasized) ใช้เน้นข้อความที่สำคัญมากๆ (strong) ใช้เน้นข้อความที่แก้ไขเพิ่มเติม (inserted) ใช้บอกว่าข้อความนี้ถูกลบไปแล้ว (deleted) ใช้บอกว่าข้อความที่เป็นโปรแกรม (computer code) ใช้บอกว่าข้อความที่เป็นที่อยู่ (computer code)

2. คำสั่งที่ทำให้รูปแบบตัวอักษรใน soure code เหมือนกับที่แสดงผล
Pre tag จะมีประโยชน์มากในการที่เราจะแสดงบทความที่มีเนื้อหามาก หรือ คัดลอกเนื้อหาจากที่อื่นมาทำให้เราไม่ต้องขึ้นบรรทัดใหม่ด้วยคำสั่ง br และใช้ในการแสดง source code ได้ดีอีกด้วย

3. คำสั่งแสดงสัญลักษณ์พิเศษต่างๆ

สัญลักษณ์พิเศษบางตัวเช่น เครื่องหมายมากว่า (>) หรือ เครื่องหมายน้อยกว่า (<) ซึ่งเครื่องหมายเหล่านี้ใช้ในภาษา HTML ด้วยทำให้ตัวอักษรที่อยู่ในเครื่องหมายเหล่านี้กลายเป็น Tag หมด หรือเครื่องหมายที่ไม่มีบนคีบอร์ด แต่ถ้าเราต้องการแสดงเครื่องหมายเหล่านี้เราต้องใช้ Entity Name แทน ตามแบบด้านล่าง

Character	Entity	Name
©	©	COPYRIGHT SIGN
®	®	REGISTERED SIGN
™	™	TRADE MARK SIGN
>	>	GREATER-THAN SIGN
<	&lt;	LESS-THAN SIGN
;	&semi;	SEMICOLON
&	&amp;	AMPERSAND
"	&quot;	QUOTATION MARK
#	&num;	NUMBER SIGN
★	&starf;	BLACK STAR
☆	&star;	WHITE STAR
✓	&check;	CHECK MARK
✗	&cross;	BALLOT X
	&nbsp;	SPACE
←	&larr;	LEFTWARDS ARROW
↑	&uarr;	UPWARDS ARROW
→	&rarr;	RIGHTWARDS ARROW
↓	&darr;	DOWNWARDS ARROW
€	&euro;	EURO SIGN
▽	&xdtri;	WHITE DOWN-POINTING TRIANGLE
∑	&sum;	N-ARY SUMMATION
№	&numero;	NUMERO SIGN
℗	&copysr;	SOUND RECORDING COPYRIGHT

15.คำสั่งในการจัดหน้า

คำสั่งในการจัดหน้า

            ในบทความนี้จะเป็นเนื้อหาของคำสั่งที่ใช้ในส่วนของ body section ทั้งหมดโดยจะเป็นคำสั่งในส่วนของการจัดหน้า

1. คำสั่งที่ใช้ในการจัดย่อหน้า
คำสั่ง P นี้จะเพิ่มบรรทัดว่างก่อนและหลังตัวอักษรที่เราพิมพ์ไปโดยอัตโนมัติ ตามที่แสดงในตัวอย่าง

2. คำสั่งที่ใช้ในการขึ้นบรรทัดใหม่การตัดบรรทัดใหม่นั้นปรกติ web browser จะทำการตัดให้อยู่แล้ว แต่การตัดคำของ web browser จะตัดเมื่อแสดงผลไม่ได้ แต่ถ้าเราใส่คำสั้ง <br> เข้าไป web browser จะตัดให้ทันที ซึ่งคุณอาจจำเป็นที่จะต้องตัดคำเป็นบรรทัดสั้นๆเช่น การเขียนกลอนดังตัวอย่าง

3. คำสั่งที่ใช้กับข้อความที่เป็นหัวเรื่อง
คำสั่ง h จะมีทั้งหมด 6 ลำดับด้วยกัน ไล่ตั้งแต่ h1, h2, h3 ,h4, h5, h6 ซึ่งขนาดของ h1 จะใหญ่ที่สุดดังตัวอย่างที่แสดง โดยเราจะใช้กับตัวอักษรที่ต้องการให้เป็นหัวเรื่องเพื่อให้อักษรนั้นโดดเด่นขึ้นมา จะสังเกตุได้ว่าเมื่อใช้ h tag จะตัดตัวอักษรที่ต่อจาก h tag เป็นบรรทัดใหม่อัตโนมัติ

4. คำสั่งที่ใช้ในการขึดเส้นคั่น
คำสั่งที่ใช้ในการขีดเส้นคั่น

5. คำสั่งที่ใช้ในการจัดตัวอักษรชิดซ้าย ชิดขวา หรือกึ่งกลาง
การจัดให้ตัวอักษรให้ชิดซ้าย ขวา หรือกึ่งกลาง เราจะใช้ Attributes ให้รายละเอียดของ tag โดยเราจะใช้ aling เพื่อบอกว่าให้ชิดซ้าย (align = 'left') ชิดขวา (align = 'right') และ จัดกึ่งกลาง (align = 'center')

6. คำสั่งที่ใช้ในการเปลี่ยนสีพื้นหลัง
bgcolor เป็น Attributes อย่างหนึงเหมือนกันที่ใช้กำหนดสี คุณอาจเปลี่ยนจาก สีเขียว(green) เป็น เหลือง(yellow) หรือสีอื่นๆก็ได้

7. การเขียนคำบรรยาย soure code
ในส่วนของคำบรรยาย soure code นั้นจะไม่แสดงที่ web browser เราเขียนเพื่อบรรยายว่า sorce code ส่วนนี้ใช้ทำอะไร เพื่อความสะดวกเมื่อกลับมาแก้ไข sorce code ในภายหลังเพราะเราอาจจำไม่ได้ว่าเราเขียนส่วนนี้ไว้เพื่ออะไร เพราะว่าจริงๆแล้ว soure code ที่เราใช้งานจริงนั้นจะมีมากมายหลายร้อยบรรทัด ถ้าเราไม่เขียนบรรยายไว้ก็ทำให้เสียเวลาในการหาส่วนที่เราต้องการจะแก้ไข

14.ทดลองเขียนเว็บเพจด้วยภาษา HTML

ทดลองเขียนเว็บเพจด้วยภาษา HTML

วิธีการเปิดโปรแกรม

1. เลือก Start >> All Programs >> Accessories >> Notepad

  2. ลองพิมพ์โครงสร้างพื้นฐาน ดังรูป

วิธีการบันทึกเอกสาร HTML

การบันทึกเอกสาร HTML ที่สร้างเสร็จแล้ว จะบันทึกนามสกุลเป็น .html หรือ .htm ซึ่งมีวิธีการบันทึกเอกสาร ดังนี้

1. เมื่อพิมพ์เสร็จแล้วไปที่ File >> Save

## หากเป็นการบันทึกชื่อใหม่ให้เลือก   File >> Save As..

2. บันทึกชื่อไฟล์และตามด้วยนามสกุล .html หรือ .htm   เช่น Test.html

13.เครื่องมือในการสร้างเอกสาร HTML

เครื่องมือในการสร้างเอกสาร HTML 

            ในการสร้างเว็บเพจด้วยภาษา HTML เราจะมีเครื่องมือที่ใช้ในการเขียนและแก้ไขโค้ดเรียกว่า Text Editor ซึ่งเป็นโปรแกรมที่ใช้สำหรับการสร้างและแก้ไขข้อความ ปัจจุบันมีอยู่มากมายที่ใช้สำหรับแก้ไขโค้ด HTML เช่น Notepad, EditPlus, Dreamweaver ฯลฯ เป็นต้น

12.ลักษณะของภาษา HTML

ลักษณะของภาษา HTML 

           องค์ประกอบของภาษา HTML สามารถแบ่งออกได้ 2 ส่วน คือ ส่วนที่เป็นข้อความทั่ว ๆ ไป และส่วนที่เป็นคำสั่งที่ใช้กำหนดรูปแบบข้อความที่แสดง ซึ่งเราเรียกว่า แท็ก (Tag) โดยแท็กคำสั่งของ HTML จะอยู่ในเครื่องหมาย < และ > ซึ่งมีหลักในการเขียนดังนี้

• รูปแบบแท็กจะแยกเป็น 2 ส่วน โดยแต่ละส่วนเริ่มต้นของแท็ก เรียกว่า “แท็กเปิด” และส่วนจบของแท็ก เรียกว่า “แท็กปิด” โดยในส่วนของแท็กปิดต้องมีเครื่องหมาย Slash (/)
• แท็ก (Tag)  เป็นลักษณะเฉพาะของภาษา HTML ใช้ในการระบุรูปแบบคำสั่ง หรือการลงรหัสคำสั่ง HTML ภายในเครื่องหมาย less-than bracket ( < ) และ greater-than bracket ( > ) โดยที่ Tag HTML แบ่งได้ 2 ลักษณะ คือ
  Ø Tag เดี่ยว  เป็น Tag ที่ไม่ต้องมีการปิดรหัส เช่น <br>, <hr> เป็นต้น
  Ø Tag เปิด/ปิด  เป็น Tag ที่ประกอบด้วย Tag เปิด และ Tag ปิด โดย Tag ปิด จะมีเครื่องหมาย slash (/) นำหน้าคำสั่งใน Tag นั้นๆ เช่น <B>…</B>

• ในกรณีต้องการซ้อนแท็กมากกว่า 1 แท็ก เราต้องทำการเปิด ปิดแท็กให้ถูกต้อง โดยการปิดแท็กในสุดก่อน แล้วจึงไล่ปิดแท็กอื่น ๆ ตามลำดับ

• บางแท็กอาจจะไม่ต้องมีแท็กปิดก็ก็ใช้งานได้ เช่น <br>
• เราสามารถพิมพ์เป็นตัวเล็กตัวใหญ่ เช่น <HTML>,<html>,<Html> จะมีความหมายเหมือนกันเพื่อรองรับเอกสารแบบ XHTML
• บางแท็กจะต้องมีตัวกำหนดคุณสมบัติ เรียกว่า แอตทริบิวต์ (Attribute) และค่าที่ถูกกำหนดให้ใช้ในแท็ก (Value) โดยจะเขียนไว้หลังแท็ก

o แอตทริบิวต์ (Attributes)  เป็นส่วนขยายความสามารถของ Tag จะต้องใส่ภายในเครื่องหมาย < > ในส่วน Tag เปิดเท่านั้น Tag คำสั่ง HTML แต่ละคำสั่ง จะมี Attribute แตกต่างกันไป และมีจำนวนไม่เท่ากัน การระบุ Attribute มากกว่า 1 Attribute ให้ใช้ช่องว่างเป็นตัวคั่น

11.การสร้างตาราง

การสร้างตาราง

            การสร้างตาราง ลงใน เว็บเพจมีประโยชน์มหาศาล เราสามารถ ประยุกต์ นำไปใช้ได้หลายอย่าง เพื่อเป็นการเพิ่มสีสันความสวยงามของเว็บเพจ การสร้างตาราง ในเว็บเพจก็ไม่แตกต่างจากการสร้างตารางบนแผ่นกระดาษทั่ว ๆ ไป เราเคยทำตารางอย่างไร ก็สามารถสั่งให้เว็บเพจของเรา ทำอย่างนั้นได้ เช่นกัน ต่างกันที่ว่าในเว็บเพจเราไม่สามารถที่จะ นำเอาปากกา ดินสอ ไม้บรรทัด หรืออุปกรณ์ สำหรับเขียนตารางเข้าไปเขียนบนจอภาพได้ เราใช้ นิ้วมือของเรา เป็นผู้พิมพ์คำสั่ง สำหรับสร้างตารางขึ้นมา
โครงสร้างตาราง
 <TABLE>
 <TR>
<TH>หัวข้อตาราง
<TD>รายละเอียดย่อย
<TR>
<TH>หัวข้อตาราง
<TD>รายละเอียดย่อย
</TABLE>

คำสั่ง	คุณสมบัติ
<TABLE>...</TABLE>	เป็นคำสั่งเปิดปิดตาราง
<TR>...</TR>	ตารางตามแนวนอน เป็นการกำหนดแถวในตาราง
<TH>...</TH>	หัวข้อ ของ ตาราง ข้อความ ที่อยู่ใน คำสั่ง จะถูก จัดให้เป็น ตัวหนา และกึ่งกลาง โดย อัตโนมัติ
<TD>...</TD>	เป็นราย ละเอียด ของตาราง เป็นการ กำหนดจำนวน คอร์ลัม ของตาราง

คุณสมบัติของตาราง
<TABLE>
ALIGN=align-type
BACKGROUND=url
BGCOLOR=color
BORDER=n
CELLPADDING=n
CELLSPACING=n
WIDTH=n
HEIGHT=n

โดย

ALIGN	กำหนด ตำแหน่งตาราง โดย LEFT=กำหนดตารางให้อยู่ทางซ้าย RIGHT=กำหนดตารางให้อยู่ทางขวา
BACKGROUND	ใส่ภาพกรฟิก เป็นพื้นหลังตาราง url เป็น ตำแหน่ง ภาพ
BGCOLOR	กำหนดสีให้ตาราง
BORDER	เส้นขอบ ตาราง n เป็นค่า ความหนาของ ขอบตาราง
BORDERCOLOR	กำหนดสี ให้ขอบตาราง โดยสัมพันธ์กับ BORDER
CELLPADDING	กำหนดระยะ ห่างระหว่าง ตัวหนังสือและเส้นแบ่งตาราง
CELLSPACING	กำหนดขนาดของเส้นตาราง
WIDTH	กำหนดความกว้างของตาราง เป็นตัวเลขและเป็น %
HEIGHT	กำหนดความสูงของตารางเป็นตัวเลขและเป็น %

<TR>
ALIGN=align-type
BACKGROUND=url
BGCOLOR=color
BORDERCOLOR=color
VALIGN=align-type

โดย

ALIGN	กำหนด ตำแหน่งข้อความในแถวตามแนวนอน โดย LEFT=อยู่ทางซ้าย CENTER=อยู่ตรงกลาง RIGHT=อยู่ทางขวา
BACKGROUND	ใส่ภาพกราฟิก เป็นพื้นหลังแถว url เป็น ตำแหน่ง ภาพ
BGCOLOR	กำหนดสีที่เป็นฉากหลังให้แถว
BORDERCOLOR	กำหนดสีให้ขอบตาราง
VALIGN	จัดตำแหน่งข้อมูลในแนวตั้ง โดย TOP = จัดอยู่ข้างบน MIDDLE = จัดอยู่ตรงกลาง BPTTOM = จัดอยู่ข้างล่าง

<TH>
ALIGN=align-type
BACKGROUND=url
BGCOLOR=color
BORDERCOLOR=color
COLSPAN=n
ROWSPAN=n
VALIGN=align-type

โดย

ALIGN	กำหนด ตำแหน่งข้อความในแถวตามแนวนอน โดย LEFT=อยู่ทางซ้าย CENTER=อยู่ตรงกลาง RIGHT=อยู่ทางขวา
BACKGROUND	ใส่ภาพกราฟิก เป็นพื้นหลังแถว url เป็น ตำแหน่ง ภาพ
BGCOLOR	กำหนดสีที่เป็นฉากหลังให้แถว
BORDERCOLOR	กำหนดสีให้ขอบตาราง
COLSPAN	ปรับขนาดของคอร์ลัมให้มีขนาดเป็น เท่า ของความกว้างปกติ สูงสุดเท่ากับจำนวนคอร์ลัมที่มี
ROWSPAN	ปรับขนาดความสูงของแถวในตารางเป็นเท่าของแถวปกติ สูงสุดเท่ากับ จำนวนแถวที่มี
VALIGN	จัดตำแหน่งข้อมูลในแนวตั้ง โดย TOP = จัดอยู่ข้างบน MIDDLE = จัดอยู่ตรงกลาง BPTTOM = จัดอยู่ข้างล่าง

<TD>
ALIGN=align-type
BACKGROUND=url
BGCOLOR=color
BORDERCOLOR=color
COLSPAN=n
ROWSPAN=n
VALIGN=align-type

โดย

ALIGN	กำหนด ตำแหน่งข้อความในแถวตามแนวนอน โดย LEFT           =  อยู่ทางซ้าย CENTER    =  อยู่ตรงกลาง RIGHT         =  อยู่ทางขวา
BACKGROUND	ใส่ภาพกราฟิก เป็นพื้นหลังแถว url เป็น ตำแหน่ง ภาพ
BGCOLOR	กำหนดสีที่เป็นฉากหลังให้แถว
BORDERCOLOR	กำหนดสีให้ขอบตาราง
COLSPAN	ปรับขนาดของคอร์ลัมให้มีขนาดเป็น เท่า ของความกว้างปกติ สูงสุดเท่ากับจำนวนคอร์ลัมที่มี
ROWSPAN	ปรับขนาดความสูงของแถวในตารางเป็นเท่าของแถวปกติ สูงสุดเท่ากับ จำนวนแถวที่มี
VALIGN	จัดตำแหน่งข้อมูลในแนวตั้ง โดย TOP           = จัดอยู่ข้างบน MIDDLE    = จัดอยู่ตรงกลาง BPTTOM   = จัดอยู่ข้างล่าง

ตารางซ้อนตาราง
               มีอยู่ บ่อยครั้งที่เราจำเป็นที่จะต้องสร้างตารางให้มีลักษณะของตารางทับซ้อนกันได้ เพื่อผลทางการแสดงผลข้อมูล
ข้อมูลให้แบบละเอียดของข้อมูลได้มากที่สุด รูปแบบ การเขียน ก็เหมือน กับเมื่อ สร้าง list ซ้อน list นั่นคือ ในส่วน ของ บรรทัด
<TR> จะมี การสร้าง ตาราง ใหม่ <TABLE>.....</TABLE> ก่อนที่ จะมี ตัวเปิด </TR> ในบรรทัด นั้น ๆ เช่น

A	B
C D	E

ซึ่งมีโคดดังนี้
<HTML>
<HEAD><TITLE>Table with and Neted tables</HEAD></TITLE>
<BODY>
<H1>Table with and Neted tables</H1>
<TABLE BORDER WIDTH=50%>
<TR><TD>A</TD><TD>B</TR></TR>
<TR><TD><TABLE BORDER WIDTH=100%>
<TR><TD>C</TD><TD>D</TR></TR>
</TABLE><TD>
<TD>E</TD></TR>
</TABLE >
</BODY>
</HTML>

การใส่รูปภาพลงในตาราง           เรา สามารถ นำรูปภาพ ที่มี อยู่บรรจุ ลงใน ตาราง ที่สร้าง ขึ้นได้ โดย การ บรรจุคำสั่ง สำหรับการ แสดงรูปภาพ <IMG SRC=รูปภาพ>เข้าไป ในส่วน หนึ่งของ ตาราง เช่น

<TABLE BORDER="2" CELLPADDING="5" CELLSPACING="5" WIDTH="60%">
<TR>
<TD VALIGN="bottom" WIDTH="30%"><IMG SRC="Aq.gif" WIDTH="108" HEIGHT="108"></TD>
<TD WIDTH="30%"><IMG SRC="34.gif" WIDTH="20" HEIGHT="20"></TD>
<TR>
<TR>
<TD VALIGN="bottom" WIDTH="30%"><IMG SRC="direc.gif" WIDTH="200" HEIGHT="44"></TD>
<TD WIDTH="30%"><IMG SRC="pencil.gif" WIDTH="50" HEIGHT="50"></TD>
<TR>

</TABLE>

การปรับขนาดรูปภาพให้พอดีกับตาราง
               เราเคยเรียน มาแล้ว ว่า เรานั้น สามารถ ปรับขนาด รูปภาพได้ ในการนำ รูปภาพ ใส่เข้า ไปในตาราง เราก็ กำหนด ขนาดของ รูปภาพ กว้าง ยาว ให้เท่ากัน ทุกด้าน จะทำให้ภาพ ที่แสดง ออกมา มีขนาด เท่ากัน เช่น<TABLE BORDER="2" CELLPADDING="5" CELLSPACING="5" WIDTH="60%">
<TR>
<TD VALIGN="bottom" WIDTH="30%"><IMG SRC="Aq.gif" WIDTH="80" HEIGHT="80"></TD>
<TD WIDTH="30%"><IMG SRC="34.gif" WIDTH="80" HEIGHT="80"></TD>
<TR>
<TR>
<TD VALIGN="bottom" WIDTH="30%"><IMG SRC="direc.gif" WIDTH="80" HEIGHT="80"></TD>
<TD WIDTH="30%"><IMG SRC="pencil.gif" WIDTH="80" HEIGHT="80"></TD>
<TR>
</TABLE>

การเชื่อมโยงข้อมูลในตาราง
                 เหมือนกับ ข้อมูลที่อยู่ นอกตาราง ข้อมูลที่อยู่ในตาราง ก็สามารถ ไปเชื่อม โยงกับข้อ มูล จากแหล่ง ข้อมูล อื่นได้ เช่น เดียวกัน เมื่อเรานำ ส่วนเชื่อม โยงข้อมูล ทั้งตัว อักษร รูปภาพ หรือผสมกัน ก็ได้ มาบรรจุในตารางเท่านั้น เช่น<table border=2 cellpadding=5 cellspacing=5 width="50%">
<tbody>
<tr>
<td width="50%"><a href="../index.asp"><img height=20 src="34.gif" width=20 border=0></a></td>
<td width="50%"><a href="../index.asp">กลับไปหน้าแรก</a></td>
</tr>
</tbody>
</table>