marychagelsathitchula.blogspot.com: ภาษา html

วันเสาร์ที่ 2 พฤศจิกายน พ.ศ. 2556

ภาษา html

HTML ย่อมาจาก Hyper Text Makeup Language เป็นภาษาที่ใช้ในการเขียน เวบเพจ ซึ่งเป็นภาษาพื้นฐานในการเขียนเวบเพจ ไม่ว่าเราจะไปดู Source Code ใน เวบเพจใดSource Code ที่เราเห็นจะเป็นภาษา HTMLทั้งสิ้น ไม่ว่าเวบเพจนั้นจะเขียนหรือสร้างจากโปรแกรมใด ทั้งนี้เนื่องจาก HTML เป็นภาษากลางในการติดต่อ

ในปัจจุบัน ได้มีโปรแกรมที่ใช้ในการเขียนเวบเพจมากมาย ซึ่งไม่จำเป็นที่จะต้องมีพื้นฐานเกี่ยวกับภาษา HTML ก็สามารถสร้างเวบเพจได้ โปรแกรมที่ใช้ในการสร้าง เช่น Macromedia Dreamwaver , Flash 4 , FrontPage เป็นต้น

ในการเขียนภาษา HTML Notepad Word Pad Save .HTML Internet Explore Netscape Navigator <HTML>…</HTML>, <HEAD>…</HEAD>, <TITLE>…</TITLE>, <BODY>…</BODY> เหล่านี้เป็นองค์ประกอบหลักในเวบเพจแต่ละหน้า ดังตัวอย่างต่อไปนี้

ฟอร์มหลักในการเขียนภาษา HTML

ซึ่งจะสังเกตได้ว่า ในทุกคำสั่งเมื่อจบคำสั่งจะต้องมี </> เสมอ

เป็นผลทีได้จากการแสดงใน Internet Explore จะเห็นว่า ข้อความที่เขียนในคำสั่ง <TITLE>…</TITLE> จะแสดงอยู่ใน Title Bar และ จะแสดงเส้นปะ ซึ่งเป็นส่วนที่อยู่ระหว่างคำสั่ง <BODY>…</BODY> ซึ่งจะกล่าวถึงรายละเอียดของคำสั่งเหล่านี้ในหัวข้อต่อไปนี้

บทที่ 1

คำสั่งเบื้องต้น

คำสั่งเบื้องต้นที่จะกล่าวถึง มีทั้งหมด 4 คำสั่ง ดังนี้

คำสั่งเริ่มต้น

รูปแบบคำสั่ง <HTML>…</HTML>

คำสั่ง <HTML> เป็นคำสั่งเริ่มต้นในการเขียนเวบเพจด้วยภาษา HTML และเมื่อสิ้นสุดโปรแกรมจะใช้ </HTML>

ส่วนหัวของโปรแกรม

รูปแบบคำสั่ง <HEAD> …</HEAD>

คำสั่ง <HEAD> เป็นคำสั่งที่ใช้กำหนดข้อความที่เป็นชื่อเรื่อง และภายในคำสั่งนี้จะมีคำสั่งย่อยอีกคำสั่งหนึ่ง คือ <TITLE> และคำสั่งปิดท้ายก็คือ </HEAD> และ </TITLE>

กำหนดข้อความในส่วนของ Title bar

รูปแบบคำสั่ง <TITLE> …</TITLE>

คำสั่ง <TITLE> เป็นคำสั่งที่ใช้กำหนดข้อความที่จะแสดงในส่วนของ Title Bar และจะปิดท้ายด้วย </TITLE>

ส่วนของเนื้อหา

รูปแบบคำสั่ง <BODY> …</BODY>

คำสั่ง <BODY> เป็นคำสั่งที่ใช้แสดงผลตามที่เราต้องการ โดยสิ่งที่เราต้องการที่จะแสดงผล จะอยู่ในส่วนของ <BODY> และจะปิดท้ายโปรแกรมด้วย </BODY> โดยคำสั่งต่างๆ ที่จะใช้ในส่วนของการแสดงผลจะกล่าวในตอนต่อไป

บทที่ 2

คำสั่งพื้นฐาน

