บทที่ 4 การสร้างตาราง ในการสร้างตารางนั้นเราจะใช้คำสั่ง < TABLE > .... < /TABLE > โดยในส่วนของ .... นั้นจะต้องมี คำสั่งย่อยคือ  < TR > .... < /TR > ซึ่งจะเป็นคำสั่งในการกำหนดแถวในตาราง ( ROW ) และใน .... ของคำสั่ง TR นั้นจะต้องมีคำสั่งย่อย  คือ < TD > .... < /TD > ซึ่งจะเป็นคำสั่งใน การกำหนดคอลัมน์ (COL) และ .... ภายในคำสั่ง TD นั้นใช้บรรจุข้อมูลภายในตาราง ของแต่ละคอลัมน์ ( หรือแสดงข้อความ นั่นเอง )  เช่น ถ้าต้องการสร้างตารางที่มี 2 แถว 2 คอลัมน์ 
ตัวอย่างโครงสร้างของ HTML ที่สมบูรณ์ 
< HTML> 
< HEAD > < TITLE >ตาราง < /TITLE > < /HEAD > 
< BODY > 
< TABLE > 
< TR > < TD > แถว 1 คอลัมน์ 1 < /TD > < TD > แถว 1 คอลัมน์ 2 < /TD > < /TR > 
< TR > < TD > แถว 2 คอลัมน์ 1 < /TD > < TD > แถว 2 คอลัมน์ 2 < /TD > < /TR > 
 

 

แถว 1 คอลัมน์ 1	แถว 1 คอลัมน์ 2
แถว 2 คอลัมน์ 1	แถว 2 คอลัมน์ 2

จากชุดคำสั่งด้านบนจะเห็นได้ว่าจะไม่เส้นของตาราง แต่ถ้าต้องการจะใส่เส้นตารางเราจะเพิ่ม BORDER=ตัวเลขความหนาของเส้นตาราง ไว้ในคำสั่ง TABLE เช่น < TABLE BORDER=1 > ตัวอย่าง ถ้าต้องการสร้างตารางที่มี 3 แถว 2 คอลัมน์ 
ตัวอย่างโครงสร้างของ HTML ที่สมบูรณ์ 
< HTML> 
< HEAD > < TITLE >ตาราง < /TITLE > < /HEAD > 
< BODY > 
< TABLE  BODER=1 > 
< TR > < TD > แถว 1 คอลัมน์ 1 < /TD > < TD > แถว 1 คอลัมน์ 2 < /TD > < /TR > 
< TR > < TD > แถว 2 คอลัมน์ 1 < /TD > < TD > แถว 2 คอลัมน์ 2 < /TD > < /TR > 
< TR > < TD > แถว 3 คอลัมน์ 1 < /TD > < TD > แถว 3 คอลัมน์ 2 < /TD > < /TR > 
 
 
 

แถว 1 คอลัมน์ 1	แถว 1 คอลัมน์ 2
แถว 2 คอลัมน์ 1	แถว 2 คอลัมน์ 2
แถว 3 คอลัมน์ 1	แถว 3 คอลัมน์ 2

การเพิ่มขนาดของพื้นที่ในแต่ละช่องของตารางสามารถเพิ่ม CELLPADDING=ตัวเลขพื้นที่ที่ต้องการ ใส่ไว้ใน จากตัวอย่างข้างบนถ้าต้องการเพิ่มพื้นที่ในการแสดงผล
ตัวอย่างโครงสร้างของ HTML ที่สมบูรณ์ 
< HTML> 
< HEAD > < TITLE >ตาราง < /TITLE > < /HEAD > 
< BODY > 
< TABLE  BODER=1 CELLPADDING=8 > 
< TR > < TD > แถว 1 คอลัมน์ 1 < /TD > < TD > แถว 1 คอลัมน์ 2 < /TD > < /TR > 
< TR > < TD > แถว 2 คอลัมน์ 1 < /TD > < TD > แถว 2 คอลัมน์ 2 < /TD > < /TR > 
< TR > < TD > แถว 3 คอลัมน์ 1 < /TD > < TD > แถว 3 คอลัมน์ 2 < /TD > < /TR > 
 
 
 

