หน่วยที่ 7

จดั ขอ้ มูลให้เปน็ สัดสว่ น ด้วยตาราง ครูนริศรา ทองยศ [email protected]

ทดลองสรา้ งตาราง <table> เปน็ การ ประกาศวา่ เร่ิมสรา้ ง <table> ตาราง <tr> <tr> เปน็ การประกาศ สร้างแถว (row) <td> <td>เปน็ การประกาศ <p>this is table content.</p> สร้างหลัก(column) </td> <td> ผลท่ไี ด้จากโค้ด จะสร้าง <p>this is table content2.</p> ตารางข้ึนมา 1 แถว 2 </td> ช่อง แต่เราจะมองไมเ่ ห็น </tr> เส้นขอบตาราง เนือ่ งจาก </table> โดยปรกตแิ ล้วโปรแกรม จะซอ่ นเส้นตารางไว้

การใส่หัวข้อ <th> และตีเส้นตาราง<table border=\"1\"> Attribute border=“1” ทีเ่ ราใส่ <tr> เขา้ ไปภายใต้ tag table จะ <th>header1</th> กาหนดให้แสดงเส้นขอบตารางที่ <th>header2</th> มขี นาดเทา่ กับ 1 </tr> <th> ทางานเหมอื นกับ <td> <tr> คือจะสร้าง column ข้ึนมา ตา่ ง <td> กบั แคข่ ้อความท่ีอยภู่ ายใต้ <th> this is table content. จะมคี วามหนาของตัวอักษร </td> มากกวา่ และจดั ใหข้ อ้ ความอยู่ <td> ตรงกลางชอ่ ง this is table content2. </td> </tr></table>

การกาหนดข้อความกากบั ให้กับตาราง <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> border ใหเ้ พิ่มขนึ้ ขนาดของ เส้นขอบตารางจะเพม่ิ ขนึ้ ตาม <td>column1</td> <td>column2</td> เมอื่ กาหนดขนาดของ </tr> cellspacing ชอ่ งว่างระหว่าง </table> ขอบตารางกบั ช่องของ column จะเพิ่มข้นึ

เวน้ ระยะระหว่างข้อมลู ในเซลลก์ ับกรอบเซลล์<table border=\"1px\" cellpadding=\"20px\"><tr><td>column1</td> <td>column2</td> cellpadding จะเพ่ิมขนาดของ</tr> ช่องว่างระหวา่ งขอบของ column</table> กบั ขอ้ ความขา้ งใน

ปรบั ความกว้างและความสงู ของตาราง<table width=\"50%\" border=\"1px\"><tr> <td> column1 </td> <td> column2 </td></tr></table> 50% 50% *สงั เกตูวา่ ความยาวของตาราง จะมขี นาดเป็ นครงึ่ เดยี วของหนา้ ต่าง browser

ปรับความกวา้ งและความสูงของตาราง<table height=\"50%\" border=\"1px\"> 50% <tr> 50% <td> column1 </td> <td> column2 </td> </tr> </table>*เช่นเดยี วกันกับ width, height=“50%” จะทาใหต้ ารางมีความสูงเท่ากบั ครงึ่ นงึ ของความสงู ทง้ั หมดของ browser

ปรับขนาดช่องเซลล์ สงั เกตว่า <tr> แรกนัน้ มี column น้อยกวา่ ซง่ึ หากเราปล่อยไว้แบบเดิม ตารางจะอยู่ใน <table border=\"1px\"> รูปแบบน้ี <tr> ซึ่งทาให้ตารางดูไม่สวยงาม เกดิ ช่องวา่ งทีไ่ มไ่ ด้ <td colspan=\"2\">column1</td> ใชง้ าน <td>column2</td> เราจึงทาการรวม colunm แรกให้มีขนาด </tr> เท่ากับ 2 ช่อง <tr> <td>column3</td> เราสามารถทาให้ column ท่ี 2 เปน็ 2 ชอ่ งได้ <td>column4</td> เชน่ กนั <td>column5</td> </tr> </table>

ปรบั ขนาดช่องเซลล์<table border=\"1px\"> rowspan จะรวมชอ่ งตารางในแนวต้ัง และ<tr> ดันตารางท่เี หลอื ไปข้างหลงั ทาให้ column ของ <tr> ท่ี 2 ถกู ผลกั ถอยหลังไปอีก 1 <td rowspan=\"2\">column1</td> ชอ่ ง <td>column2</td></tr> *rowspan จะรวมช่องของตารางทอี่ ยูต่ า่<tr> กวา่ เพราะฉะนน้ั ถ้าเราใส่ rowspan ไปใน <td>column3</td> <tr> อันท่ี 2 จะไม่เกิดผลใดๆ เพราะไมม่ ีแถว <td>column4</td> ทีอ่ ยู่ตา่ กวา่ แถวท่สี องแลว้ <td>column5</td></tr></table>