ในที่นี้จะกล่าวถึงคำสั่ง การขึ้นบรรทัดใหม่ <BR>, การย่อหน้าใหม่ <P> และ เส้นคั่นบรรทัด <HR> ในภาษา HTML เป็นคำสั่งที่ช่วยในการจัดรูปแบบข้อความที่ต้องการแสดงในเวบเพจ

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

คำสั่ง <BR> เป็นคำสั่งที่ใช้ในการขึ้นบรรทัดใหม่ โดยจะวางคำสั่งนี้ในตำแหน่งสุดท้ายของประโยคที่ต้องการให้แสดงผลในบรรทัดใหม่

รูปแบบคำสั่ง <BR>

ตัวอย่าง

ผลที่ได้

การย่อหน้าใหม่ <P>

คำสั่ง <P> เป็นคำสั่งที่ใช้ในการขึ้นย่อหน้าใหม่ โดยการเว้นบรรทัด 1 บรรทัด แล้วขึ้นบรรทัดใหม่ โดยจะวางคำสั่ง <P> ไว้ข้างหน้าประโยคที่เราต้องการย่อหน้าใหม่ หรือท้ายสุดของประโยคที่เราไม่ต้องการให้อยู่ในบรรทัดเดียวกัน และจะปิดท้ายประโยคด้วยคำสั่ง </P> ซึ่งดูได้จากตัวอย่าง

รูปแบบคำสั่ง <P> ….</P>

ตัวอย่าง

ผลที่ได้

เส้นคั่นบรรทัดใหม่ <HR>

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

รูปแบบคำสั่ง <HR>

ตัวอย่าง

ผลที่ได้

เราสามารถกำหนดความยาวของเส้นคั่น, กำหนดความหนาของเส้นคั่น และกำหนดตำแหน่งของเส้นคั่นบรรทัด ได้โดยกำหนดความยาวเป็นเปอร์เซ็นต์ หรือตัวเลข ตามรูปแบบคำสั่งและตัวอย่าง ดังต่อไปนี้

การกำหนดความยาวของเส้นคั่น

รูปแบบคำสั่ง <HR WIDTH = “number / percentage”>

การกำหนดความหนาของเส้นคั่น

รูปแบบคำสั่ง <HR SIZE = “number ”>

การกำหนดตำแหน่งของเส้นคั่นบรรทัด

รูปแบบคำสั่ง <HR ALIGN = “LEFT/RIGHT/CENTER”>

หมายเหตุ ซึ่งในตัวอย่างจะเป็นการใช้คำสั่งทั้ง 3 คำสั่ง ดังนี้

ตัวอย่าง

ผลที่ได้

บทที่ 4

คำสั่งเกี่ยวกับคุณสมบัติของตัวอักษร

ในส่วนนี้จะกล่าวถึงคุณสมบัติของตัวอักษร ไม่ว่าจะเป็นขนาด สี ตำแหน่ง ของตัวอักษรที่เราต้องการให้แสดงในเวบเพจของเรา

การกำหนดขนาดของ Header

คำสั่งที่เราจะใช้คือ <Hx> ซึ่งเป็นคำสั่งที่กำหนดลักษณะและขนาดของตัวอักษร โดยในคำสั่งนี้จะมีระดับต่างกัน 6 ระดับ คือ ระดับ 1 จะมีขนาดใหญ่ที่สุด และจะเล็กลงไปเรื่อยๆ ถึงระดับที่ 6 ซึ่งมีขนาดเล็กที่สุดโดยเมื่อสิ้นสุดประโยคหรือบรรทัดที่เราต้องการต้องลงท้ายด้วย </Hx>

รูปแบบคำสั่ง <Hx> …</Hx> x คือ ระดับ 1 – 6

ตัวอย่าง

ผลที่ได้

การกำหนดขนาดของตัวอักษร <FONT SIZE>

การกำหนดขนาดตัวอักษร ในที่จะกล่าวถึงเพียงคำสั่งเดียวที่นิยมใช้กัน เพื่อป้องกันการสับสน คำสั่ง <FONT SIZE> ซึ่งจะมีระดับขนาดตัวอักษรตั้งแต่ -7 ถึง +7 ซึ่งตัวเลขยิ่งมากขนาดยิ่งใหญ่ และเมื่อจบประโยคหรือข้อความที่เราต้องการจะต้องจบด้วย </FONT>

