Changing Column Width

การเปลี่ยนขนาดความกว้างของ column เราจะคิดเป็นเปอร์เซ็นต์ เช่น จากตัวอย่างที่แล้วมีขนาด 33% ตอนนี้เราจะเปลี่ยน column แรกเป็น 40% เพราะฉะนั้น column ที่เหลือจะเท่ากับ 30% (40% + 30% +30% = 100%)

การเปลี่ยนความกว้างของ column นั้น เราจะใช้ <col> element ซึ่งจะเขียนอยู่ระหว่าง <table> และ <thead> เราจะเขียน <col> นี้ในลักษณะตัวแปรเพราะเราต้องกำหนดค่าให้แต่ละ column ดังตัวอย่าง

<table border="1" width="100%">
	<col style="width:40%">
	<col style="width:30%">
	<col style="width:30%">
	<thead>
	<tr>
		<th>Fruits</th>
		<th>Vitamin A</th>
		<th>Vitamin C</th>
	</tr>
	</thead>
	<tbody>
	<tr>
		<th>Apples</th>
		<td>98 ui</td>
		<td>8.4 mg</td>
	</tr>
	<tr>
		<th>Oranges</th>
		<td>295 ui</td>
		<td>69.7 mg</td>
	</tr>
	<tr>
		<th>Bananas</th>
		<td>76 ui</td>
		<td>10.3 mg</td>
	</tr>
	</tbody>
</table>

ด้วยวิธีนี้จะทำให้เรากำหนดความกว้างของ column ได้ ในตัวอย่างเราได้กำหนด ความกว้างของ column เป็นเปอร์เซ็นต์ลงไปเลย แต่ที่จริงแล้วเราควรเขียนลงไปที่ stylesheet file

ใน stylesheet เราจะสร้าง class ขึ้นมา 3 class ในแต่ละ class ก็จะกำหนดขนาดของ column ดังเช่นตัวอย่างนี้

<table border="1">
	<col class="column-one">
	<col class="column-two">
	<col class="column-three">
	<thead>
	<tr>
		<th>Fruits</th>
		<th>Vitamin A</th>

สรุป

• ในทุกๆตารางจะเริ่มและจบด้วย <table> element
• เราใช้ตัวแปร colspan และ rowspan ในการรวม column และ row เข้าด้วยกัน
• ตารางจะแบ่งเป็นหัวข้อ <thead> element และข้อมูล <tbody> element
• หัวข้อและข้อมูลจะใช้ <tr> element แบ่งเป็นแถว
• เราจะไม่ใช้ column ในตาราง HTML แต่เราจะใช้ cell แทน และใช้ <td> ในการแบ่ง cell
• เวลาเราจะกำหนดหัวข้อ เราจะใช้ <th> element แทน <td> element