Session3Part2.ppt

1. Orjix
www.RongRean.com
หลักสูตร สร้างเว็บด้วย HTML: Session ที่ 3 ตอนที่ 2

2. ทดลองสร้างตาราง
<table>
<tr>
<td>
<p>this is table content.</p>
</td>
<td>
<p>this is table content2.</p>
</td>
</tr>
</table>
www.rongrean.com Orjix
<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>
www.rongrean.com Orjix
Attribute border=“1” ที่เราใส่
เข้าไปภายใต้tag table จะกาหนดให้
แสดงเส้นขอบตารางที่มีขนาดเท่ากับ 1
<th> ทางานเหมือนกับ <td> คือจะ
สร้าง column ขึ้นมา ต่างกับแค่ข้อความ
ที่อยู่ภายใต้<th> จะมีความหนาของ
ตัวอักษรมากกว่า และจัดให้ข้อความอยู่ตรง
กลางช่อง

4. การกาหนดข้อความกากับให้กับตาราง <caption>
<table border="1" width="20%">
<caption>this will show you how to make a caption</caption>
<tr>
<td>column1</td>
<td>column2</td>
</tr>
</table>
www.rongrean.com Orjix
เราสามารถใช้ attribute align=“…”
เพื่อกาหนดตาแหน่งของ caption ได้เช่น
<caption align=“bottom”>…..

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

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

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

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

9. ปรับขนาดช่องเซลล์
<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>
www.rongrean.com Orjix
สังเกตว่า <tr> แรกนั้นมี column น้อยกว่า ซึ่ง
หากเราปล่อยไว้แบบเดิม ตารางจะอยู่ในรูปแบบนี้
ซึ่งทาให้ตารางดูไม่สวยงาม เกิดช่องว่างที่ไม่ได้ใช้งาน
เราจึงทาการรวม colunm แรกให้มีขนาดเท่ากับ 2
ช่อง
เราสามารถทาให้ column ที่ 2 เป็น 2 ช่องได้เช่นกัน

10. ปรับขนาดช่องเซลล์
<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>
www.rongrean.com Orjix
rowspan จะรวมช่องตารางในแนวตั้ง และดันตารางที่
เหลือไปข้างหลัง ทาให้ column ของ <tr> ที่ 2 ถูก
ผลักถอยหลังไปอีก 1 ช่อง
*rowspan จะรวมช่องของตารางที่อยู่ต่ากว่า
เพราะฉะนั้น ถ้าเราใส่ rowspan ไปใน <tr> อันที่ 2
จะไม่เกิดผลใดๆ เพราะไม่มีแถวที่อยู่ต่ากว่าแถวที่สองแล้ว

11. การกาหนดสีในช่องเซลล์
<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>
www.rongrean.com Orjix
Attribute “bgcolor” จะกาหนดสีของพื้น
หลังของตาราง
สังเกตว่า ถ้าเราใส่ attribute นี้ไว้ภายใต้
<table> จะเปลี่ยนสีของทั้งตาราง
แต่ถ้าเราใส่ attribute นี้ไว้ภายใต้<td> หรือ
<tr> สีก็จะเกิดขึ้นกับ column หรือ row
นั้นๆ เท่านั้น

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

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

14. ใส่รูปภาพให้กับพื้นหลังของตาราง
www.rongrean.com Orjix
<table border="1px" width="100%" height="100%">
<tr>
<td background="rockmanzx.jpg">column1</td>
<td>column2</td>
</tr>
<tr>
<td>column3</td>
<td background=“
band.jpg">column4
</td>
</tr>
</table>
*กรณีที่ใส่รูปพื้นหลังของแต่ละช่อง(column)ใน
ตาราง

15. กาหนดการแสดงเส้นของตาราง
<table border="1px" frame="border" rules="all">
<tr>
<td>column1</td>
<td>column2</td>
<td>column3</td>
</tr>
<tr>
<td>column4</td>
<td>column5</td>
<td>column6</td>
</tr>
<tr>
<td>column7</td>
<td>column8</td>
<td>column9</td>
</tr>
</table>
www.rongrean.com Orjix
Attribute ที่ใช้ในการกาหนดเส้นของตารางคือ
frame และ rules
โดย frame กาหนดเส้นของรอบนอก และ rules
กาหนดเส้นภายในตาราง
rules
frame

16. Attribute ของ frame
www.rongrean.com Orjix
คาสั่ง รายละเอียด
Above แสดงเฉพาะเส้นด้านบนของช่องเซลล์
Below แสดงเฉพาะเส้นด้านล่างของช่องเซลล์
Border แสดงเส้นทุกๆด้าน
Box แสดงเส้นทุกๆด้าน
Hsides แสดงเส้นแนวนอนทุกเส้น
Lhs แสดงเฉพาะเส้นด้านซ้ายของช่องเซลล์
Rhs แสดงเฉพาะเส้นด้านขวาของช่องเซลล์
Void ไม่แสดงเส้นกรอบ
Vsides แสดงเส้นแนวตั้งทุกเส้น

17. Attribute ของ rules
www.rongrean.com Orjix
คาสั่ง รายละเอียด
All แสดงเส้นแบ่งช่องเซลล์ทุกเส้น
Cols แสดงเส้นแบ่งช่องเซลล์เฉพาะเส้น column
Group แสดงเฉพาะเส้นแบ่งกลุ่มเซลล์ที่เกิดจากแท็ก thead,
tbody, tfoot หรือ colgroup
None ไม่แสดงเส้นแบ่งช่องเซลล์
Rows แสดงเส้นแบ่งช่องเซลล์เฉพาะเส้น row