รูปแบบคำสั่ง <FONT SIZE = “number (-7 ถึง +7)” > …. </FONT>

ตัวอย่าง

ผลที่ได้

การกำหนดรูปแบบตัวอักษร

เป็นการกำหนดให้ตัวอักษรให้มีลักษณะเป็นตัวหนา (Bold text), ตัวเอียง (Italic text) และ ตัวขีดเส้นใต้ (Underlined text) ซึ่งมีรูปแบบคำสั่งดังนี้

การกำหนดตัวอักษรให้เป็นตัวหนา

รูปแบบคำสั่ง <B> …</B>

การกำหนดตัวอักษรให้เป็นตัวเอียง

รูปแบบคำสั่ง <I> …</I>

การกำหนดตัวอักษรให้เป็นตัวขีดเส้นใต้

รูปแบบคำสั่ง <U> …</U>

ตัวอย่างต่อไปนี้จะเป็นรวมคำสั่งทั้ง 3 ไว้ในตัวอย่างเดียว

ตัวอย่าง

ผลที่ได้

การกำหนดชนิดตัวอักษร

คำสั่ง <FONT FACE> เป็นการกำหนดชนิดของตัวอักษรตามที่เราต้องการ ชื่อชนิดของตัวอักษรจะใช้ตามชื่อตามโปรแกรม Word

รูปแบบคำสั่ง <FONT FACE = “ชนิดของตัวอักษรที่เราต้องการ”>

ตัวอย่าง

ผลที่ได้

การกำหนดตำแหน่งข้อความ

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

รูปแบบคำสั่ง <P ALIGN = “LIEFT/CENTER/RIGHT”>….</P>

ตัวอย่าง

ผลที่ได้

บทที่ 5

คำสั่งที่เกี่ยวกับการกำหนดสี

คำสั่ง <BODY BGCOLOR> เป็นคำสั่งที่ใช้กำหนดสีให้กับพื้นหลังของเวบเพจ และคำสั่ง

<BODY TEXT> เป็นคำสั่งที่ใช้กำหนดสีให้กับข้อความเราที่ต้องการ ซึ่งเป็นการเพิ่มความสวยงามให้กับเวบเพจ ซึ่งคำสั่งทั้งสอง จะกล่าวถึงรายละเอียดต่อไป

การกำหนดสีให้กับพื้นหลัง

คำสั่ง <BODY BGCOLOR> เป็นคำสั่งที่ใช้กำหนดสีให้กับพื้นหลัง ซึ่งเราจะวางคำสั่งไว้ระหว่าง </HEAD> กับ <BODY> มีรูปแบบคำสั่ง และตัวอย่าง ดังต่อไปนี้

รูปแบบคำสั่ง

ตัวอย่าง

ผลที่ได้

การกำหนดสีให้กับข้อความ

คำสั่ง <BODY TEXT> เป็นคำสั่งหนึ่งที่ใช้กำหนดสีให้กับข้อความ ซึ่งสามารถวางคำสั่งไว้ในส่วนระหว่าง </HEAD> กับ <BODY> หรือวางคำสั่งไว้หน้าข้อความที่เราต้องการ

รูปแบบคำสั่ง

ตัวอย่างที่ 1

ผลที่ได้

ตัวอย่างที่ 2

ผลที่ได้

บทที่ 6

การแทรกรูปภาพในเวบเพจ

รูปที่ภาพใช้แทรกจะมีรูปภาพไฟล์ GIF และ JPEG ไม่ว่าจะเป็นภาพเคลื่อนไหวต่างๆ หรือภาพที่ตกแต่งเพื่อความงาม ซึ่งสามารถหาได้จาก Internet ซึ่งรูปภาพที่เราจะใช้ในการกำหนดเป็นพื้นหลัง หรือแทรกเข้าไปในเวบเพจของเรา ต้องอยู่ใน Folder เดียวกันกับไฟล์ของเวบเพจที่เราทำ ไม่เช่นนั้นรูปจะไม่ปรากฏเวลาที่แสดงใน Internet Explore