การกาหนดสีในช่องเซลล์<table border=\"1px” bgcolor=\"#00ff00\"> Attribute “bgcolor” จะกาหนดสขี องพื้น<tr> หลงั ของตาราง สงั เกตว่า ถา้ เราใส่ attribute น้ไี ว้ภายใต้ <td>column1</td> <table> จะเปล่ียนสขี องทั้งตาราง <td>column2</td> แตถ่ า้ เราใส่ attribute นไ้ี ว้ภายใต้ <td></tr> หรอื <tr> สกี ็จะเกดิ ข้ึนกับ column หรอื</table> row น้ันๆ เท่าน้ัน<table border=\"1px\"><tr> <td bgcolor=\"#00ff00\">column1</td> <td>column2</td></tr></table>

ใส่สใี หก้ รอบของตาราง<table border=\"1px\" bordercolor=\"#00ff00\"><tr> <td>column1</td> <td>column2</td></tr><tr> <td>column3</td> <td>column4</td></tr></table>

ใสร่ ปู ภาพให้กับพนื้ หลังของตาราง BEFORE<table border=\"1px\" background=\"rockman.jpg\"> AFTER<tr> <td>column1</td> <td>column2</td></tr><tr> <td>column3</td> <td>column4</td></tr></table>

<table border=\"1px\" width=\"100%\" height=\"100%\"><tr> • ใสร่ ปู ภ<าtพdใbหaก้ckบั gพroนื้ uหnลdงั=ข\"rอoงcตkmารaาnงzx.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\"> Attribute ทีใ่ ช้ในการกาหนดเส้นของตาราง <tr> คอื <td>column1</td> frame และ rules <td>column2</td> โดย frame กาหนดเสน้ ของรอบนอก และ <td>column3</td> rules กาหนดเสน้ ภายในตาราง </tr> <tr> rules <td>column4</td> frame <td>column5</td> <td>column6</td> </tr> <tr> <td>column7</td> <td>column8</td> <td>column9</td> </tr> </table>

คำสง่ั รำยละเอยี ด Above แสดงเฉพาะเสน้ ดา้ นบนของชอ่ งเซลล ์ แสดงเฉพาะเสน้ ดา้ นลา่ งของชอ่ งเซลล ์• ABtetlroiwbute ของ frame แสดงเสน้ ทุกๆดา้ น แสดงเสน้ ทกุ ๆดา้ น Border แสดงเสน้ แนวนอนทกุ เสน้ Box แสดงเฉพาะเสน้ ดา้ นซา้ ยของชอ่ งเซลล ์ Hsides แสดงเฉพาะเสน้ ดา้ นขวาของชอ่ งเซลล ์ Lhs ไมแ่ สดงเสน้ กรอบ Rhs แสดงเสน้ แนวตงั้ ทุกเสน้ Void Vsides

คำสง่ั รำยละเอยี ด• Attribute ของ rules แสดงเสน้ แบ่งชอ่ งเซลลท์ กุ เสน้All แสดงเสน้ แบ่งชอ่ งเซลลเ์ ฉพาะเสน้ columnCols แสดงเฉพาะเสน้ แบง่ กลมุ่ เซลลท์ เี่ กดิ จากแท็ก thead,Group tbody, tfoot หรอื colgroup ไมแ่ สดงเสน้ แบง่ ชอ่ งเซลล ์NoneRows แสดงเสน้ แบง่ ชอ่ งเซลลเ์ ฉพาะเสน้ row

จัดตาแหน่งขอ้ มลู ในตาราง<table border=\"1px\" > <tr> • เราสา<<มttddารwwถiiddจttดั hhข==\"\"อ้ 11ม5500ลู ppทxxแ่ี \"\"สaaดlliiggงใnnห==อ\"\"้ crยiegชู่ nhดtิte\"ขr>\"วc>oาclouชlmuดิ mnซ1nา้<2ย/<td/หt>dร>อื ตรงกลางไดด้ งั นี้ <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> right center left justifyRigth ขอ้ ความชดิ ขอบขวาleftcenter ขอ้ ความชดิ ขอบซา้ ยJustify ขอ้ ความอยตู่ รงกลาง *รปู แบบนีจ้ ดั ใหข้ อ้ ความอยู่เต็มชอ่ ง คอื ตดิ ทง้ั ขอบซา้ ยและขวา (อยา่ งเชน่ ขอ้ ความในคอลมั น์ หนังสอื พมิ พ)์

