การแทรกตาราง

     โครงสร้างตาราง
<TABLE>
<TR>
<TH>หัวข้อตาราง
<TD>รายละเอียดย่อย
<TR>
<TH>หัวข้อตาราง
<TD>รายละเอียดย่อย
</TABLE> 

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

*  แต่ตารางนี้ไม่มีความหนา ดังนั้นจึงต้องเพิ่มความหนาให้ โดยการเติม border=x ใน
<TABLE...> (เมื่อ x มีค่าความหนาตั้งแต่ 0 เป็นต้นไป ยิ่งเลขมาก ยิ่งหนามาก)

ตัวอย่าง

ผลลัพธ์

     ถ้าเราอยากให้เส้นขอบตารางมีสีสันขึ้นมา ต้องเพิ่ม bordercolor="x" ใน
<TABLE...> (x เป็นชื่อสี หรือโค้ดสี 6 หลัก)

ตัวอย่าง

ผลลัพธ์

     ถ้าเราต้องการให้ตารางอยู๋ด้านใดด้านหนึ่งของเวพ ต้องเพิ่ม align="x" ใน 
<TABLE...> (ถ้าจะให้อยู่ด้านขวา ก็เปลี่ยน x เป็น right ถ้าจะให้อยู่ตรงกลาง ก็ให้เปลี่ยนเป็น center)

ตัวอย่าง

ผลลัพธ์

     ถ้าเราต้องการเพิ่มขนาดของตารางมี 2 แบบดังนี้

1. เพิ่ม height=x (x เป็นตัวเลข)

       -ใน <TABLE...> เพื่อกำหนดขนาดความสูงทั้งตาราง

       -ใน <TD...> เพื่อกำหนดขนาดความสูงแฉพราะช่องตาราง

2. เพิ่ม width=x (x เป็นตัวเลข)

       -ใน <TABLE...> เพื่อกำหนดขนาดความกว้างทั้งตาราง

       -ใน <TD...> เพื่อกำหนดขนาดความสูงแฉพราะช่องตาราง 

    

ตัวอย่าง การกำหนดใน <TABLE...>

ผลลัพธ์

ตัวอย่าง การกำหนดใน <TD...>

ผลลัพธ์

     ถ้าเราต้องการรวมคอลัมน์เข้าด้วยกันเป็นเซลล์เดียวมี 2 แบบดังนี้

1. เพิ่ม colspan=x (x เป็นตัวเลข) ใน <TD...> เพื่อรวมคอลัมน์ในแนวนอน

2. เพิ่ม rowspan=x (x เป็นตัวเลข) ใน <TD...> เพื่อรวมคอลัมน์ในแนวตั้ง

ตัวอย่าง การกำหนด colspan=x

ผลลัพธ์

ตัวอย่าง การกำหนด rowspan=x

ผลลัพธ์

แหล่งที่มา : http://www.bcoms.net/html/10.asp

ลงวันที่ : 12 กันยายน 2555

ขอบคุณครับ :))