แถว 1 คอลัมน์ 1	แถว 1 คอลัมน์ 2
แถว 2 คอลัมน์ 1	แถว 2 คอลัมน์ 2
แถว 3 คอลัมน์ 1	แถว 3 คอลัมน์ 2

การเพิ่มขนาดของเส้นของตารางสามารถเพิ่ม CELLSPACING=ตัวเลขขนาดเส้นที่ที่ต้องการ ใส่ไว้ใน จากตัวอย่างข้างบนถ้าต้องการเพิ่มพื้นที่ในการแสดงผล
ตัวอย่างโครงสร้างของ HTML ที่สมบูรณ์ 
< HTML> 
< HEAD > < TITLE >ตาราง < /TITLE > < /HEAD > 
< BODY > 
< TABLE  BODER=1 CELLSPACING=8 > 
< TR > < TD > แถว 1 คอลัมน์ 1 < /TD > < TD > แถว 1 คอลัมน์ 2 < /TD > < /TR > 
< TR > < TD > แถว 2 คอลัมน์ 1 < /TD > < TD > แถว 2 คอลัมน์ 2 < /TD > < /TR > 
< TR > < TD > แถว 3 คอลัมน์ 1 < /TD > < TD > แถว 3 คอลัมน์ 2 < /TD > < /TR > 
 
 
 

แถว 1 คอลัมน์ 1	แถว 1 คอลัมน์ 2
แถว 1 คอลัมน์ 2	แถว 2 คอลัมน์ 2
แถว 1 คอลัมน์ 3	แถว 3 คอลัมน์ 2

การเพิ่มความกว้างของตารางสามารถเพิ่ม WIDTH=ตัวเลขเปอร์เซนต์ขนาดความกว้างของตาราง ใส่ไว้ใน จากตัวอย่างข้างบนถ้าต้องการเพิ่มความกว้างของตาราง เช่น WIDTH=80%  (กว้าง 80% ของหน้าจอ)
ตัวอย่างโครงสร้างของ HTML ที่สมบูรณ์ 
< HTML> 
< HEAD > < TITLE >ตาราง < /TITLE > < /HEAD > 
< BODY > 
< TABLE  BODER=1 WIDTH=80% > 
< TR > < TD > แถว 1 คอลัมน์ 1 < /TD > < TD > แถว 1 คอลัมน์ 2 < /TD > < /TR > 
< TR > < TD > แถว 2 คอลัมน์ 1 < /TD > < TD > แถว 2 คอลัมน์ 2 < /TD > < /TR > 
< TR > < TD > แถว 3 คอลัมน์ 1 < /TD > < TD > แถว 3 คอลัมน์ 2 < /TD > < /TR > 
 
 
 

แถว 1 คอลัมน์ 1	แถว 1 คอลัมน์ 2
แถว 2 คอลัมน์ 1	แถว 2 คอลัมน์ 2
แถว 3 คอลัมน์ 1	แถว 3 คอลัมน์ 2

การใส่รูปภาพลงในตารางสามารถทำได้โดยจากการที่จะบรรจุมูลลงก็เปลี่ยนมาเป็นคำสั่งแสดงรูปภาพ แทน
ตัวอย่างโครงสร้างของ HTML ที่สมบูรณ์ 
< HTML> 
< HEAD > < TITLE >ตาราง < /TITLE > < /HEAD > 
< BODY > 
< TABLE  BODER=1> 
< TR > < TD > < IMG SRC="ban_1.jpg" >< /TD > < TD > แถว 1 คอลัมน์ 2 < /TD > < /TR > 
 
 
 

แถว 1 คอลัมน์ 2

[ Intro ] [ บทที่ 1 ] [ บทที่ 2 ] [ บทที่ 3 ] [ บทที่ 4 ]