จดั ตาแหน่งข้อมูลในตาราง<table border=\"1px\" width=\"100%\" height=\"100%\"><tr> กไดาดร้ จงั<<นดัttddีข้ vvอ้ aaมlliiูลggใnnน==แ\"\"นbbaoวstตteoงั้limnใeห\"\">ช้>cดcิooขluluอmmบnบn21น<<//tขtddอ>>บลา่ ง หรอื อยกู่ ง่ึ กลางของตารางทา • <td valign=\"middle\">column3</td> <td valign=\"top\">column4</td></tr></table>baseline *ตามเสน้ ฐาน ความแตกตา่ งของ baseline กบั bottombottom ชดิ ขอบลา่ งmiddle กงึ่ กลางtop ชดิ ขอบบน

การซอ้ นตาราง<table border=\"1px\" width=\"100%\" height=\"100%\"><tr> <td>column1</td> <td>column2</td> • การ<tซdอ>้ cนoตlumารnา3ง</น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> <td>C</td> <td>D</td> </tr> </table> </td></tr></table>

การใสร่ ปู ในตาราง<table border=\"1px\" width=\"100%\" height=\"100%\"> • วธิ นี ีจ้ <ะคtrล>า้ ยกบั การใสข่ อ้ ความทว่ั ไป เพยี งแตใ่ ชแ้ ท็ก <img> ในการแสดงรปู <td>pic1<br><img src=\"rockmanzx.jpg\"/></td> <td>pic2<br><img src=\"band.jpg\"/></td> </tr> </table>

การกาหนดความกว้างของคอลัมน<colgroup><table border=\"1px\" width=\"100%\" height=\"100%\"><colgroup span=\"2\" width=\"150px\"></colgroup><tr></tr> • แท็ก<tcd>o1l<g/rtdo>u<ptd>ม2ลี</กั tdษ>ณ<tdะ>ก3า</รtใdช><ง้ tาdน>4ด<งั/tนd>ี้<tr> กาหนดวา่ มผี ลกบั 2 คอลมั น์ <td>5</td><td>6</td><td>7</td><td>8</td></tr></table> Width=“150px”แท็ก <colgroup> นนั้ จะประกาศไว้ภายใต้แท็ก <table> เสมอ Colspan=“2”

การกาหนดความกวา้ งของแตล่ ะคอลมั น์ <col>•เนอื่ งจาก <colgroup> มขี อ้ เสยี ตรงทไ่ี มส่ ามารถกาหนดความกวา้ งของ คอลมั น์อนื่ ๆ นอกเหนอื จากใน colspan ได้ เราจึงใช้แท็ก <col> ชว่ ยในการ กาหนดความกวา้ งของคอลัมน์เหลา่ นน้ั<table border=\"1px\"><colgroup> แท็ก <col> จะประกาศไว ้ <col span=\"2\" width=\"50px\"/> ภายใตแ้ ท็ก <colgroup> <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> Span=“1” Width=“150px” Span=“2” Span=“2”Width=“50px” Width=“100px”

การแบง่ ส่วนตาราง <thead>,<tbody>,<tfoot>• เราสามารถแบง่ ตารางออกเป็น 3 สว่ นด้วยกนั คือ •<thead> (table header) สว่ นหวั ของตาราง •<tbody> (table body) ส่วนของขอ้ มลู ในตาราง •<tfoot> (table footer) สว่ นสรุปขอ้ มูลของตาราง<table border=\"1px\"> *แท็ก <thead>,<thead> <tbody> และ <tfoot> จะใสไ่ วก้ อ่ นแท็ก <tr> <tr> </tr> <td>…</td> Table header <tr> <td>…</td></thead> <td>…</td><tbody> </tr> Table body <tr></tbody><tfoot> Table footer </tr></tfoot></table>

การแบง่ สว่ นตาราง <thead>,<tbody>,<tfoot><table border=\"1px\"> <td>head1</td><td>head2</td><td>head3</td><thead> <td>1</td><td>2</td><td>3</td> <td>6</td><td>7</td><td>8</td> <tr> <td>footer1</td><td>footer2</td><td>footer3</td> • ตวั อ<ย/trา่ >ง</thead><tbody> <tr> </tr> <tr></tbody> </tr><tfoot> <tr> </tr></tfoot></table>

การแบ่งสว่ นตาราง <thead>,<tbody>,<tfoot><table border=\"1px\"><tfoot> <tr> <td>footer1</td><td>footer2</td><td>footer3</td> •แท็ก</t<r>thead>,<tbody>,<tfoot> ไม่ว่าจะใส่ไวต้ รงไหนกต็ าม โปรแกรมจะวาง<<t/btfoodoty>>ตามลาดับ thead>tbody>tfoot เสมอ <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>