การแทรกตาราง
การสร้างตารางนั้น ในเบื้องต้นต้องใช้คำสั่งหรือแท็กดังต่อไปนี้
<table>...</table> เป็นการบอกจุดเริ่มต้นและจุดสิ้นสุดในการสร้างตาราง
<tr>....</tr> เป็นการบอกจำนวนแถว (row)
<td>...</td> เป็นการบอกจำนวนคอลัมน์ (colunm)
ตัวอย่าง
ผล
การปรับความกว้างและความสูงให้กับตาราง
การกำหนดความกว้างและความสูงให้กับตารางโดยใช้แอททริบิวต์ width และ height ในแท็ก <table> ซึ่งสามารถกำหนดได้ 2 รูปแบบดังนี้
1.กำหนดเป็นเปอร์เซ็น ซึ่งจะปรับขนาดตารางตามขนาดหน้าจอของเบราว์เซอร์ในขณะนั้น
<table width="50%" height="60%">
2.กำหนดความกว้าง และความยาวเป็นจุด (pixel) ซึ่งขนาดตารางจะไม่ปรับตามขนาดหน้าจอของเบราว์เซอร์
ในขณะแสดงผล วิธีนี้จะไม่ทำให้ตารางและข้อมูลในตารางขยับเปลี่ยนตำแหน่ง
<table width="400" height="200">
ตัวอย่าง
ผล
การใส่ขอบตาราง
border="X"
border="1" หมายความว่าให้ตีเส้นด้วยความหนาของเส้น 1 จุด (pixel) หากไม่ต้องการเส้นให้กำหนดค่าเป็น "0" หรือไม่ต้องใช้แอททริบิวต์นี้
การจัดตำแหน่งตาราง
สามารถใส่ข้อความกำกับตาราง เพื่อให้ทราบว่าตารางนั้นนำเสนอข้อมูลเกี่ยวกับเรื่องใด โดยมีรูปแบบดังนี้
<caption align="ตำแหน่ง">ข้อความกำกับตาราง</caption>
โดยค่า "ตำแหน่ง" มีดังนี้
"top" หมายถึง อยู่กลางตารางด้านบน
"bottom" หมายถึง อยู่กลางตารางด้านล่าง
"left" หมายถึง อยู่ด้านบนซ้าย
"right" หมายถึง อยู่ด้านบนขวา
ตัวอย่าง
ผล
การรวมเซลล์
เป็นการผสานเซลล์ตั้ง 2 เซลล์ขึ้นไป เหมือนตารางใน Microsoft Word หรือ Microsoft Excel การรวมเซลล์มี 2 ลักษณะ คือ การรวมคอลัมน์ และการรวมแถว | |
1) การรวมคอลัมน์
เป็นการรวมเซลล์ตามแนวนอนตั้งแต่
2 เซลล์ขึ้นไป เป็นเซลล์เดียวกัน โดยใช้คำสั่ง COLSPAN กำหน ดไว้ในคำสั่ง
<TD>
<TR> <TD COLSPAN = "
จำนวนคอลัมน์ที่รวม " > ข้อความ </TD> </TR> |
2) การรวมแถว | |
เป็นการรวมเซลล์ตามแนวตั้ง ตั้งแต่ 2 เซลล์ขึ้นไป เป็นเซลล์เดียวกัน โดยใช้คำสั่ง ROWSPAN กำหนดไว้ในคำสั่ง <TD> เหมือนการรวมคอลัมน์รูปแบบ<TR> <TD ROWSPAN ="จำนวนแถวที่รวม"> ข้อความ </TD></TR>เช่น<TD ROWSPAN ="2">ลำดับที่</TD> เป็นคำสั่งรวมแถวจำนวน 2 แถวมาเป็น 1 เซลล์ และในเซลล์นั้นจะมีข้อความตัวอย่าง |
ผล
แหล่งที่มา :
http://school.obec.go.th/pp_school/html/table.htmlhttp://www.kty.ac.th/html/unit5/unit503.html
http://www.thainextstep.com/html/html_09.php
สมุดจดอ.ชัยราวี
02/09/55 16:16
ไม่มีความคิดเห็น:
แสดงความคิดเห็น