HTML 6
การสร้างตาราง(Teble)
Table คำสั่งที่สำคัญสุดในการทำเว็บเพจHTML
ในหน้าเว็บเพจของเราประกอบด้วยข้อมูลมากมาย จึงจำเป็นที่จะต้องจัดเรียงข้อมูลให้เป็นระเบียบเพื่อให้อ่านง่าย และใช้งานพื้นที่ได้คุ้มค่าที่สุด ซึ่งตารางจะช่วยเราได้มาก และนิยมใช้มากในการจัดรูปแบบหน้าตาของเว็บไซต์ จะเห็นได้ว่าถ้าเราดู source code ของเว็บไซต์ส่วนใหญ่เราจะเห็นคำสั่งตารางอยู่ทั่วไปเต็มไปหมด ซึ่งในบทนี้เราจะมาลองสร้างตารางกัน
1.ลองสร้างตารางดู
ตารางจะแบ่งออกเป็น 2 ส่วน คือ
1.แถว <tr> คือจำนวนตารางในแนวนอน
2.หลัก <td> คือจำนวนตารางในแนวตั้ง
รูปแบบของคำสั่งตาราง
<table>
<tr>
<td></td>
</tr>
</table>
2.เส้นขอบตาราง
เมื่อพูดถึงตารางก็ต้องพูดถึงเส้นขอบของตาราง ซึ่งในบทนี้จะพูดถึงการกำหนดเส้นขอบของตาราง โดยขอบของตารางเราจะใช้ Attibute คำสั่ง border ในการควบคุม
รูปแบบของคำสั่ง border
<table border="ขนาดเส้นของขอบ"> <tr><td></td></tr> </table>
4.ใส่ช่องว่างให้ตาราง
ถ้าเรามีตาราง 6 ช่อง แต่มีข้อมูลอยู่เพียง 5 ชิ้น เมื่อเราเขียนข้อมูลใส่ตารางจะพบว่าตารางแสดงผลมีเส้นขาดหายไปดังนั้นเราจึงต้องใส่ค่าว่างไปให้ตารางเพื่อแสดงผลเส้นที่ขาดหายไป ด้วยการใช้
การใช้ช่องว่าง
<table> <tr><td> </td></tr> </table>
5.การผสานตาราง
ถ้าข้อมูลเขาเรา มี 1 หัวข้อใหญ่แต่มีข้อมูล ย่อยๆ 2 ชนิด ทำให้เราต้องทำการผสานตารางตามตัวอย่าง โดยมีหลักดังนี้
1.ผสานในหลักให้ใช้คำสั่ง colspan = "จำนวนช่องที่ต้องการผสาน"
2.ผสานในแถวให้ใช้คำสั่ง rowspan = "จำนวนช่องที่ต้องการผสาน"
ตัวอย่างคำสั่ง
<h4>การผสานตาราง ในหลัก:</h4>
<table border="1">
<tr>
<td>Data 1</td>
<td colspan="2">Data 2</td>
</tr>
<tr>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
</tr>
</table>
<h4>การผสานตาราง ในแถว:</h4>
<table border="1">
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td rowspan="2">Data 3</td>
<td>Data 4</td>
</tr>
<tr>
<td>Data 5</td>
</tr>
</table>
3.หัวข้อตาราง
ปรกตินั้นถ้าเราจะเขียนส่วนที่เป็นหัวข้อเราจะใช้ h tag หรือ <b> เพื่อเน้นส่วนที่เป็นหัวข้อ แต่ในส่วนของตารางมีคำสั่งให้เราใช้กันอยู่แล้ว นั่นคือ th
รูปแบบของคำสั่ง border
<table> <tr><th></th></tr> </table>
ตัวอย่างคำสั่งตั้งแต่ข้อ 1-3
<table border="1">
<tr>
<th>หัวข้อ</th>
<th>เนื้อหา</th>
</tr>
<tr>
<td>1</td>
<td>เนื้อหาข้อที่ 1</td>
</tr>
<tr>
<td>2</td>
<td>เนื้อหาข้อที่ 2</td>
</tr>
</table>
6.ตารางซ้อนตาราง
การทำตารางซ้อนตาราง เป็นการจัดหน้าเว็บที่ใช้กันบ่อยมาก และเป็นการใช้งานที่มีประสิทธิภาพ ทำให้จัดเรียงข้อมูลได้ดีขึ้น
ตัวอย่างคำสั่ง
<table border="1">
<tr>
<td colspan="2"><img src="logo.jpg"></td>
<tr>
<td>
<!-- ตารางที่ซ้อนอยู่ -->
<table border="1">
<tr>
<td>เนื้อหาของเว็บไซต์</td>
</tr>
<tr>
<td>ทำเว็บเบื้องต้น</td>
</tr>
<tr>
<td>การเขียน HTML</td>
</tr>
<tr>
<td>การใช้งาน CSS</td>
</tr>
</table>
</td>
<td>เว็บไซต์ www.hellomyweb.com <br>
เป็นเว็บไซต์ที่สอนทำเว็บ<br>
ซึ่งมีเนื้อหาตามหัวข้อทางซ้ายมือ<br>
</td>
</tr>
Table คำสั่งที่สำคัญสุดในการทำเว็บเพจHTML
ในหน้าเว็บเพจของเราประกอบด้วยข้อมูลมากมาย จึงจำเป็นที่จะต้องจัดเรียงข้อมูลให้เป็นระเบียบเพื่อให้อ่านง่าย และใช้งานพื้นที่ได้คุ้มค่าที่สุด ซึ่งตารางจะช่วยเราได้มาก และนิยมใช้มากในการจัดรูปแบบหน้าตาของเว็บไซต์ จะเห็นได้ว่าถ้าเราดู source code ของเว็บไซต์ส่วนใหญ่เราจะเห็นคำสั่งตารางอยู่ทั่วไปเต็มไปหมด ซึ่งในบทนี้เราจะมาลองสร้างตารางกัน
1.ลองสร้างตารางดู
ตารางจะแบ่งออกเป็น 2 ส่วน คือ
1.แถว <tr> คือจำนวนตารางในแนวนอน
2.หลัก <td> คือจำนวนตารางในแนวตั้ง
รูปแบบของคำสั่งตาราง
<table>
<tr>
<td></td>
</tr>
</table>
2.เส้นขอบตาราง
เมื่อพูดถึงตารางก็ต้องพูดถึงเส้นขอบของตาราง ซึ่งในบทนี้จะพูดถึงการกำหนดเส้นขอบของตาราง โดยขอบของตารางเราจะใช้ Attibute คำสั่ง border ในการควบคุม
รูปแบบของคำสั่ง border
<table border="ขนาดเส้นของขอบ"> <tr><td></td></tr> </table>
4.ใส่ช่องว่างให้ตาราง
ถ้าเรามีตาราง 6 ช่อง แต่มีข้อมูลอยู่เพียง 5 ชิ้น เมื่อเราเขียนข้อมูลใส่ตารางจะพบว่าตารางแสดงผลมีเส้นขาดหายไปดังนั้นเราจึงต้องใส่ค่าว่างไปให้ตารางเพื่อแสดงผลเส้นที่ขาดหายไป ด้วยการใช้
การใช้ช่องว่าง
<table> <tr><td> </td></tr> </table>
5.การผสานตาราง
ถ้าข้อมูลเขาเรา มี 1 หัวข้อใหญ่แต่มีข้อมูล ย่อยๆ 2 ชนิด ทำให้เราต้องทำการผสานตารางตามตัวอย่าง โดยมีหลักดังนี้
1.ผสานในหลักให้ใช้คำสั่ง colspan = "จำนวนช่องที่ต้องการผสาน"
2.ผสานในแถวให้ใช้คำสั่ง rowspan = "จำนวนช่องที่ต้องการผสาน"
ตัวอย่างคำสั่ง
<h4>การผสานตาราง ในหลัก:</h4>
<table border="1">
<tr>
<td>Data 1</td>
<td colspan="2">Data 2</td>
</tr>
<tr>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
</tr>
</table>
<h4>การผสานตาราง ในแถว:</h4>
<table border="1">
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td rowspan="2">Data 3</td>
<td>Data 4</td>
</tr>
<tr>
<td>Data 5</td>
</tr>
</table>
7.กำหนดระยะห่างของช่อง
ในตัวอย่างจะเป็นการแสดงการใช้งาน cellpadding และ cellspacing โดยทั้ง 2 อย่างมีการใช้งานดังนี้
1. cellpadding ใช้กำหนดระยะห่างระหว่างข้อมูล กับเส้นขอบตาราง
2. cellspacing ใช้กำหนดระยะห่างระหว่างเส้นตารางภายนอก และภายใน ให้ลองสังเกตุจากตัวอย่างดู จะเห็นว่าแตกต่างจากการใช้ border
ตัวอย่างคำสั่ง
<h4>ตารางทั่วไป</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>ตาราง cellpadding="10" </h4>
<table border="1" cellpadding="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>ตาราง cellspacing="10" </h4>
<table border="1" cellspacing="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
9.ขนาดตาราง
ขนาดของตารางกำหนดได้โดย Attibute คำสั่ง width และความสูงใช้คำสั่ง height ซึ่งเราจะกำหนดหน่วยเป็น % หรือ px(pixel) แล้วแต่จุดประสงค์
1.แบบเปอร์เซนต์ (%) ขนาดจะเปลี่ยนตามขนาดหน้าต่างของ web browser ที่เปลี่ยนแปลง
2.แบบ pixel (px) ขนาดจะเท่าที่เรากำหนดตลอดไม่มีการเปลี่ยนแปลง ถ้าเราไม่กำหนดหน่วยเป็น % ตัวของ html จะกำหนดให้เป็น px เสมอ
ตัวอย่างคำสั่ง
<p>ตารางกำหนดขนาดแบบ 50% </p>
<table border="1" width="50%">
<tr>
<td> data 1 </td>
<td> data 2 </td>
</tr>
<tr>
<td> data 3 </td>
<td> data 4 </td>
</tr>
</table>
<p>ตารางกำหนดขนาดแบบ 200px </p>
<table border="1" width="200">
<tr>
<td> data 1 </td>
<td> data 2 </td>
</tr>
<tr>
<td> data 3 </td>
<td> data 4 </td>
</tr>
</table>
<p>ตารางกำหนดความสูงของช่อง 50px </p>
<table border="1" width="200">
<tr>
<td height="50"> data 1 </td>
<td> data 2 </td>
</tr>
<tr>
<td> data 3 </td>
<td> data 4 </td>
</tr>
</table>
3.หัวข้อตาราง
ปรกตินั้นถ้าเราจะเขียนส่วนที่เป็นหัวข้อเราจะใช้ h tag หรือ <b> เพื่อเน้นส่วนที่เป็นหัวข้อ แต่ในส่วนของตารางมีคำสั่งให้เราใช้กันอยู่แล้ว นั่นคือ th
รูปแบบของคำสั่ง border
<table> <tr><th></th></tr> </table>
ตัวอย่างคำสั่งตั้งแต่ข้อ 1-3
<table border="1">
<tr>
<th>หัวข้อ</th>
<th>เนื้อหา</th>
</tr>
<tr>
<td>1</td>
<td>เนื้อหาข้อที่ 1</td>
</tr>
<tr>
<td>2</td>
<td>เนื้อหาข้อที่ 2</td>
</tr>
</table>
6.ตารางซ้อนตาราง
การทำตารางซ้อนตาราง เป็นการจัดหน้าเว็บที่ใช้กันบ่อยมาก และเป็นการใช้งานที่มีประสิทธิภาพ ทำให้จัดเรียงข้อมูลได้ดีขึ้น
ตัวอย่างคำสั่ง
<table border="1">
<tr>
<td colspan="2"><img src="logo.jpg"></td>
<tr>
<td>
<!-- ตารางที่ซ้อนอยู่ -->
<table border="1">
<tr>
<td>เนื้อหาของเว็บไซต์</td>
</tr>
<tr>
<td>ทำเว็บเบื้องต้น</td>
</tr>
<tr>
<td>การเขียน HTML</td>
</tr>
<tr>
<td>การใช้งาน CSS</td>
</tr>
</table>
</td>
<td>เว็บไซต์ www.hellomyweb.com <br>
เป็นเว็บไซต์ที่สอนทำเว็บ<br>
ซึ่งมีเนื้อหาตามหัวข้อทางซ้ายมือ<br>
</td>
</tr>
8.ใส่พื้นหลังให้ตาราง
ในบทนี้จะใส่พื้นหลังให้กับตาราง และช่องของตาราง โดยพื้นหลังมี 2 แบบคือ
1.แบบที่เป็นสี ใช้คำสั่ง bgcolor
2.แบบที่เป็นรูปภาพ ใช้คำสั่ง background
ตัวอย่างคำสั่ง
<h4>ใส่พื้นหลังเป็นสี:</h4>
<table border="1"
bgcolor="yellow">
<tr>
<td>Data 100</td>
<td>Data 200</td>
</tr>
<tr>
<td>Data 300</td>
<td>Data 400</td>
</tr>
</table>
<h4>ใส่พื้นหลังเป็นรูปภาพ:</h4>
<table border="1"
background="logo.jpg">
<tr>
<td>Data 100</td>
<td>Data 200</td>
</tr>
<tr>
<td>Data 300</td>
<td>Data 400</td>
</tr>
</table>
<h4>ใส่พื้นหลังให้กับช่อง:</h4>
<table border="1">
<tr>
<td background="logo.jpg">Data 100</td>
<td>Data 200</td>
</tr>
<tr>
<td>Data 300</td>
<td bgcolor="yellow">Data 400</td>
</tr>
</table>
10.การจัดเรียงตัวอักษรในช่องของตาราง
ในบทนี้จะเป็นเรื่องของ การจัดเรียงตัวอักษร หรือ รูปภาพ ในช่องของตารางให้ชิดซ้าย หรือชิดขวา หรือจัดเข้ากึ่งกลาง ซึ่งจะทำให้ตารางข้อมูลดูได้ง่ายขึ้น ซึ่งเราจะใช้ Attibute คำสั่ง Align
ตัวอย่างคำสั่ง
<p>การใช้ align ในการจัดตัวอักษรในตาราง</p>
<table border="1" width="100%" cellpadding="10">
<tr>
<th align="center" width="50%"> โครงการก่อสร้าง</th>
<th align="center"> มูลค่างาน (บาท) </th>
</tr>
<tr>
<td align="left">โรงแรม</td>
<td align="right">3,600,000,000</td>
</tr>
<tr>
<td align="left">spa</td>
<td align="right">700,000,000</td>
</tr>
</table>
11.การกำหนดขอบของตาราง
ขอบของตารางเราสามารถกำหนดได้ว่าจะให้มีขอบที่ด้านใดบ้าง โดยใช้ Attibute คำสั่ง frame ซึ่งมีค่าที่ใส่ให้ frame ตามข้อมูลด้านล่าง
BORDERแสดงเส้นกรอบทุกด้านของช่องตาราง
VOIDลบเส้นกรอบทุกด้านของตาราง
HSIDESแสดงเส้นด้านบนและด้านล่างของช่อางตาราง
ABOVEแสดงเส้นด้านบนของช่องตาราง
BELOWแสดงเส้นด้านล่างของช่องตาราง
VSIDESแสดงเส้นด้านซ้ายและด้านขวาของช่องตาราง
LHSแสดงเส้นด้านซ้ายของช่องตาราง
RHSแสดงเส้นด้านขวาของช่องตาราง
ตัวอย่างคำสั่ง
<p>
ดูที่ขอบของตาราง
</p>
<table frame="hsides" border="1">
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
<br />
<table frame="vsides" border="1">
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
Contact Me
INFO@MYSITE.COM / TEL: 123-456-7890
I'm a paragraph. Click here to add your own text and edit me. Let your users get to know you