18. จัดตาแหน่งข้อมูลในตาราง
เราสามารถจัดข้อมูลที่แสดงให้อยู่ชิดขวา ชิดซ้าย หรือตรงกลางได้ดังนี้
www.rongrean.com Orjix
<table border="1px" >
<tr>
<td width="150px" align="right">column1</td>
<td width="150px" align="center">column2</td>
<td width="150px" align="left">column3</td>
<td width="150px" align="justify">
column 4 test test test test test test test test test test
</td>
</tr>
</table>
Rigth ข้อความชิดขอบขวา
left ข้อความชิดขอบซ้าย
center ข้อความอยู่ตรงกลาง
Justify *รูปแบบนี้จัดให้ข้อความอยู่เต็มช่อง คือติดทั้งขอบซ้ายและขวา (อย่างเช่นข้อความในคอลัมน์หนังสือพิมพ์)
right center left justify

19. จัดตาแหน่งข้อมูลในตาราง
การจัดข้อมูลในแนวตั้ง ให้ชิดขอบบน ขอบล่าง หรืออยู่กึ่งกลางของตารางทาได้ดังนี้
www.rongrean.com Orjix
<table border="1px" width="100%" height="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

20. การซ้อนตาราง
การซ้อนตารางนั้นสามารถช่วยในการนาเสนอข้อมูลที่ซับซ้อนได้
www.rongrean.com Orjix
<table border="1px" width="100%" height="100%">
<tr>
<td>column1</td>
<td>column2</td>
<td>column3</td>
</tr>
<tr>
<td>column4</td>
<td>column5</td>
<td>
<table border="1px" width="100%" height="100%">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
</table>
ตารางที่สร้างซ้อนใน<td>

21. การใส่รูปในตาราง
วิธีนี้จะคล้ายกับการใส่ข้อความทั่วไป เพียงแต่ใช้แท็ก <img> ในการแสดงรูป
www.rongrean.com Orjix
<table border="1px" width="100%" height="100%">
<tr>
<td>pic1<br><img src="rockmanzx.jpg"/></td>
<td>pic2<br><img src="band.jpg"/></td>
</tr>
</table>

22. การกาหนดความกว้างของคอลัมน์ <colgroup>
แท็ก colgroup มีลักษณะการใช้งานดังนี้
www.rongrean.com Orjix
<table border="1px" width="100%" height="100%">
<colgroup span="2" width="150px"></colgroup>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td>
</tr>
<tr>
<td>5</td><td>6</td><td>7</td><td>8</td>
</tr>
</table>
กาหนดว่ามีผลกับ 2 คอลัมน์
Colspan=“2”
Width=“150px”
แท็ก <colgroup> นั้นจะประกาศไว้
ภายใต้แท็ก <table> เสมอ

23. การกาหนดความกว้างของแต่ละคอลัมน์ <col>
เนื่องจาก <colgroup> มีข้อเสียตรงที่ไม่สามารถกาหนดความกว้างของคอลัมน์
อื่นๆ นอกเหนือจากใน colspan ได้ เราจึงใช้แท็ก <col> ช่วยในการกาหนด
ความกว้างของคอลัมน์เหล่านั้น
www.rongrean.com Orjix
<table border="1px">
<colgroup>
<col span="2" width="50px"/>
<col width="150px"/>
<col span="2" width="100px"/>
</colgroup>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
</tr>
<tr>
<td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
</tr>
</table>
แท็ก <col> จะประกาศไว้ภายใต้แท็ก
<colgroup>

24. การกาหนดความกว้างของแต่ละคอลัมน์ <col>
www.rongrean.com Orjix
Span=“2”
Width=“50px”
Span=“1”
Width=“150px”
Span=“2”
Width=“100px”

25. การแบ่งส่วนตาราง <thead>,<tbody>,<tfoot>
เราสามารถแบ่งตารางออกเป็น 3 ส่วนด้วยกัน คือ
www.rongrean.com Orjix
•<thead> (table header) ส่วนหัวของตาราง
•<tbody> (table body) ส่วนของข้อมูลในตาราง
•<tfoot> (table footer) ส่วนสรุปข้อมูลของตาราง
<table border="1px">
<thead>
<tr>
<td>…</td>
</tr>
</thead>
<tbody>
<tr>
<td>…</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>…</td>
</tr>
</tfoot>
</table>
Table header
Table body
Table footer
*แท็ก <thead>, <tbody>
และ <tfoot> จะใส่ไว้ก่อนแท็ก
<tr>

26. การแบ่งส่วนตาราง <thead>,<tbody>,<tfoot>
ตัวอย่าง
www.rongrean.com Orjix
<table border="1px">
<thead>
<tr>
<td>head1</td><td>head2</td><td>head3</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>6</td><td>7</td><td>8</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>footer1</td><td>footer2</td><td>footer3</td>
</tr>
</tfoot>
</table>

27. การแบ่งส่วนตาราง <thead>,<tbody>,<tfoot>
แท็ก <thead>,<tbody>,<tfoot> ไม่ว่าจะใส่ไว้ตรงไหนก็ตาม
โปรแกรมจะวางตามลาดับ thead>tbody>tfoot เสมอ
www.rongrean.com Orjix
<table border="1px">
<tfoot>
<tr>
<td>footer1</td><td>footer2</td><td>footer3</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>6</td><td>7</td><td>8</td>
</tr>
</tbody>
<thead>
<tr>
<td>head1</td><td>head2</td><td>head3</td>
</tr>
</thead>
</table>