จัดข้อมูลให้เป็นสัดส่วนด้วยตาราง

1. จัดข้อมูลให้เป็นสัดส่วนด้วยตาราง
เรียบเรียงโดย ชายดาคอมพิวเตอร์

2. ทดลองสร้างตาราง
<table>
<tr>
<td>
<p> this is table content. </p>
</td>
<td>
<p> this is table content2. </p>
</td>
</tr>
</table>
<table> เป็นการประกาศว่าเริ่มสร้างตาราง
<tr> เป็นการประกาศสร้างแถว (row)
<td> เป็นการประกาศสร้างหลัก (column)
ผลที่ได้จากโค้ด จะสร้างตารางขึ้นมา 1 แถว
2 ช่อง แต่เราจะมองไม่เห็นเส้นขอบตาราง
เนื่องจากโดยปรกติแล้วโปรแกรมจะซ่อนเส้น
ตารางไว้

3. การใส่หัวข้อ <th> และตีเส้นตาราง
<table border="1">
<tr>
<th> header1 </th>
<th> header2 </th>
</tr>
<tr>
<td>
this is table content.
</td>
<td>
this is table content2.
</td>
</tr>
</table>
Attribute border=“1” ที่เราใส่เข้าไปภายใต้ tag table จะกาหนดให้แสดง
เส้นขอบตารางที่มีขนาดเท่ากับ 1 <th> ทางานเหมือนกับ <td> คือจะสร้าง
column ขึ้นมา ต่างกับแค่ข้อความที่อยู่ภายใต้ <th> จะมีความหนาของ
ตัวอักษรมากกว่า และจัดให้ข้อความอยู่ตรงกลางช่อง

4. ความหนาของเส้นตารางและความห่างของช่องเซลล์
<table border="10px" cellspacing="20px">
<tr>
<td> column1 </td>
<td> column2 </td>
</tr>
</table> เมื่อกาหนดความหนาของ border ให้เพิ่มขึ้น
ขนาดของเส้นขอบตารางจะเพิ่มขึ้นตาม
เมื่อกาหนดขนาดของ cellspacing ช่องว่างระหว่าง
ขอบตารางกับช่องของ column จะเพิ่มขึ้น

5. เว้นระยะระหว่างข้อมูลในเซลล์กับกรอบเซลล์
<table border="1px" cellpadding="20px">
<tr>
<td> column1 </td>
<td> column2 </td>
</tr>
</table>
cellpadding จะเพิ่มขนาดของช่องว่าง
ระหว่างขอบของ column กับข้อความข้างใน

6. ปรับความกว้างและความสูงของตาราง
<table width="50%" border="1px">
<tr>
<td>
column1
</td>
<td>
column2
</td>
</tr>
</table>
50%
50%
*สังเกตูว่าความยาวของตาราง จะมีขนาดเป็นครึ่งเดียวของหน้าต่าง browser

7. ปรับความกว้างและความสูงของตาราง
<table hieght="50%" border="1px">
<tr>
<td>
column1
</td>
<td>
column2
</td>
</tr>
</table>
50%
50%
*เช่นเดียวกันกับ width, height=“50%”
จะทาให้ตารางมีความสูงเท่ากับครึ่งนึงของ
ความสูงทั้งหมดของ browser

8. ปรับขนาดช่องเซลล์
<table border="1px">
<tr>
<td colspan="2"> column1 </td>
<td> column2 </td>
</tr>
<tr>
<td> column3 </td>
<td> column4 </td>
<td> column5 </td>
</tr>
</table>
สังเกตว่า <tr> แรกนั้นมี column น้อยกว่า ซึ่งหากเรา
ปล่อยไว้แบบเดิม ตารางจะอยู่ในรูปแบบนี้
ซึ่งทาให้ตารางดูไม่สวยงาม เกิดช่องว่างที่ไม่ได้ใช้งาน
เราจึงทาการรวม colunm แรกให้มีขนาดเท่ากับ 2
ช่อง
เราสามารถทาให้ column ที่ 2 เป็น 2 ช่องได้เช่นกัน

9. ปรับขนาดช่องเซลล์
<table border="1px">
<tr>
<td rowspan="2"> column1 </td>
<td> column2 </td>
</tr>
<tr>
<td> column3 </td>
<td> column4 </td>
<td> column5 </td>
</tr>
</table>
rowspan จะรวมช่องตารางในแนวตั้ง และดันตารางที่เหลือ
ไปข้างหลัง ทาให้ column ของ <tr> ที่ 2 ถูกผลักถอยหลัง
ไปอีก 1 ช่อง
*rowspan จะรวมช่องของตารางที่อยู่ต่ากว่า เพราะฉะนั้น ถ้า
เราใส่ rowspan ไปใน <tr> อันที่ 2 จะไม่เกิดผลใดๆ เพราะ
ไม่มีแถวที่อยู่ต่ากว่าแถวที่สองแล้ว

10. การกาหนดสีในช่องเซลล์
<table border="1px” bgcolor="#00ff00">
<tr>
<td> column1 </td>
<td> column2 </td>
</tr>
</table>
<table border="1px">
<tr>
<td bgcolor="#00ff00"> column1 </td>
<td> column2 </td>
</tr>
</table>
Attribute “bgcolor” จะ
กาหนดสีของพื้นหลังของตาราง
สังเกตว่า ถ้าเราใส่ attribute นี้
ไว้ภายใต้ <table> จะเปลี่ยนสี
ของทั้งตาราง
*แต่ถ้าเราใส่ attribute นี้ไว้
ภายใต้ <td> หรือ <tr> สีก็จะ
เกิดขึ้นกับ column หรือ row
นั้นๆ เท่านั้น

11. ใส่สีให้กรอบของตาราง
<table border="1px" bordercolor="#00ff00">
<tr>
<td> column1 </td>
<td> column2 </td>
</tr>
<tr>
<td> column3 </td>
<td> column4 </td>
</tr>
</table>

12. ใส่รูปภาพให้กับพื้นหลังของตาราง
<table border="1px" background="rockman.jpg">
<tr>
<td> column1 </td>
<td> column2 </td>
</tr>
<tr>
<td> column3 </td>
<td> column4 </td>
</tr>
</table>
BEFORE

13. จัดตาแหน่งข้อมูลในตาราง
 การจัดข้อมูลในแนวตั้ง ให้ชิดขอบบน ขอบล่าง หรืออยู่กึ่งกลางของตารางทาได้ดังนี้
<table border="1px" width="100%" hieght="100%">
<tr>
<td valign="baseline"> column1 </td>
<td valign="bottom"> column2 </td>
<td valign="middle"> column3 </td>
<td valign="top"> column4 </td>
</tr>
</table> baseline *ตามเส้นฐาน
bottom ชิดขอบล่าง
middle กึ่งกลาง
top ชิดขอบบน
ความแตกต่างของ baseline กับ bottom