HTML: กันยายน 2012

วันอาทิตย์ที่ 2 กันยายน พ.ศ. 2555

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

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

การสร้างตารางนั้น ในเบื้องต้นต้องใช้คำสั่งหรือแท็กดังต่อไปนี้

<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>

เช่น

<TD COLSPAN = "3">จำนวนนักเรียน</TD>

เป็นคำสั่งรวมคอลัมน์จำนวน 3 คอลัมน์มาเป็น 1 เซลล์ และในเซลล์นั้นจะมีข้อความ จำนวนนักเรียน

ตัวอย่าง

ผล

2) การรวมแถว

เป็นการรวมเซลล์ตามแนวตั้ง ตั้งแต่ 2 เซลล์ขึ้นไป เป็นเซลล์เดียวกัน โดยใช้คำสั่ง ROWSPAN กำหนดไว้ในคำสั่ง <TD> เหมือนการรวมคอลัมน์

รูปแบบ

<TR> <TD ROWSPAN ="จำนวนแถวที่รวม"> ข้อความ </TD></TR>

เช่น

<TD ROWSPAN ="2">ลำดับที่</TD> เป็นคำสั่งรวมแถวจำนวน 2 แถวมาเป็น 1 เซลล์ และในเซลล์นั้นจะมีข้อความ

ตัวอย่าง

ผล

แหล่งที่มา :

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
สมุดจดอ.ชัยราวี

02/09/55 16:16

สมัครสมาชิก: บทความ (Atom)