session3 part2
TRANSCRIPT
![Page 1: Session3 part2](https://reader036.vdocuments.net/reader036/viewer/2022081520/587a5ddf1a28ab520b8b7063/html5/thumbnails/1.jpg)
Orjix
www.RongRean.com
หลกสตร สรางเวบดวย HTML: Session ท 3 ตอนท 2จดขอมลใหเปนสดสวนดวยตาราง
![Page 2: Session3 part2](https://reader036.vdocuments.net/reader036/viewer/2022081520/587a5ddf1a28ab520b8b7063/html5/thumbnails/2.jpg)
Orjix
ทดลองสรางตาราง<table><tr>
<td><p>this is table content.</p></td><td><p>this is table content2.</p></td>
</tr></table>
www.rongrean.com
<table> เปนการประกาศวาเรมสรางตาราง<tr> เปนการประกาศสรางแถว(row)<td>เปนการประกาศสรางหลก(column)
ผลทไดจากโคด จะสรางตาราง ขนมา 1 แถว 2 ชอง แตเราจะ
มองไมเหนเสนขอบตารางเนองจากโดยปรกตแลวโปรแกรมจะซอนเสนตารางไว
![Page 3: Session3 part2](https://reader036.vdocuments.net/reader036/viewer/2022081520/587a5ddf1a28ab520b8b7063/html5/thumbnails/3.jpg)
Orjix
การใสหวขอ <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
Attribute border=“1” ทเรา ใสเขาไปภายใต tag table จะ
กำาหนดใหแสดงเสนขอบ ตารางทมขนาดเทากบ 1
<th> ทำางานเหมอนกบ <td> คอจะสราง column ขนมา
ตางกบแคขอความทอยภาย ใต <th> จะมความหนาของ
ตวอกษรมากกวา และจดใหขอความอยตรงกลางชอง
![Page 4: Session3 part2](https://reader036.vdocuments.net/reader036/viewer/2022081520/587a5ddf1a28ab520b8b7063/html5/thumbnails/4.jpg)
Orjix
การกำาหนดขอความกำากบใหกบตาราง <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
เราสามารถใช attribute align=“…” เพอกำาหนดตำาแหนงของ caption ได เชน
<caption align=“bottom”>…..
![Page 5: Session3 part2](https://reader036.vdocuments.net/reader036/viewer/2022081520/587a5ddf1a28ab520b8b7063/html5/thumbnails/5.jpg)
Orjix
ความหนาของเสนตารางและความหางของชองเซลล<table border="10px" cellspacing="20px">
<tr><td>column1</td><td>column2</td>
</tr></table>
www.rongrean.com
เมอกำาหนดความหนาของborder ใหเพมขนขนาดของเสนขอบตารางจะเพมขนตาม
เมอกำาหนดขนาดของ cellspacing ชองวางระหวาง
ขอบตารางกบชองของ column จะเพมขน
![Page 6: Session3 part2](https://reader036.vdocuments.net/reader036/viewer/2022081520/587a5ddf1a28ab520b8b7063/html5/thumbnails/6.jpg)
Orjix
เวนระยะระหวางขอมลในเซลลกบกรอบเซลล<table border="1px" cellpadding="20px"><tr>
<td>column1</td><td>column2</td>
</tr></table>
www.rongrean.com
cellpadding จะเพมขนาดของชอง วางระหวางขอบของ column กบ
ขอความขางใน
![Page 7: Session3 part2](https://reader036.vdocuments.net/reader036/viewer/2022081520/587a5ddf1a28ab520b8b7063/html5/thumbnails/7.jpg)
Orjix
ปรบความกวางและความสงของตาราง<table width="50%" border="1px"><tr>
<td>column1
</td><td>
column2</td>
</tr></table>
* สงเกตวาความยาวของตาราง จะมขนาดเปนครงเดยวของหนาตางbrowser
www.rongrean.com
50%
50%
![Page 8: Session3 part2](https://reader036.vdocuments.net/reader036/viewer/2022081520/587a5ddf1a28ab520b8b7063/html5/thumbnails/8.jpg)
Orjix
ปรบความกวางและความสงของตาราง<table height="50%" border="1px">
<tr><td>column1</td><td>column2</td>
</tr></table>
* เชนเดยวกนกบ width, height=“50%” จะทำาใหตารางมความสง
เทากบครงนงของความสงทงหมดของ browserwww.rongrean.com
50%
50%
![Page 9: Session3 part2](https://reader036.vdocuments.net/reader036/viewer/2022081520/587a5ddf1a28ab520b8b7063/html5/thumbnails/9.jpg)
ปรบขนาดชองเซลล <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 ชองไดเชนกน
![Page 10: Session3 part2](https://reader036.vdocuments.net/reader036/viewer/2022081520/587a5ddf1a28ab520b8b7063/html5/thumbnails/10.jpg)
Orjix
ปรบขนาดชองเซลล<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
rowspan จะรวมชองตารางในแนวตง และดนตารางทเหลอไปขางหลง ทำาให
column ของ <tr> ท 2 ถกผลกถอย หลงไปอก 1 ชอง
*rowspan จะรวมชองของตารางทอย ตำากวา เพราะฉะนน ถาเราใส rowspan
ไปใน <tr> อนท 2 จะไมเกดผลใดๆเพราะไมมแถวทอยตำากวาแถวทสองแลว
![Page 11: Session3 part2](https://reader036.vdocuments.net/reader036/viewer/2022081520/587a5ddf1a28ab520b8b7063/html5/thumbnails/11.jpg)
Orjix
การกำาหนดสในชองเซลล<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
Attribute “bgcolor” จะกำาหนดสของพนหลงของตาราง
สงเกตวา ถาเราใส attribute นไว ภายใต <table> จะเปลยนสของ
ทงตาราง แตถาเราใส attribute นไวภายใต
<td> หรอ <tr> สกจะเกดขนกบcolumn หรอ row นนๆ เทานน
![Page 12: Session3 part2](https://reader036.vdocuments.net/reader036/viewer/2022081520/587a5ddf1a28ab520b8b7063/html5/thumbnails/12.jpg)
Orjix
ใสสใหกรอบของตาราง<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
![Page 13: Session3 part2](https://reader036.vdocuments.net/reader036/viewer/2022081520/587a5ddf1a28ab520b8b7063/html5/thumbnails/13.jpg)
Orjix
ใสรปภาพใหกบพนหลงของตาราง<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
BEFORE
AFTER
![Page 14: Session3 part2](https://reader036.vdocuments.net/reader036/viewer/2022081520/587a5ddf1a28ab520b8b7063/html5/thumbnails/14.jpg)
Orjix
ใสรปภาพใหกบพนหลงของตาราง
www.rongrean.com
<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)ในตาราง
![Page 15: Session3 part2](https://reader036.vdocuments.net/reader036/viewer/2022081520/587a5ddf1a28ab520b8b7063/html5/thumbnails/15.jpg)
Orjix
กำาหนดการแสดงเสนของตาราง<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
Attribute ทใชในการกำาหนดเสนของ ตารางคอ
frame และ rules โดย frame กำาหนดเสนของรอบนอก และ rules กำาหนดเสนภายในตาราง
rulesframe
![Page 16: Session3 part2](https://reader036.vdocuments.net/reader036/viewer/2022081520/587a5ddf1a28ab520b8b7063/html5/thumbnails/16.jpg)
Orjix
Attribute ของ frame
www.rongrean.com
คำาสง รายละเอยดAbove แสดงเฉพาะเสนดานบนของชอง
เซลลBelow แสดงเฉพาะเสนดานลางของ
ชองเซลลBorder แสดงเสนทกๆดานBox แสดงเสนทกๆดานHsides แสดงเสนแนวนอนทกเสนLhs แสดงเฉพาะเสนดานซายของ
ชองเซลลRhs แสดงเฉพาะเสนดานขวาของชอง
เซลลVoid ไมแสดงเสนกรอบVsides แสดงเสนแนวตงทกเสน
![Page 17: Session3 part2](https://reader036.vdocuments.net/reader036/viewer/2022081520/587a5ddf1a28ab520b8b7063/html5/thumbnails/17.jpg)
Orjix
Attribute ของ rules
www.rongrean.com
คำาสง รายละเอยดAll แสดงเสนแบงชองเซลลทกเสนCols แสดงเสนแบงชองเซลลเฉพาะเสน
columnGroup แสดงเฉพาะเสนแบงกลมเซลลทเกด
จากแทก thead, tbody, tfoot หรอ colgroup
None ไมแสดงเสนแบงชองเซลลRows แสดงเสนแบงชองเซลลเฉพาะเสน
row
![Page 18: Session3 part2](https://reader036.vdocuments.net/reader036/viewer/2022081520/587a5ddf1a28ab520b8b7063/html5/thumbnails/18.jpg)
Orjix
จดตำาแหนงขอมลในตาราง เราสามารถจดขอมลทแสดงใหอยชดขวา ชดซาย หรอ
ตรงกลางไดดงน
www.rongrean.com
<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
![Page 19: Session3 part2](https://reader036.vdocuments.net/reader036/viewer/2022081520/587a5ddf1a28ab520b8b7063/html5/thumbnails/19.jpg)
Orjix
จดตำาแหนงขอมลในตาราง การจดขอมลในแนวตง ใหชดขอบบน ขอบลาง หรออย
กงกลางของตารางทำาไดดงน
www.rongrean.com
<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
![Page 20: Session3 part2](https://reader036.vdocuments.net/reader036/viewer/2022081520/587a5ddf1a28ab520b8b7063/html5/thumbnails/20.jpg)
Orjix
การซอนตารางการซอนตารางนนสามารถชวยในการนำาเสนอขอมลท
ซบซอนได
www.rongrean.com
<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>
![Page 21: Session3 part2](https://reader036.vdocuments.net/reader036/viewer/2022081520/587a5ddf1a28ab520b8b7063/html5/thumbnails/21.jpg)
Orjix
การใสรปในตาราง วธนจะคลายกบการใสขอความทวไป เพยงแตใชแทก
<img> ในการแสดงรป
www.rongrean.com
<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>
![Page 22: Session3 part2](https://reader036.vdocuments.net/reader036/viewer/2022081520/587a5ddf1a28ab520b8b7063/html5/thumbnails/22.jpg)
Orjix
การกำาหนดความกวางของคอลมน <colgroup>
แทก colgroup มลกษณะการใชงานดงน
www.rongrean.com
<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> เสมอ
![Page 23: Session3 part2](https://reader036.vdocuments.net/reader036/viewer/2022081520/587a5ddf1a28ab520b8b7063/html5/thumbnails/23.jpg)
Orjix
การกำาหนดความกวางของแตละคอลมน <col>
เนองจาก <colgroup> มขอเสยตรงทไมสามารถ กำาหนดความกวางของคอลมนอนๆ นอกเหนอจากใน
colspan ได เราจงใชแทก <col> ชวยในการกำาหนดความกวางของคอลมนเหลานน
www.rongrean.com
<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>
![Page 24: Session3 part2](https://reader036.vdocuments.net/reader036/viewer/2022081520/587a5ddf1a28ab520b8b7063/html5/thumbnails/24.jpg)
Orjix
การกำาหนดความกวางของแตละคอลมน <col>
www.rongrean.com
Span=“2”Width=“50px”
Span=“1”Width=“150px”
Span=“2”Width=“100px”
![Page 25: Session3 part2](https://reader036.vdocuments.net/reader036/viewer/2022081520/587a5ddf1a28ab520b8b7063/html5/thumbnails/25.jpg)
Orjix
การแบงสวนตาราง <thead>,<tbody>,<tfoot>
เราสามารถแบงตารางออกเปน 3 สวนดวยกน คอ
www.rongrean.com
• <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>
![Page 26: Session3 part2](https://reader036.vdocuments.net/reader036/viewer/2022081520/587a5ddf1a28ab520b8b7063/html5/thumbnails/26.jpg)
Orjix
การแบงสวนตาราง <thead>,<tbody>,<tfoot>
ตวอยาง
www.rongrean.com
<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>
![Page 27: Session3 part2](https://reader036.vdocuments.net/reader036/viewer/2022081520/587a5ddf1a28ab520b8b7063/html5/thumbnails/27.jpg)
Orjix
การแบงสวนตาราง <thead>,<tbody>,<tfoot>
แทก <thead>,<tbody>,<tfoot> ไมวาจะใส ไวตรงไหนกตาม โปรแกรมจะวางตามลำาดบ
thead>tbody>tfoot เสมอ
www.rongrean.com
<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>