Session3 part2

Orjix

www.RongRean.com

หลกสตร สรางเวบดวย HTML: Session ท 3 ตอนท 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 ชอง แตเราจะมองไมเหนเสนขอบตาราง เนองจากโดยปรกตแลวโปรแกรมจะซอนเสนตารางไว

การใสหวขอ <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> จะมความหนาของตวอกษรมากกวา และจดใหขอความอยตรงกลางชอง

การกำาหนดขอความกำากบใหกบตาราง <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>


เราสามารถใช attribute align=“…”เพอกำาหนดตำาแหนงของ caption ได เชน

<caption align=“bottom”>…..

ความหนาของเสนตารางและความหางของชองเซลล<table border="10px" cellspacing="20px">

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

</tr></table>


เมอกำาหนดความหนาของ border ใหเพมขนขนาดของเสนขอบตารางจะเพมขนตาม

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

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


</tr></table>


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

ปรบความกวางและความสงของตาราง<table width="50%" border="1px"><tr><td>column1</td><td>column2</td></tr></table>

*สงเกตวาความยาวของตาราง จะมขนาดเปนครงเดยวของหนาตาง browser


50%

50%

ปรบความกวางและความสงของตาราง<table height="50%" border="1px">

<tr><td>column1</td><td>column2</td></tr></table>

*เชนเดยวกนกบ width, height=“50%” จะทำาใหตารางมความสงเทากบครงนงของความสงทงหมดของ browser


50%

50%

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


</tr></table>


rowspan จะรวมชองตารางในแนวตง และดนตารางทเหลอไปขางหลง ทำาให column ของ <tr> ท 2 ถกผลกถอยหลงไปอก 1 ชอง

*rowspan จะรวมชองของตารางทอยตำากวา เพราะฉะนน ถาเราใส rowspan ไปใน <tr> อนท 2 จะไมเกดผลใดๆ เพราะไมมแถวทอยตำากวาแถวทสองแลว

การกำาหนดสในชองเซลล<table border="1px” bgcolor="#00ff00"><tr>


</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>


</tr><tr>


</tr></table>


ใสรปภาพใหกบพนหลงของตาราง<table border="1px" background="rockman.jpg"><tr>


</tr><tr>


</tr></table>


BEFORE

AFTER

ใสรปภาพใหกบพนหลงของตาราง


<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)ในตาราง

กำาหนดการแสดงเสนของตาราง<table border="1px" frame="border" rules="all">

<tr><td>column1</td><td>column2</td><td>column3</td>

</tr><tr>


</tr><tr>


</tr></table>


Attribute ทใชในการกำาหนดเสนของตารางคอ frame และ rulesโดย frame กำาหนดเสนของรอบนอก และ rules กำาหนดเสนภายในตาราง

rulesframe

Attribute ของ frame


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

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

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

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

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

Attribute ของ rules


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

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

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

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

row

จดตำาแหนงขอมลในตารางเราสามารถจดขอมลทแสดงใหอยชดขวา ชดซาย หรอ

ตรงกลางไดดงน


<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

จดตำาแหนงขอมลในตารางการจดขอมลในแนวตง ใหชดขอบบน ขอบลาง หรอ

อยกงกลางของตารางทำาไดดงน



<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

การซอนตารางการซอนตารางนนสามารถชวยในการนำาเสนอขอมลท

ซบซอนได




</tr><tr>

<td>column4</td><td>column5</td><td>


<td>A</td><td>B</td>

</tr><tr>

<td>C</td><td>D</td>

</tr></table>

</td></tr></table>

ตารางทสรางซอนใน<td>

การใสรปในตารางวธนจะคลายกบการใสขอความทวไป เพยงแตใชแทก

<img> ในการแสดงรป



<td>pic1<br><img src="rockmanzx.jpg"/></td>

<td>pic2<br><img src="band.jpg"/></td></tr></table>

การกำาหนดความกวางของคอลมน <colgroup>

แทก colgroup มลกษณะการใชงานดงน


<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> เสมอ

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

เนองจาก <colgroup> มขอเสยตรงทไมสามารถกำาหนดความกวางของคอลมนอนๆ นอกเหนอจากใน colspan ได เราจงใชแทก <col> ชวยในการกำาหนดความกวางของคอลมนเหลานน


<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>

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


Span=“2”Width=“50px”



การแบงสวนตาราง <thead>,<tbody>,<tfoot>

เราสามารถแบงตารางออกเปน 3 สวนดวยกน คอ


•<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>


ตวอยาง


<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>


แทก <thead>,<tbody>,<tfoot> ไมวาจะใสไวตรงไหนกตาม โปรแกรมจะวางตามลำาดบ thead>tbody>tfoot เสมอ


<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>

Education

Session3 part2