การกำหนดพื้นหลังด้วยรูปภาพ

คำสั่ง <BODY BACKGROUND> เป็นคำสั่งที่ใช้กำหนดพื้นหลังให้เป็นรูปภาพ แทนการกำหนดให้เป็นสี ซึ่งภาพที่เห็นจะเป็นภาพเดียวแต่มีหลายรูปจนเต็มหน้าต่าง Internet Explore ซึ่งขนาดภาพจะเท่ากับภาพจริงที่เรา Save มา

รูปแบบคำสั่ง

ตัวอย่าง

ผลที่ได้

การแทรกรูปในเวบเพจ

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

รูปแบบคำสั่ง

ตัวอย่าง

ผลที่ได้

การกำหนดตำแหน่งรูปภาพ

เราสามารถกำหนดตำแหน่งของรูปภาพได้ โดยให้ภาพอยู่ด้านซ้าย ขวา ของ จอภาพ

รูปแบบคำสั่ง

ตัวอย่าง

ผลที่ได้

การกำหนดตำแหน่งข้อความ

เราสามารถแทรกรูปและใส่คำอธิบายรูปได้ โดยเราสามารถกำหนดตำแหน่งของข้อความให้อยู่ บนสุดของรูป, กึ่งกลางของรูป และล่างสุดของรูปได้

รูปแบบคำสั่ง

<IMG SRC = “Image” ALIGN = “TOP” หรือ “MIDDLE” หรือ “BOTTOM”

ตัวอย่าง

ผลที่ได้

การปรับขนาดรูป

เราสามารถปรับขนาดของรูปภาพให้เล็กจากภาพจริงได้ โดยยังความสวยงามและชัดเจนเหมือนภาพขนาดใหญ่ได้

รูปแบบคำสั่ง <IMG SRC = “Image” WIDTH = X %>

ตัวอย่าง

ผลที่ได้

บทที่ 7

การกำหนดลิงค์ต่างๆ

ในการกำหนดลิงค์ชนิดต่างๆ นั้นเราจำเป็นต้องใช้แท็ก <A> และ </A> ซึ่งภายในแท็ก <A> นี้จะประกอบไปด้วย แอตทริบิวต์ต่างๆ เช่น แอตทริบิวต์ HREF , TITLE , TARGET เป็นต้น

การลิงค์โดยใช้ข้อความ

รูปแบบ <A HREF = “ชื่อไฟล์ HTML ที่เราต้องการให้บราวเซอร์อ่านเพื่อที่จะลิงค์ไป” “TITLE = ข้อความเพื่อใช้อธิบายเว็บเพจ” TARGET = “ชื่อเฟรม” > ข้อความที่เป็นตัวลิงค์ </A>

ตัวอย่าง

ผลที่ได้

การลิงค์โดยใช้รูป

การลิงค์โดยใช้รูปนั้น เราจำเป็นต้องใช้แท็ก <A> และ </A> และแท็ก <IMG> ซึ่งเป็นแท็กที่ใช้วางรูปในเว็บเพจ

รูปแบบ

<A HREF = “ชื่อไฟล์ HTML ที่เราต้องการให้บราวเซอร์อ่านเพื่อที่จะลิงค์ไป”

“TITLE = ข้อความเพื่อใช้อธิบายเว็บเพจ” TARGET = “ชื่อเฟรม” >

<IMG SRC = “ชื่อไฟล์รูปภาพ”

ALIGH = “TOP|MIDDLE|BOTTOM|LEFT|RIGHT” WIDTH = “ความกว้างของรูปภาพมีหน่วยเป็นพิกเซล” HEIGHT = “ความสูงของรูปภาพมีหน่วยเป็นพิกเซล”> </A>

ตัวอย่าง

ผลที่ได้

การลิงค์เพื่อส่ง E – mail

