Post on 15-Jan-2017
Orjix
www.RongRean.com
หลกสตร สรางเวบดวย HTML: Session ท 3 ตอนท 2จดขอมลใหเปนสดสวนดวยตาราง
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 ชอง แตเราจะ
มองไมเหนเสนขอบตารางเนองจากโดยปรกตแลวโปรแกรมจะซอนเสนตารางไว
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> จะมความหนาของ
ตวอกษรมากกวา และจดใหขอความอยตรงกลางชอง
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”>…..
Orjix
ความหนาของเสนตารางและความหางของชองเซลล<table border="10px" cellspacing="20px">
<tr><td>column1</td><td>column2</td>
</tr></table>
www.rongrean.com
เมอกำาหนดความหนาของborder ใหเพมขนขนาดของเสนขอบตารางจะเพมขนตาม
เมอกำาหนดขนาดของ cellspacing ชองวางระหวาง
ขอบตารางกบชองของ column จะเพมขน
Orjix
เวนระยะระหวางขอมลในเซลลกบกรอบเซลล<table border="1px" cellpadding="20px"><tr>
<td>column1</td><td>column2</td>
</tr></table>
www.rongrean.com
cellpadding จะเพมขนาดของชอง วางระหวางขอบของ column กบ
ขอความขางใน
Orjix
ปรบความกวางและความสงของตาราง<table width="50%" border="1px"><tr>
<td>column1
</td><td>
column2</td>
</tr></table>
* สงเกตวาความยาวของตาราง จะมขนาดเปนครงเดยวของหนาตางbrowser
www.rongrean.com
50%
50%
Orjix
ปรบความกวางและความสงของตาราง<table height="50%" border="1px">
<tr><td>column1</td><td>column2</td>
</tr></table>
* เชนเดยวกนกบ width, height=“50%” จะทำาใหตารางมความสง
เทากบครงนงของความสงทงหมดของ browserwww.rongrean.com
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>
www.rongrean.com Orjix
สงเกตวา <tr> แรกนนม column นอยกวา ซงหากเราปลอยไวแบบเดม
ตารางจะอยในรปแบบน
ซงทำาใหตารางดไมสวยงาม เกดชองวางทไมไดใชงาน
เราจงทำาการรวม colunm แรกใหม ขนาดเทากบ 2 ชอง
เราสามารถทำาให column ท 2 เปน2 ชองไดเชนกน
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 จะไมเกดผลใดๆเพราะไมมแถวทอยตำากวาแถวทสองแลว
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 นนๆ เทานน
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
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
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)ในตาราง
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
Orjix
Attribute ของ frame
www.rongrean.com
คำาสง รายละเอยดAbove แสดงเฉพาะเสนดานบนของชอง
เซลลBelow แสดงเฉพาะเสนดานลางของ
ชองเซลลBorder แสดงเสนทกๆดานBox แสดงเสนทกๆดานHsides แสดงเสนแนวนอนทกเสนLhs แสดงเฉพาะเสนดานซายของ
ชองเซลลRhs แสดงเฉพาะเสนดานขวาของชอง
เซลลVoid ไมแสดงเสนกรอบVsides แสดงเสนแนวตงทกเสน
Orjix
Attribute ของ rules
www.rongrean.com
คำาสง รายละเอยดAll แสดงเสนแบงชองเซลลทกเสนCols แสดงเสนแบงชองเซลลเฉพาะเสน
columnGroup แสดงเฉพาะเสนแบงกลมเซลลทเกด
จากแทก thead, tbody, tfoot หรอ colgroup
None ไมแสดงเสนแบงชองเซลลRows แสดงเสนแบงชองเซลลเฉพาะเสน
row
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
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
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>
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>
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> เสมอ
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>
Orjix
การกำาหนดความกวางของแตละคอลมน <col>
www.rongrean.com
Span=“2”Width=“50px”
Span=“1”Width=“150px”
Span=“2”Width=“100px”
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>
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>
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>