Download - Session3 part2

Transcript

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>

www.rongrean.com Orjix

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>

www.rongrean.com Orjix

เราสามารถใช่� attribute align=“…”เพื่( อก-าหนด้ต-าแหน�งขึ้อง caption ได้� เช่�น

<caption align=“bottom”>…..

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

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

</tr></table>

www.rongrean.com Orjix

เม( อก-าหนด้ค้ว่ามหนาขึ้อง border ให�เพื่� มขึ้"#นขึ้นาด้ขึ้องเส�นขึ้อบตารางจะเพื่� มขึ้"#นตาม

เม( อก-าหนด้ขึ้นาด้ขึ้อง cellspacing ช่�องว่�างระหว่�างขึ้อบตารางก�บช่�องขึ้อง column จะเพื่� มขึ้"#น

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

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

</tr></table>

www.rongrean.com Orjix

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

ปร�บคว็ามกว็างแลัะคว็ามสู�งข้องตาราง<table width="50%" border="1px">

<tr>

<td>

column1

</td>

<td>

column2

</td>

</tr>

</table>

*ส�งเกต.ว่�าค้ว่ามยาว่ขึ้องตาราง จะม�ขึ้นาด้เป็�นค้ร" งเด้�ยว่ขึ้องหน�าต�าง browser

www.rongrean.com Orjix

50%

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

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

</tr></table>

*เช่�นเด้�ยว่ก�นก�บ width, height=“50%” จะที่-าให�ตารางม�ค้ว่ามส.งเที่�าก�บค้ร" งน"งขึ้องค้ว่ามส.งที่�#งหมด้ขึ้อง browser

www.rongrean.com Orjix

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 ช่�องได้�เช่�นก�น

ปร�บข้นาด้ช่�องเซลัลั"<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 จะไม�เก�ด้ผลัใด้ๆ เพื่ราะไม�ม�แถว่ที่� อย.�ต- ากว่�าแถว่ที่� สองแลั�ว่

การก�าหนด้สู�ในช่�องเซลัลั"<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 น�#นๆ เที่�าน�#น

ใสู�สู�ใหกรอบข้องตาราง<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 Orjix

BEFORE

AFTER

ใสู�ร�ปภาพใหก�บพ&'นหลั�งข้องตาราง

www.rongrean.com Orjix

<td background="rockmanzx.jpg">column1</td><td>column2</td>

</tr><tr>

<td>column3</td><td background=“band.jpg">column4</td>

</tr></table>

<td background="rockmanzx.jpg">column1</td><td>column2</td>

</tr><tr>

<td>column3</td><td background=“band.jpg">column4</td>

</tr></table>

*กรณี�ที่� ใส�ร.ป็พื่(#นหลั�งขึ้องแต�ลัะช่�อง(column)ในตาราง*กรณี�ที่� ใส�ร.ป็พื่(#นหลั�งขึ้องแต�ลัะช่�อง(column)ในตาราง

ก�าหนด้การแสูด้งเสูนข้องตาราง<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 ก-าหนด้เส�นภายในตาราง

rulesframe

Attribute ข้อง frame

www.rongrean.com Orjix

ค�าสู��ง รายลัะเอ�ยด้Above แสด้งเฉพื่าะเส�นด้�านบนขึ้องช่�อง

เซ่ลัลั4Below แสด้งเฉพื่าะเส�นด้�านลั�างขึ้อง

ช่�องเซ่ลัลั4Border แสด้งเส�นที่5กๆด้�านBox แสด้งเส�นที่5กๆด้�านHsides แสด้งเส�นแนว่นอนที่5กเส�นLhs แสด้งเฉพื่าะเส�นด้�านซ่�ายขึ้อง

ช่�องเซ่ลัลั4Rhs แสด้งเฉพื่าะเส�นด้�านขึ้ว่าขึ้องช่�อง

เซ่ลัลั4Void ไม�แสด้งเส�นกรอบVsides แสด้งเส�นแนว่ต�#งที่5กเส�น

Attribute ข้อง rules

www.rongrean.com Orjix

ค�าสู��ง รายลัะเอ�ยด้All แสด้งเส�นแบ�งช่�องเซ่ลัลั4ที่5กเส�นCols แสด้งเส�นแบ�งช่�องเซ่ลัลั4เฉพื่าะเส�น

column

Group แสด้งเฉพื่าะเส�นแบ�งกลั5�มเซ่ลัลั4ที่� เก�ด้จากแที่&ก thead, tbody, tfoot หร(อ colgroup

None ไม�แสด้งเส�นแบ�งช่�องเซ่ลัลั4Rows แสด้งเส�นแบ�งช่�องเซ่ลัลั4เฉพื่าะเส�น

row

จั�ด้ต�าแหน�งข้อม�ลัในตารางเราสูามารถจั�ด้ข้อม�ลัที่��แสูด้งใหอย��ช่*ด้ข้ว็า ช่*ด้ซาย หร&อ

ตรงกลัางได้ด้�งน�'

www.rongrean.com Orjix

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

</tr></table>

Rigth ขึ้�อค้ว่ามช่�ด้ขึ้อบขึ้ว่าleft ขึ้�อค้ว่ามช่�ด้ขึ้อบซ่�ายcenter ขึ้�อค้ว่ามอย.�ตรงกลัางJustify *ร.ป็แบบน�#จ�ด้ให�ขึ้�อค้ว่ามอย.�เต&มช่�อง ค้(อต�ด้ที่�#งขึ้อบซ่�ายแลัะขึ้ว่า (อย�างเช่�น

ขึ้�อค้ว่ามในค้อลั�มน4หน�งส(อพื่�มพื่4)

right center left justify

จั�ด้ต�าแหน�งข้อม�ลัในตารางการจั�ด้ข้อม�ลัในแนว็ต�'ง ใหช่*ด้ข้อบบน ข้อบลั�าง หร&อ

อย��ก,�งกลัางข้องตารางที่�าได้ด้�งน�'

www.rongrean.com Orjix

<td valign="baseline">column1</td><td valign="bottom">column2</td><td valign="middle">column3</td><td valign="top">column4</td>

</tr></table>

<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

การซอนตารางการซอนตารางน�'นสูามารถช่�ว็ยในการน�าเสูนอข้อม�ลัที่��

ซ�บซอนได้

www.rongrean.com Orjix

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

</tr><tr>

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

</tr><tr>

</tr></table>

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

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

</tr><tr>

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

</tr><tr>

</tr></table>

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

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

การใสู�ร�ปในตารางว็*ธี�น�'จัะคลัายก�บการใสู�ข้อคว็ามที่��ว็ไป เพ�ยงแต�ใช่แที่�ก

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

www.rongrean.com Orjix

การก�าหนด้คว็ามกว็างข้องคอลั�มน" <colgroup>

แที่�ก colgroup ม�ลั�กษณะการใช่งานด้�งน�'

www.rongrean.com Orjix

ก-าหนด้ว่�าม�ผลัก�บ 2 ค้อลั�มน4

Colspan=“2”

Width=“150px”

แที่&ก <colgroup> น�#นจะป็ระกาศไว่�ภายใต�แที่&ก <table> เสมอ

การก�าหนด้คว็ามกว็างข้องแต�ลัะคอลั�มน" <col>

เน&�องจัาก <colgroup> ม�ข้อเสู�ยตรงที่��ไม�สูามารถก�าหนด้คว็ามกว็างข้องคอลั�มน"อ&�นๆ นอกเหน&อจัากใน colspan ได้ เราจั,งใช่แที่�ก <col> ช่�ว็ยในการก�าหนด้คว็ามกว็างข้องคอลั�มน"เหลั�าน�'น

www.rongrean.com Orjix

</colgroup><tr>

</colgroup><tr>

แที่&ก <col> จะป็ระกาศไว่�ภายใต�แที่&ก <colgroup>