จะมีการใช้แท็ก <A> และ </A> คล้ายกับการลิงค์โดยใช้ข้อความเป็นการลิงค์โดยใช้รูปแตกต่างกันเพียงแค่ส่วนของแอตทริบิวต์ HREF = “mailto : ตามด้วย e – mail address”เมื่อคลิกที่ข้อความหรือรูปที่ลิงค์ไว้จะเรียกโปรแกรมที่ทำหน้าที่ส่งจดหมายขึ้นมาทำงาน เช่น Microsoft Outlook เป็นต้น

ตัวอย่าง

ผลที่ได้

การลิงค์ไปยังโฮมเพจอื่น

จะมีการใช้แท็ก <A> และ </A> คล้ายกับการลิงค์โดยใช้ข้อความหรือการลิงค์โดยใช้รูปแตกต่างกันเพียงแค่ส่วนของแอตทริบิวต์ HREF = “ตามด้วย URL”

URL นี้จะประกอบไปด้วย 3 ส่วนด้วยกัน คือ

Protocol ://server_name/file_name

1. protocol ใช้ระบุวิธีการที่เซิร์ฟเวอร์จะส่งข้อมูลให้กับบราวเซอร์ซึ่งปกติจะเป็น http

2. server_name คือ ชื่อของเครื่องที่จะใช้ติดต่อขอข้อมูล

3. file_name คือ ชื่อไฟล์และตำแหน่งที่ต้องการเรียกใช้ โดยแต่ละไดเร็คทอรีจะต้องคั่นด้วยเครื่องหมาย /

ตัวอย่าง

ผลที่ได้

การลิงค์ภายในเอกสารเดียวกัน

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

การกำหนดชื่อเรื่องทำได้โดยการใช้แอตทริบิวต์ NAME ภายในแท็ก <A> โดยการตั้งชื่อเรื่องนี้ไม่ควรจะตั้งชื่อซ้ำกัน ดังรูปแบบนี้

<A NAME = “ชื่อที่ใช้ในการลิงค์”> ข้อความที่เป็นตัวลิงค์ </A>

การอ้างถึงชื่อเรื่องจะใช้แท็ก <A> เช่นกัน แต่ภายในแอตทริบิวต์ HREF จะต้องกำหนดดังรูปแบบนี้

<A HREF = “# ตามด้วยชื่อเรื่องที่กำหนดไว้ในแอตทริบิวต์ NAME”> ข้อความที่เป็นตัวลิงค์ </A>

ตัวอย่าง

ผลที่ได้

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

บทที่ 8

การสร้างข้อมูลแบบรายการ

เรียงรายการแบบมีหมายเลขกำกับ (Ordered List)

ใช้แท็ก <OL> และ </OL> เพื่อบอกบราวเซอร์ว่าข้อความที่อยู่ระหว่างแท็กสองแท็กนี้ เป็นหัวเรื่องและรายการย่อยแบบมีหมายเลข โดยภายในแท็กนี้จะมีแท็กที่เป็นส่วนประกอบภายในอีก คือ แท็ก <LH> ซึ่งใช้กำหนดหัวเรื่องหรือรายละเอียดของรายการย่อย และแท็ก <LI> ซึ่งใช้สำหรับกำหนดรายการแต่ละรายการย่อยนั่นเอง

รูปแบบคำสั่ง

<OL>

<LH> ข้อความที่เป็นหัวเรื่องหรือรายละเอียดของรายการย่อย

<LI> ข้อความที่เป็นรายการย่อยแต่ละรายการ

</OL>

ตัวอย่าง

ผลที่ได้

เรียงรายการแบบใช้สัญลักษณ์กำกับ (Unordered List)

ใช้แท็ก <UL> และ </UL>เพื่อบอกบราวเซอร์ว่าข้อความที่อยู่ระหว่างแท็กสองแท็กนี้เป็นหัวเรื่องและรายการย่อยแบบใช้สัญลักษณ์ ซึ่งลักษณะการใช้งานของแท็กนี้จะคล้ายกับแท็ก <OL> และ </OL> คือ ภายในจะประกอบด้วยแท็ก <LH> และ <LI> เหมือนกัน แต่จะมีแอตทริบิวต์ TYPE สำหรับกำหนดรูปแบบของสัญลักษณ์ที่จะใช้ ซึ่งจะมีค่าที่เป็นไปได้ 3 แบบด้วยกัน คือ circle (¡ ) , square (■) , disc (•)

