table
1.1
ทดลองสร้างตาราง
ชื่อแท็ก table,
tr และ td
ตำแหน่งแท็ก table อยู่ภายในแท็ก <body>...</body>
tr อยู่ภายในแท็ก <table>...</table>
td อยู่ภายในแท็ก <tr>...</tr>
รูปแบบแท็ก <table>
<tr><td>ข้อความ</td><td>ข้อความ</td></tr>
<tr><td>ข้อความ</td><td>ข้อความ</td></tr>
</table>
ตำแหน่งแท็ก table อยู่ภายในแท็ก <body>...</body>
tr อยู่ภายในแท็ก <table>...</table>
td อยู่ภายในแท็ก <tr>...</tr>
รูปแบบแท็ก <table>
<tr><td>ข้อความ</td><td>ข้อความ</td></tr>
<tr><td>ข้อความ</td><td>ข้อความ</td></tr>
</table>
1.2 การใส่หัวข้อและตีเส้นตาราง
เราสามารถตกแต่งตารางให้ดูง่ายขึ้น
โดยการใส่หัวคอลัมน์หรือหัวแถว เพื่ออธิบายความหมายองข้อมูลภายในคอลัมน์หรือภายในแถว
โดยใช้แท็ก <th>…</th> ซึ่งจะมีลักษณะการใช้งานเหมือนแท็ก
td แต่ข้อความภายในแท็กจะเป็นตัวหนา เป็นการเน้นข้อความ
ชื่อแท็ก
th
ตำแหน่งของแท็ก อยู่ภายในแท็ก <tr>...</tr>
รูปแบบแท็ก <tr>
<th>หัวข้อ</th>
<th>หัวข้อ</th>
</tr>
ตำแหน่งของแท็ก อยู่ภายในแท็ก <tr>...</tr>
รูปแบบแท็ก <tr>
<th>หัวข้อ</th>
<th>หัวข้อ</th>
</tr>
1.3
การกำหนดข้อความกำกับให้กับตาราง
การใส่ข้อความกำกับ
จะช่วยให้ทราบได้ว่าตารางนั้นนำเสนอข้อมูลเกี่ยวกับเรื่องใด
ชื่อแท็ก caption
ชื่อแอททริบิวท์ align
ตำแหน่งของแท็ก อยู่ภายในแท็ก <table>...</table>
รูปแบบแท็ก <caption align = “ตำแหน่ง”>ข้อความกำกับ</caption>
ค่าที่กำหนด ตำแหน่งของข้อความกำกับ ได้แก่ top (กลางบน),
bottom (กลางล่าง), left (บนซ้าย), right (บนขวา)
ชื่อแอททริบิวท์ align
ตำแหน่งของแท็ก อยู่ภายในแท็ก <table>...</table>
รูปแบบแท็ก <caption align = “ตำแหน่ง”>ข้อความกำกับ</caption>
ค่าที่กำหนด ตำแหน่งของข้อความกำกับ ได้แก่ top (กลางบน),
bottom (กลางล่าง), left (บนซ้าย), right (บนขวา)
1.4
ความหนาของเส้นตารางและความห่างของช่องเซลล์
ชื่อแอททริบิวท์ border และ cellspacing
ตำแหน่งแอททริบิวท์ อยู่ภายในแท็ก <table…>
รูปแบบแท็ก <table border = “ความหนา” cellspacind= “ความห่าง”>
ค่าที่กำหนด ขนาดเป็น pixels เป็น 5, 7, 10
ชื่อแอททริบิวท์ border และ cellspacing
ตำแหน่งแอททริบิวท์ อยู่ภายในแท็ก <table…>
รูปแบบแท็ก <table border = “ความหนา” cellspacind= “ความห่าง”>
ค่าที่กำหนด ขนาดเป็น pixels เป็น 5, 7, 10
1.5
เว้นระยะระหว่างข้อมูลให้เซลล์กับกรอบเซลล์
เราสามารถปรับขนาดของช่องตารางให้มีที่ว่างเป็นการเว้นระยะระหว่างข้อมูลกับกรอบช่องเซลล์เพื่อความสวยงาม
ชื่อแอททริบิวท์ cellpadding
ตำแหน่งของแอททริบิวท์ อยู่ภายในแท็กเปิด <table...>
รูปแบบ <table cellpadding = “เว้นระยะ”>
ค่าที่กำหนด ขนาดเป็น pixels เป็น 5, 7, 10
ชื่อแอททริบิวท์ cellpadding
ตำแหน่งของแอททริบิวท์ อยู่ภายในแท็กเปิด <table...>
รูปแบบ <table cellpadding = “เว้นระยะ”>
ค่าที่กำหนด ขนาดเป็น pixels เป็น 5, 7, 10
1.6 ปรับความกว้างและความสูงของตาราง
การสร้างตารางที่ผ่านมาขนาดความกว้างของตารางนั้นถูกกำหนดโดยขนาดข้อมูลในแต่ละช่อง
ทำให้ขนาดตารางที่ได้อาจดูไม่เหมาะสม
ซึ่งเราสามารถกำหนดขนาดความกว้างของตารางได้เอง
ชื่อแอททริบิวท์ width
ตำแหน่งของแอททริบิวท์ อยู่ภายในแท็กเปิด <table…>
รูปแบบ <table width = “ความกว้าง”>
ค่าที่กำหนด ความกว้างของตารางกำหนดเป็น % หรือพิกเซล
ชื่อแอททริบิวท์ width
ตำแหน่งของแอททริบิวท์ อยู่ภายในแท็กเปิด <table…>
รูปแบบ <table width = “ความกว้าง”>
ค่าที่กำหนด ความกว้างของตารางกำหนดเป็น % หรือพิกเซล
เราสามารถกำหนดความสูงของตารางได้เช่นเดียวกันด้วยรูปแบบดังต่อไปนี้
ชื่อแอททริบิวท์ height
ตำแหน่งของแอททริบิวท์ อยู่ภายในแท็กเปิด <table…>
รูปแบบ <table height = “ความสูง”>
ค่าที่กำหนด ความสูงของตารางกำหนดเป็น % หรือพิกเซล
ชื่อแอททริบิวท์ height
ตำแหน่งของแอททริบิวท์ อยู่ภายในแท็กเปิด <table…>
รูปแบบ <table height = “ความสูง”>
ค่าที่กำหนด ความสูงของตารางกำหนดเป็น % หรือพิกเซล
Note : ความสูงนี้จะเป็นความสูงที่เทียบกับหน้าจอบราวเซอร์
ถ้าเราย่อหน้าต่างลงความสูงก็จะถูกปรับไปด้วย และในกรณีที่ข้อมูลในตารางมีมาก
ในความสูงที่กำหนไม่พอแสดงข้อมูลทั้งหมด ตารางก็จะขยายสูงขึ้นเอง โดยไม่สนใจว่าเราจะกำหนดความสูงไว้เท่าไร
แต่ถ้าข้อมูลมีน้อย พอแสดงในความสูงที่เรากำหนด ตารางก็จะคงความสูงไว้
โดยจะปล่อยเป็นพื้นที่ว่างด้านล่าง
1.7 ปรับขนาดช่องเซลล์
ปกติช่องเซลล์
1 ช่อง จะมีขนาด 1 แถว 1 คอลัมน์ แต่ในบางกรณีเราต้องการใช้ช่องเซลล์ขนาดอื่น เช่น 1 แถว 5 คอลัมน์ หรือ 2 แถว 2 คอลัมน์ เป็นต้น
เมื่อเราต้องการใช้ช่องเซลล์เกิน 1 คอลัมน์ ทำได้ดังนี้
ชื่อแอททริบิวท์ colspan
ตำแหน่งของแอททริบิวท์ อยู่ในแท็กเปิด <td…>
รูปแบบ colspan = “จำนวนคอลัมน์ที่ต้องการขยาย”
ค่าที่กำหนด จำนวนคอลัมน์ที่เราต้องการขยาย
เมื่อเราต้องการใช้ช่องเซลล์เกิน 1 คอลัมน์ ทำได้ดังนี้
ชื่อแอททริบิวท์ colspan
ตำแหน่งของแอททริบิวท์ อยู่ในแท็กเปิด <td…>
รูปแบบ colspan = “จำนวนคอลัมน์ที่ต้องการขยาย”
ค่าที่กำหนด จำนวนคอลัมน์ที่เราต้องการขยาย
ถ้าต้องการให้ช่องเซลล์ขยายออกเกิน
1 แถว ทำได้ดังนี้
ชื่อแอททริบิวท์ rowspan
ตำแหน่งของแอททริบิวท์ อยู่ภายในแท็กเปิด <td…>
รูปแบบ rowspan = “จำนวนแถวที่ต้องการขยาย”
ค่าที่กำหนด จำนวนแถวที่ต้องการขยาย
ชื่อแอททริบิวท์ rowspan
ตำแหน่งของแอททริบิวท์ อยู่ภายในแท็กเปิด <td…>
รูปแบบ rowspan = “จำนวนแถวที่ต้องการขยาย”
ค่าที่กำหนด จำนวนแถวที่ต้องการขยาย
1.8 การกำหนดสีในช่องเซลล์
การใส่สีในช่องเซลล์
ช่วยให้ตารางดูดีขึ้น มีการแยกสี หรือเน้นความสำคัญของข้อมูล
ชื่อแอททริบิวท์ bgcolor
ตำแหน่งของแอททริบิวท์ อยู่ภายในแท็กเปิด <table…>,<th…>,<tr…> หรือ <td…>
รูปแบบ bgcolor = “สี”
ค่าที่กำหนด สีที่กำหนดจะเป็นชื่อสีพื้นฐานหรือเลขฐาน 16
ตำแหน่งของแอททริบิวท์ อยู่ภายในแท็กเปิด <table…>,<th…>,<tr…> หรือ <td…>
รูปแบบ bgcolor = “สี”
ค่าที่กำหนด สีที่กำหนดจะเป็นชื่อสีพื้นฐานหรือเลขฐาน 16
1.9 ใส่สีให้กรอบของตาราง
เราสามารถแต่งสีให้กับกรอบของตารางเพื่อทำให้ตารางดูสะดุดตามากขึ้น
โดยแอททริบิวต์ bordercolor ใส่ลงไปในแท็ก <table>
ชื่อแอททริบิวท์ bordercolor
ตำแหน่งของแอททริบิวท์ อยู่ภายในแท็กเปิด <table…>
รูปแบบ bordercolor = “ชื่อสีที่เราจะใส่ให้กับกรอบของตาราง”
ค่าที่กำหนด สีที่กำหนดจะเป็นชื่อสีพื้นฐานหรือเลขฐาน 16
ชื่อแอททริบิวท์ bordercolor
ตำแหน่งของแอททริบิวท์ อยู่ภายในแท็กเปิด <table…>
รูปแบบ bordercolor = “ชื่อสีที่เราจะใส่ให้กับกรอบของตาราง”
ค่าที่กำหนด สีที่กำหนดจะเป็นชื่อสีพื้นฐานหรือเลขฐาน 16
1.10 การใส่รูปภาพให้กับพื้นหลังของตาราง
นอกจากเราจะสามารถใส่สีให้กับพื้นหลังแล้ว เรายังสามารถใส่รูปให้กับพื้นหลังของตารางได้อีก โดยใช้แอตทริบิวต์ background ในแท็ก <table>
ชื่อแอตทริบิวต์ background
ตำแหน่งของแอตทริบิวต์ อยู่ภายในแท็กเปิด <table...></table>
รูปแบบแท็ก background="ชื่อไฟล์รูปภาพที่นำมาใช้เป็น
พื้นหลังตาราง"
ค่าที่กำหนด ชื่อไฟล์รูปภาพที่จะนำมาใส่เพื่อเป็นพื้นหลังของตาราง
ตำแหน่งของแอตทริบิวต์ อยู่ภายในแท็กเปิด <table...></table>
รูปแบบแท็ก background="ชื่อไฟล์รูปภาพที่นำมาใช้เป็น
พื้นหลังตาราง"
ค่าที่กำหนด ชื่อไฟล์รูปภาพที่จะนำมาใส่เพื่อเป็นพื้นหลังของตาราง
1.11 การกำหนดการแสดงเส้นตาราง
เป็นการกำหนดให้แสดงหรือไม่แสดงเส้นของตารางบางด้าน เพื่อความเหมาะสมสำหรับการแสดงข้อมูลบางประเภท เช่น ไม่แสดงเส้นเฉพาะในแนวคอมลัมน์
ชื่อแอตทริบิวต์ frame และ rules
ตำแหน่งของแอตทริบิวต์ อยู่ภายในแท็กเปิด <table...></table>
รูปแบบแท็ก <table frame="ตัวเลือก" rules="ตัวเลือก">
ค่าที่กำหนด กำหนดให้แสดงหรือไม่แสดงเส้นขอบของตาราง
ตำแหน่งของแอตทริบิวต์ อยู่ภายในแท็กเปิด <table...></table>
รูปแบบแท็ก <table frame="ตัวเลือก" rules="ตัวเลือก">
ค่าที่กำหนด กำหนดให้แสดงหรือไม่แสดงเส้นขอบของตาราง
ตัวเลือกของแอตทริบิวต์ frame ประกอบด้วย
คำสั่ง
|
รายละเอียด
|
above
|
แสดงเฉพาะเส้นด้านบนของช่องเซลล์
|
below
|
แสดงเฉพาะเส้นด้านล่างของช่องเซลล์
|
border
|
แสดงเส้นทุกด้าน
|
box
|
แสดงเส้นทุกด้าน
|
hsides
|
แสดงเส้นแนวนอนทุกเส้น
|
lhs
|
แสดงเฉพาะเส้นด้านซ้ายของช่องเซลล์
|
rhs
|
แสดงเฉพาะเส้นด้านขวาของช่องเซลล์
|
void
|
ไม่แสดงเส้นกรอบ
|
vsides
|
แสดงเส้นแนวตั้งทุกเส้น
|
ตัวเลือกของแอตทริบิวต์ rules ประกอบด้วย
คำสั่ง
|
รายละเอียด
|
all
|
แสดงเส้นแบ่งช่องเซลล์ทุกเส้น
|
cols
|
แสดงเส้นแบ่งช่องเซลล์เฉพาะเส้นแนวคอลัมน์ (แนวตั้ง)
|
groups
|
แสดงเฉพาะเส้นแบ่งกลุ่มเซลล์ที่เกิดจากแท็ก thead, tbody, tfoot, หรือ colgroup
(สำหรับแท็กทั้งสี่จะกล่าวในหัวข้อลำดับถัดไป) |
none
|
ไม่แสดงเส้นแบ่งช่องเซลล์
|
rows
|
แสดงเส้นแบ่งช่องเซลล์เฉพาะเส้นแนวแถว (แนวนอน)
|
1.12 การจัดตำแหน่งข้อมูลในตาราง
เราสามารถจัดข้อมูลที่แสดงในช่องตารางให้ชิดขวา ชิดซ้าย หรืออยู่กึ่งกลางของช่องตารางได้
ชื่อแอตทริบิวต์ align
ตำแหน่งของแอตทริบิวต์ อยู่ภายในแท็กเปิด <td...></td>
รูปแบบแท็ก <td align="ตำแหน่งของข้อมูล">
ค่าที่กำหนด ตำแหน่งข้อมูลได้แก่ center (กลาง), justify (เต็มช่อง),
left (ซ้าย) และ right (ขวา)
ตำแหน่งของแอตทริบิวต์ อยู่ภายในแท็กเปิด <td...></td>
รูปแบบแท็ก <td align="ตำแหน่งของข้อมูล">
ค่าที่กำหนด ตำแหน่งข้อมูลได้แก่ center (กลาง), justify (เต็มช่อง),
left (ซ้าย) และ right (ขวา)
เราสามารถจัดข้อมูลที่แสดงในช่องตารางให้ชิดบน ชิดล่าง หรืออยู่กึ่งกลางของช่องตารางได้
ชื่อแอตทริบิวต์ valign
ตำแหน่งของแอตทริบิวต์ อยู่ภายในแท็กเปิด <td...></td>
รูปแบบแท็ก <td valign="ตำแหน่งของข้อมูล">
ค่าที่กำหนด ตำแหน่งข้อมูลได้แก่ baseline (ตามเส้นฐาน),
bottom (ชิดล่าง), middle (กลาง), และ top (ชิดบน)
ตำแหน่งของแอตทริบิวต์ อยู่ภายในแท็กเปิด <td...></td>
รูปแบบแท็ก <td valign="ตำแหน่งของข้อมูล">
ค่าที่กำหนด ตำแหน่งข้อมูลได้แก่ baseline (ตามเส้นฐาน),
bottom (ชิดล่าง), middle (กลาง), และ top (ชิดบน)
1.13 การใส่รูปในตาราง
วิธีการสำหรับนำรูปภาพมาใส่ในช่องตาราง นั้นคล้ายการนำข้อความมาใส่ในตารางทั่วไปเพียงแต่เราต้องใช้แท็ก <img src…> เพื่อระบุรูปที่ต้องการนำมาแสดง
ชื่อแท็ก img
ชื่อแอททริบิวท์ src
ตำแหน่งของแท็ก อยู่ภายในแท็กเปิด <td>...</td>
รูปแบบ <img src="ไฟล์รูปภาพ" />
ค่าที่กำหนด ขนาดเป็น pixels เป็น 5, 7, 10
ชื่อแอททริบิวท์ src
ตำแหน่งของแท็ก อยู่ภายในแท็กเปิด <td>...</td>
รูปแบบ <img src="ไฟล์รูปภาพ" />
ค่าที่กำหนด ขนาดเป็น pixels เป็น 5, 7, 10
1.14 การกำหนดความกว้างของคอลัมน์ <colgroup>
ถ้าเราต้องการกำหนดความกว้างของคอลัมน์ในตาราง สามารถกำหนดได้โดยใช้แท็ก colgroup (Table Column Group)
ชื่อแท็ก colgroup
ชื่อแอททริบิวท์ span และ width
ตำแหน่งของแอททริบิวท์ อยู่ภายในแท็ก <table>...</table>
รูปแบบ <colgroup span="จำนวน"
width="ความกว้าง">...</colgroup>
ค่าที่กำหนด span จำนวนคอลัมน์ที่ใช้กำหนดความกว้าง
width ความกว้างของคอลัมน์มีหน่วยเป็น % หรือพิกเซล
ชื่อแอททริบิวท์ span และ width
ตำแหน่งของแอททริบิวท์ อยู่ภายในแท็ก <table>...</table>
รูปแบบ <colgroup span="จำนวน"
width="ความกว้าง">...</colgroup>
ค่าที่กำหนด span จำนวนคอลัมน์ที่ใช้กำหนดความกว้าง
width ความกว้างของคอลัมน์มีหน่วยเป็น % หรือพิกเซล
1.15 การกำหนดความกว้างแต่ละคอลัมน์
ชื่อแท็ก col
ชื่อแอททริบิวท์ span และ width
ตำแหน่งของแอททริบิวท์ อยู่ภายในแท็ก <colgroup>...</colgroup>
รูปแบบ <col span="จำนวน" width="ความกว้าง">
ค่าที่กำหนด span จำนวนคอลัมน์ที่ใช้กำหนดความกว้าง
ค่าที่กำหนด span จำนวนคอลัมน์ที่ใช้กำหนดความกว้าง
width ความกว้างของคอลัมน์มีหน่วยเป็น % หรือพิกเซล
1.16 การแบ่งส่วนตาราง
โดยปกติข้อมูลที่อยู่ในตารางจะเป็นส่วนของข้อมูลเนื้อหาส่วนใหญ่ และก็จะมีส่วนของหัวคอลัมน์เพื่อที่จะแสดงความหมายของข้อมูลนั้น ซึ่งเราจะใช้แท็ก th ที่กล่าวไปแล้ว
แต่ในบางกรณีที่เราต้องการแบ่งส่วนของตาราง เราก็สามารถทำได้ 3 ส่วนคือ
แต่ในบางกรณีที่เราต้องการแบ่งส่วนของตาราง เราก็สามารถทำได้ 3 ส่วนคือ
- แท็ก thead (Table Header) ส่วนของหัวตาราง
- แท็ก tbody (Table Body) ส่วนของข้อมูลในตาราง
- แท็ก tfoot (Table Footer) ส่วนของสรุปรวมข้อมูลในตาราง
โดยทั้งสามส่วนเราไม่ต้องใส่เรียงกันตามลำดับที่ควรจะเป็นตารางก็ได้ เช่น เราอาจจะวางแท็ก tfoot มาก่อนแท็ก tbody ได้ แต่ตอนที่เราแสดงผลในบราวเซอร์ บราวเซอร์จะจัดแท็ก tfoot ไว้ล่างสุดให้เราเอง ดูตามตัวอย่าง
ลักษณะของแท็กทั้ง 3 ประเภทจะเป็นดังนี้
ชื่อแท็ก thead, tbody และ tfoot
ตำแหน่งของแท็ก อยู่ภายในแท็ก <table>...</table>
รูปแบบ <thead><tr><td>...</td></tr></thead>
<tbody><tr><td>...</td></tr></tbody>
<tfoot><tr><td>...</td></tr></tfoot>
ตำแหน่งของแท็ก อยู่ภายในแท็ก <table>...</table>
รูปแบบ <thead><tr><td>...</td></tr></thead>
<tbody><tr><td>...</td></tr></tbody>
<tfoot><tr><td>...</td></tr></tfoot>
