Session3 part2

27
Orjix www.RongRean.com หหหหหหหห หหหหหหหหหหหหห HTML: Session หหห 3 หหหหหห 2 หหหหหหหหหหหหหหหห หหหหหหหหหหหหหหหห

Transcript of Session3 part2

Page 1: Session3 part2

Orjix

www.RongRean.com

หลกสตร สรางเวบดวย HTML: Session ท 3 ตอนท 2จดขอมลใหเปนสดสวนดวยตาราง

Page 2: Session3 part2

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

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

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

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

Orjix

เวนระยะระหวางขอมลในเซลลกบกรอบเซลล<table border="1px" cellpadding="20px"><tr>

<td>column1</td><td>column2</td>

</tr></table>

www.rongrean.com

cellpadding จะเพมขนาดของชอง วางระหวางขอบของ column กบ

ขอความขางใน

Page 7: Session3 part2

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

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

ปรบขนาดชองเซลล <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

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

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

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

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

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

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

Orjix

Attribute ของ frame

www.rongrean.com

คำาสง รายละเอยดAbove แสดงเฉพาะเสนดานบนของชอง

เซลลBelow แสดงเฉพาะเสนดานลางของ

ชองเซลลBorder แสดงเสนทกๆดานBox แสดงเสนทกๆดานHsides แสดงเสนแนวนอนทกเสนLhs แสดงเฉพาะเสนดานซายของ

ชองเซลลRhs แสดงเฉพาะเสนดานขวาของชอง

เซลลVoid ไมแสดงเสนกรอบVsides แสดงเสนแนวตงทกเสน

Page 17: Session3 part2

Orjix

Attribute ของ rules

www.rongrean.com

คำาสง รายละเอยดAll แสดงเสนแบงชองเซลลทกเสนCols แสดงเสนแบงชองเซลลเฉพาะเสน

columnGroup แสดงเฉพาะเสนแบงกลมเซลลทเกด

จากแทก thead, tbody, tfoot หรอ colgroup

None ไมแสดงเสนแบงชองเซลลRows แสดงเสนแบงชองเซลลเฉพาะเสน

row

Page 18: Session3 part2

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

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

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

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

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

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

Orjix

การกำาหนดความกวางของแตละคอลมน <col>

www.rongrean.com

Span=“2”Width=“50px”

Span=“1”Width=“150px”

Span=“2”Width=“100px”

Page 25: Session3 part2

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

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

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>