รูปแบบคำสั่ง

<LH> ข้อความที่เป็นหัวเรื่องหรือรายละเอียดของรายการย่อย

<LI> ข้อความที่เป็นรายการย่อยแต่ละรายการ

</UL>

ตัวอย่าง

ผลที่ได้

รายการย่อยแบบใช้นิยาม (Definition List)

รายการย่อยแบบใช้นิยามนี้จะใช้แท็ก <DL> และ </DL> เพื่อบอกว่ารายการย่อยนี้มีลักษณะเป็นแบบใช้นิยาม โดยภายในแท็กนี้จะมีแท็กที่เป็นส่วนประกอบภายในอีก คือ แท็ก <DT> เพื่อบอกว่าส่วนนี้เป็นหัวเรื่องของรายการย่อย และแท็ก <DD> เพื่อบอกว่าส่วนนี้เป็นรายละเอียดในรายการย่อยนั้น

รูปแบบคำสั่ง

<DL>

<DT> ข้อความที่เป็นคำนิยาม

<DD> ข้อความที่เป็นคำอธิบาย

</DL>

ตัวอย่าง

ผลที่ได้

ข้อความที่เป็นคำนิยาม (ข้อความที่ใช้แท็ก <DT> ) จะอยู่ชิดด้านซ้าย และข้อความที่เป็นคำอธิบาย (ข้อความที่ใช้แท็ก <DD> ) จะถูกจัดห่างจากขอบด้านซ้ายเป็นระยะห่างพอประมาณ

เรียงรายการแบบใช้รูปภาพกำกับ

จะใช้แท็กด้วยกัน 3 แท็ก คือ แท็ก <UL> , แท็ก <IMG> เพื่อใช้แสดงรูปภาพ และแท็ก <BR> สำหรับขึ้นบรรทัดใหม่

รูปแบบคำสั่ง

<UL>

<IMG SRC = “ชื่อไฟล์และสถานที่เก็บรูปภาพ”> ข้อความที่ต้องการ แสดงเป็นรายการย่อย <BR>

</UL>

ตัวอย่าง

ผลที่ได้

รายการย่อยซ้อนรายการย่อย

ในบางกรณีเวปเพจอาจจะต้องการมีรายการย่อยซ้อนกันเพื่ออธิบายรายละเอียดต่างๆ ได้ ดังตัวอย่างต่อไปนี้จะเป็นรายการย่อยซ้อนรายการย่อยโดยใช้แท็ก <DL> และ <OL>

รูปแบบคำสั่ง

<DL>

<DT> ข้อความที่เป็นคำนิยาม

<DD> ข้อความที่เป็นคำอธิบาย

<OL>

<LH> ข้อความที่เป็นหัวเรื่องหรือรายละเอียดของรายการย่อย

<LI> ข้อความที่เป็นรายการย่อยแต่ละรายการ

</OL>

</DL>

ตัวอย่าง

ผลที่ได้

บทที่ 9

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

ในการสร้างตารางจะมีแท็กที่สำคัญอยู่หลายแท็ก ดังนี้

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

การสร้างตารางแบบง่ายๆ

รูปแบบคำสั่ง <TABLE BORDER = “ขนาดของเส้นกรอบมีหน่วยเป็นพิกเซล”>

<TR>

<TH> ข้อความที่เป็นหัวเรื่องของแต่ละช่องข้อมูล </TH>

</TR>

………..

<TR>

<TD> ข้อความที่เป็นข้อมูลของแต่ละช่องข้อมูล </TD>

</TR>

</TABLE>

ตัวอย่าง

ผลที่ได้

จัดตำแหน่งของตาราง

สามารถจัดตำแหน่งของตารางได้โดยการกำหนดแอตทริบิวต์ ALIGN อยู่ภายในแท็ก<TABLE> โดยสามารถกำหนดแอตทริบิวต์ ALIGH ให้เป็น center , left หรือ right ได้อย่างใดอย่างหนึ่ง ดังตัวอย่าง