บทที่ 8...
TRANSCRIPT
จัดข้อมูลให้เป็นสัดส่วนด้วยตาราง
เรียบเรียงโดย ชายด าคอมพิวเตอร์
ทดลองสร้างตาราง<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 ช่อง แต่เราจะมองไม่เห็นเส้นขอบตาราง เนื่องจากโดยปรกติแล้วโปรแกรมจะซ่อนเส้นตารางไว้
การใส่หัวข้อ <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> จะมีความหนาของตัวอักษรมากกว่า และจัดให้ข้อความอยู่ตรงกลางช่อง
ความหนาของเส้นตารางและความห่างของช่องเซลล์<table border="10px" cellspacing="20px">
<tr><td> column1 </td><td> column2 </td>
</tr></table> เมื่อก าหนดความหนาของ border ให้เพิ่มขึ้น
ขนาดของเส้นขอบตารางจะเพิ่มขึ้นตาม
เมื่อก าหนดขนาดของ cellspacing ช่องว่างระหว่างขอบตารางกับช่องของ column จะเพิ่มขึ้น
เว้นระยะระหว่างข้อมูลในเซลล์กับกรอบเซลล์
<table border="1px" cellpadding="20px">
<tr>
<td> column1 </td>
<td> column2 </td>
</tr>
</table>
cellpadding จะเพิ่มขนาดของช่องว่างระหว่างขอบของ column กับข้อความข้างใน
ปรับความกว้างและความสูงของตาราง<table width="50%" border="1px">
<tr>
<td>
column1
</td>
<td>
column2
</td>
</tr>
</table>
50%
50%
*สังเกตูว่าความยาวของตาราง จะมีขนาดเป็นครึ่งเดียวของหน้าต่าง browser
ปรับความกว้างและความสูงของตาราง<table hieght="50%" border="1px">
<tr>
<td>
column1
</td>
<td>
column2
</td>
</tr>
</table>
50%
50%
*เช่นเดียวกันกับ width, height=“50%” จะท าให้ตารางมีความสูงเท่ากับครึ่งนึงของความสูงทั้งหมดของ browser
ปรับขนาดช่องเซลล์<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 ช่องได้เช่นกัน
ปรับขนาดช่องเซลล์<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 จะไม่เกิดผลใดๆ เพราะไม่มีแถวที่อยู่ต่ ากว่าแถวที่สองแล้ว
การก าหนดสีในช่องเซลล์<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นั้นๆ เท่านั้น
ใส่สีให้กรอบของตาราง<table border="1px" bordercolor="#00ff00">
<tr><td> column1 </td><td> column2 </td>
</tr><tr>
<td> column3 </td><td> column4 </td>
</tr></table>
ใส่รูปภาพให้กับพื้นหลังของตาราง<table border="1px" background="rockman.jpg">
<tr><td> column1 </td><td> column2 </td>
</tr><tr>
<td> column3 </td><td> column4 </td>
</tr></table>
BEFORE
จัดต าแหน่งข้อมูลในตาราง การจัดข้อมูลในแนวตั้ง ให้ชิดขอบบน ขอบล่าง หรืออยู่กึ่งกลางของตารางท าได้ดังนี้
<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