ตาราง ตอนที่ 3

การปรับขนาดความกว้างของตาราง (Width)
การปรับขนาดของตารางทำให้ข้อมูลที่แสดงมีความเป็น ระเบียบเรียบร้อยและสวยงามขึ้น เนื่องจากจำนวนความกว้างของตารางจะใช้จำนวนตัวอักษรที่อยู่ในบรรทัด เป็นตัวกำหนดความกว้างในแต่ละคอลัมน์
การกำหนดขนาดของตารางนั้น ให้เพิ่มแอตทริบิวต์ width=n [ % ] ลงในตำสั่งเปิด โดยที่ n เป็นจำนวนเปอร์เซ็นต์หรือพิกเซลล์ความกว้างของตาราง เช่น :

<table border width=50%>
ตารางกว้าง 50% หรือครึ่งหนึ่งของ Browser
 

<table border width=50>
ตารางกว้าง 50 พิกเซลล์
 


NOTE & TIP !!
หากกำหนดความกว้างของตารางมากกว่า 100% ขนาดของตารางก็จะล้นจอภาพออกไป
หากกำหนดขนาดความกว้างของตารางน้อยกว่าข้อมูลที่มีอยู่ จะทำให้มีเหมือนกับไม่ได้กำหนดขนาดตารางลงไป



การปรับขนาดความสูงของตาราง (Height)
เราสามารถกำหนดขนาดความสูงของตารางได้โดยการ เพิ่มแอตทริบิวต์ Height = n โดยที่ n มีค่าเป็นเปอร์เซนต์หรือพิกเซลล์ จะทำให้แถวตารางที่ปรากฏบนจอภาพมีขนาดความสูงเพิ้มขึ้น

<table border height=50>
 ตารางมีความสูง 50 พิกเซลล์

<table border height=100>
 ตารางมีความสูง 100 พิกเซลล์

<table border height=50%>
 ตารางมีความสูง 50% เปอร์เซนต์ของ Browser



การปรับขนาดความสูงของแถวตาราง (ROWSPAN)
การกำหนดความสูงของแถวด้วยแอตทริบิวต์ HEIGHT นั้นจะเป็น การกำหนดขนาดความสูงของแถวทั้งหมดในตารางเป็นเปอร์เซนต์ แต่ถ้าหากต้องการให้ในแต่ละแถวมีความสูงเป็น อีกเท่าของแถวปกติให้ใช้แอตทริบิวต์ RowSpan
การกำหนดแอตทริบิวต์ RowSpan ในส่วนของคอลัมน์ใด จำทำให้ขนาดของแถวในช่องนั้นมีความกว้างรวมเข้าไปในบรรทัดต่อมา ดังตัวอย่าง

ตัวอย่าง

Source

<table border>
<tr><td>Data 1</td> <td ROWSPAN=2>Data 2</td><td>Data 3</td></tr>
<tr><td>Data 4</td> <td>Data 5</td></tr>
</table&g

<table border >
<tr><td ROWSPAN=2>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
<tr><td>Data 4</td> <td>Data 5</td></tr>
</table>

View

Data 1Data 2Data 3
Data 4 Data 5

Data 1Data 2Data 3
Data 4 Data 5




การปรับขนาดความกว้างของคอลัมน์ (COLSPAN)
ColSpan เป็นคำสั่งที่ใช้ในการปรับขนาดความกว้างของ คอลัมน์เช่นเดียวกับแอตทริบิวต์
WIDTH แต่ต่างกันตรงที่ ColSpan จะปรับขนาดความกว้างของคอลัมน์ในตารางให้มีขนาดเป็นจำนวนเท่าของขนาดความกว้างปกติ ซึ่ง ลักษณะการใช้งานคล้ายๆกับแอตทริบิวต์ RowSpan

ตัวอย่าง

Source

<Table border>
<tr><td>Data 1</td><td ColSpan=2>Data 2</td></tr>
<tr><td>Data 3</td><td>Data 4</td><td>Data 5</td></tr>
</Table>

View

Data 1Data 2
Data 3Data 4Data 5





การจัดขนาดความกว้างของคอลัมน์ (TD Width)
นอกจากเราจะปรับขนาดความกว้างของตารางได้แล้ว เรายังสามารถปรับขนาดความกว้างของคอลัมน์ได้โดยการใช้แอตทริบิวต์ Width กับ <TD> หากมีหลายคอลัมน์ ผลรวมความกว้างของทุกคอลัมน์ รวมกันจะเท่ากับความกว้างที่กำหนดไว้ใน <Table>โดย Browser จะทำการเฉลี่ยความกว้างของแต่ละคอลัมน์ให้เอง ดังตัวอย่าง :

ตัวอย่าง

Source

<Table border=1 width=80%>
<Tr>
<td width=30%>Width=30%</font></td>
<td width=20%>Width=20%</font></td>
<td width=50%>Width=50%</font></td>
</Tr>
</Table>

View
Width=30% Width=20% Width=50%

จากตัวอย่างนี้หมายถึง การกำหนดให้ตารางมีความกว้าง 80% ของหน้าต่างบราวเซอร์ และกำหนดให้คอลัมน์แรก มีความกว้าง 30% ของตาราง คอลัมน์ที่สองมีความกว้าง 20% ของตาราง และคอลัมน์ที่สามมีความกว้าง 50% หรือครึ่งหนึ่งของขนาดตาราง