Embedded Files
HTML Table (การสร้างตารางด้วยภาษา HTML)
HTML Table (การสร้างตารางด้วยภาษา HTML)
การสร้างตารางด้วยภาษา HTML มีโครงสร้างภาษาดังนี้
<table style="width:100%" border="1" >
<tr>
<th>ส่วนหัว 1</th>
<th>ส่วนหัว 2</th>
<th>ส่วนหัว 3</th>
</tr>
<tr>
<td>แถวที่ 2 คอลัมภ์ 1</td>
<td>แถวที่ 2 คอลัมภ์ 2</td>
<td>แถวที่ 2 คอลัมภ์ 3</td>
</tr>
<tr>
<td>แถวที่ 3 คอลัมภ์ 1</td>
<td>แถวที่ 3 คอลัมภ์ 2</td>
<td>แถวที่ 3 คอลัมภ์ 3</td>
</tr>
</table>
ผลลัพธ์
ผลลัพธ์
ศึกษาภาษา HTML เรื่อง HTML Table ได้จากเว็บไซต์ HTML Table
ตัวอย่างที่ 1 การสร้างตารางอย่างง่าย
ตัวอย่างที่ 1 การสร้างตารางอย่างง่าย
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
ผลลัพธ์
ผลลัพธ์
ตัวอย่างที่ 2 การกำหนดเส้นของตาราง
ตัวอย่างที่ 2 การกำหนดเส้นของตาราง
<table style="width:100%" border="1">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
ผลลัพธ์
ผลลัพธ์
ตัวอย่างที่ 3 การกำหนดสีพื้นของตาราง
ตัวอย่างที่ 3 การกำหนดสีพื้นของตาราง
<table style="width:100%" border="1" bgcolor="#CCFF99">
<tr bgcolor="#FFCC99">
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
ผลลัพธ์
ผลลัพธ์
ตัวอย่างที่ 4 การผสานคอลัมภ์
ตัวอย่างที่ 4 การผสานคอลัมภ์
<table style="width:100%" border="1">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>
ผลลัพธ์
ผลลัพธ์
ตัวอย่างที่ 5 การรวมแถว
ตัวอย่างที่ 5 การรวมแถว
<table style="width:100%" border="1">
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>
ผลลัพธ์
ผลลัพธ์
ตัวอย่างที่ 6 การหนดหัวข้อตาราง (Caption)
ตัวอย่างที่ 6 การหนดหัวข้อตาราง (Caption)
<table style="width:100%" border="1">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
ผลลัพธ์
ผลลัพธ์
ตัวอย่างที่ 7 ตัวอย่างตารางสอน
ตัวอย่างที่ 7 ตัวอย่างตารางสอน
<table style="width:100%" border="1">
<caption>My Teching Table</caption>
<tr>
<th>คาบ</th>
<th>H</th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
<th>9</th>
<th>10</th>
</tr>
<tr align="center">
<td>เวลา<br>วัน</td>
<td>07:40-08:30</td>
<td>08:30-09:20</td>
<td>09:20-10:10</td>
<td>10:10-11:00</td>
<td>11:00-11:50</td>
<td>11:50-12:40</td>
<td>12:40-13:30</td>
<td>13:30-14:20</td>
<td>14:20-15:10</td>
<td>15:10-16:00</td>
<td>16:00-16:50</td>
</tr>
<tr align="center">
<td>จันทร์</td>
<td>กิจกรรม<br>หน้าเสาธง</td>
<td colspan="2">1/6</td>
<td> </td>
<td>เสริมวินัย<br>ม.3<br>หอประชุม</td>
<td rowspan="5">พักกลางวัน</td>
<td> </td>
<td> </td>
<td colspan="2">6/6</td>
<td> </td>
</tr>
<tr align="center">
<td>อังคาร</td>
<td>กิจกรรม<br>หน้าเสาธง</td>
<td> </td>
<td> </td>
<td>2/6</td>
<td> </td>
<td colspan="2">5/6</td>
<td colspan="2">ประชุม<br>กลุ่มสาระฯ<br>ประชุม PLC</td>
<td> </td>
</tr>
<tr align="center">
<td>พุธ</td>
<td>กิจกรรม<br>หน้าเสาธง</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td colspan="2">2/6</td>
<td>กิจกรรม<br>เครื่องแบบ</td>
</tr>
<tr align="center">
<td>พฤหัสบดี</td>
<td>กิจกรรม<br>หน้าเสาธง</td>
<td> </td>
<td> </td>
<td colspan="2">4/6</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>กิจกรรม<br>เลือก</td>
</tr>
<tr align="center">
<td>ศุกร์</td>
<td>กิจกรรม<br>หน้าเสาธง</td>
<td colspan="2">3/6</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
ผลลัพธ์
ผลลัพธ์
ความรู้เพิ่มเติม
ความรู้เพิ่มเติม
แท็กคำสั่ง (Non Breaking Space) เป็นคำสั่งช่วยให้เว้นวรรคระหว่างข้อความ เพราะปกติบราวเซอร์จะแสดงช่องว่างจากการเคาะ Space Bar เพียงช่องเดียว แม้นว่าผู้สร้างจะเคาะไปหลายครั้งก็ตาม นี้เป็นหนึ่งในจำนวนรหัส ใช้แทนอักษรพิเศษ ในภาษา HTML ซึ่งใช้ประโยชน์สำหรับแทนตัวอักษรที่มีความหมาย
แบบฝึกหัดที่ 2 HTML Table
แบบฝึกหัดที่ 2 HTML Table
ปรับปรุงตารางในตัวอย่างที่ 7 โดยกำหนดสีให้กับตารางดังนี้
Report abuse