การแทรกตาราง
การแทรกตาราง
การนำเสนอข้อมูลด้วยตาราง จะทำให้เกิดความเข้าใจได้ง่ายขึ้น สามารถเปรียบเทียบความแตกต่าง ๆ ของข้อมูลได้อย่างชัดเจนและตารางยังสามารถนำมาช่วยในการจัดรูปแบบของจอภาพบนเว็บเพจได้อีกด้วย เพื่อแบ่งแยกหน้าเว็บเพจออกเป็น ส่วน ๆ เกิดความเป็นระเบียบและความสวยงามมากขึ้น
ส่วนประกอบของตาราง
ส่วนประกอบของตาราง
1.เซลล์ (cell)
2. แถว (row)
3.คอลัมน์ (column)
Tag ที่เกี่ยวข้องกับตารางมี ดังนี้
<TABLE>...</TABLE> เป็นการบอกจุดเริ่มต้นและจุดสิ้นสุดของตาราง
<TR>...</TR> เป็นการบอกจำนวนแถว (row)
<TD>...</TD> เป็นการบอกจำนวนคอลัมน์ (column)
การใส่ขนาดขอบของตาราง<TABLE>...</TABLE> เป็นการบอกจุดเริ่มต้นและจุดสิ้นสุดของตาราง
<TR>...</TR> เป็นการบอกจำนวนแถว (row)
<TD>...</TD> เป็นการบอกจำนวนคอลัมน์ (column)
กำหนดความหนาของขอบตารางด้วยหน่วยของ Pixel โดยมีรูปแบบ ดังนี้
BORDER = "ตัวเลขบอกขนาด" (อยู่ใน Tag ของ TABLE)
ตัวอย่างเช่น : <TABLE BORDER = 1>
<TR>
<TD>แถว 1 คอลัมน์ 1</TD>
<TD>แถว 1 คอลัมน์ 2</TD>
</TR>
<TR>
<TD>แถว 2 คอลัมน์ 1</TD>
<TD>แถว 2 คอลัมน์ 2</TD>
</TR>
</TABLE>
 |
| โค้ด |
 |
| ผลลัพธ์ |
การกำหนดสีของเส้นขอบของตาราง โดยใช้รูปแบบการกำหนดชื่อสีหรือการกำหนดแบบรหัสสีเป็นแบบค่าตัวเลขฐานสิบหก โดยมีรูปแบบดังนี้
1. BORDERCOLOR = "ชื่อสีที่ต้องการ" (อยู่ใน Tag ของ TABLE)
2. BORDERCOLOR = "#รหัสเลขฐานสิบหก" (อยู่ใน Tag ของ TABLE)
ตัวอย่างเช่น : <TABLE BORDER = 1 BORDERCOLOR = "BLUE">
 |
| โค้ด |
 |
| ผลลัพธ์ |
ตัวอย่างเช่น : <TABLE BORDER = 1 BORDERCOLOR = "#00FF7F">
 |
| โค้ด |
 |
| ผลลัพธ์ |
การปรับขนาดความกว้าง(WIDTH)และความสูง(HEIGHT)
การกำหนดความกว้างและความสูงให้กับตาราง WIDTH และ HEIGHT ในแท็ก <TABLE> ซึ่งสามารถกำหนดได้ 2 รูปแบบดังนี้
1.กำหนดเป็นเปอร์เซ็น ซึ่งปรับขนาดตารางตามขนาดหน้าจอของเบราว์เซอร์
รูปแบบโค้ด : <TABLE WIDTH="ระบุขนาดตัวเลข%" HEIGHT="ระบุขนาดตัวเลข%">
2.กำหนดความกว้าง และความยาวเป็นจุด(PIXEL) ซึ่งขนาดตารางจะไม่ปรับตามขนาดหน้าจอของเบราว์เซอร์วิธีนี้จะไม่ทำให้ตารางและข้อมูลในตารางขยับเปลี่ยนตำแหน่ง
รูปแบบโค้ด : <TABLE WIDTH="ระบุตัวเลข" HEIGHT="ระบุตัวเลข">
ตัวอย่างเช่น : <TABLE BORDER = 1 WIDTH = 600>
 |
| โค้ด |
 |
| ผลลัพธ์ |
ตัวอย่างเช่น : <TABLE BORDER = 1 HEIGHT= 400>
 |
| โค้ด |
 |
| ผลลัพธ์ |
ข้อมูลในตารางแต่ละช่องสามารถจัดตำแหน่งให้อยู่ ชิดซ้าย ชิดขวา และกึ่งกลางได้
โดยการใช้ ALIGN="ตำแหน่งของข้อมูล" ตำแหน่งของข้อมูลมี ดังนี้
"CENTER" หมายถึง อยู่ตรงกลางเซลล์
"LEFT" หมายถึง อยู่ชิดด้านซ้ายเซลล์
"RIGHT" หมายถึง อยู่ชิดด้านขวาเซลล์
การจัดตำแหน่งแบบกึ่งกลาง
ตัวอย่างเช่น : <TABLE BORDER = 1 Align = "CENTER">
 |
| โค้ด |
 |
| ผลลัพธ์ |
ตัวอย่างเช่น : <TABLE BORDER = 1 Align = "LEFT">
 |
| โค้ด |
 |
| ผลลัพธ์ |
ตัวอย่างเช่น : <TABLE BORDER = 1 Align = "RIGHT">
 |
| โค้ด |
 |
| ผลลัพธ์ |
เป็นการผสานเซลล์ตั้ง 2 เซลล์ขึ้นไป การรวมเซลล์มี 2 ลักษณะ คือ การรวมคอลัมน์(COLUMN) และการรวมแถว(ROW)
1.การรวมคอลัมน์
เป็นการรวมเซลล์ตามแนวนอนตั้งแต่ 2 เซลล์ขึ้นไป เป็นเซลล์เดียวกัน โดยใช้คำสั่ง COLSPAN
กำหน ดไว้ในคำสั่ง <TD>
กำหน ดไว้ในคำสั่ง <TD>
รูปแบบ : <TD COLSPAN = " จำนวนคอลัมน์ที่รวม " >ข้อความ</TD>
ตัวอย่างเช่น : <TD COLSPAN = 2 >รวมคอลมน์</TD>
 |
| โค้ด |
 |
| ผลลัพธ์ |
| 2.การรวมแถว | |
| เป็นการรวมเซลล์ตามแนวตั้ง ตั้งแต่ 2 เซลล์ขึ้นไป เป็นเซลล์เดียวกัน โดยใช้คำสั่ง ROWSPAN กำหนดไว้ในคำสั่ง <TD> เหมือนการรวมคอลัมน์ รูปแบบ : <TD ROWSPAN ="จำนวนแถวที่รวม"> ข้อความ </TD> |
ตัวอย่างเช่น : <TD ROWSPAN = 2 >JaMaGaTaRo</TD>
 |
| โค้ด |
 |
| ผลลัพธ์ |
ที่มา : http://school.obec.go.th/pp_school/html/table.html
http://www.kty.ac.th/html/unit5/unit503.html
http://www.thainextstep.com/html/html_09.php
http://www.yupparaj.ac.th/CAI/color/colorcode.html
วันที่ 2 กันยายน 2555 (:
