HTML การสร้างเมนู

inplug profile image inplug
แนวทางในการสร้างเมนู

1. ดาวน์โหลดภาพแบ็คกราวนด์ bg17.gif และภาพตึกยุพราช yupparaj.jpg ไว้ใน My Documents
2. สร้างเมนู ตั้งชื่อว่า menu.html โดยใช้คำสั่งสร้างตาราง ดังนี้

สร้างตารางที่ 1 (กำหนดความกว้าง 100%) ประกอบด้วยบรรทัดจำนวน 2 บรรทัด และ 1 คอลัมน์ ดังนี้

<table width=100% border=1>
<tr>
<td>ข้อมูลในบรรทัดที่ 1</td>
</tr>
<tr>
<td>ข้อมูลในบรรทัดที่ 2</td>
</tr>
</table>


ในบรรทัดแรกหรือบรรทัดบน ให้บรรจุภาพแบ็คกราวนด์และข้อความตามที่โจทย์กำหนด ในบรรทัดที่ 2 ให้บรรจุคำสั่งสร้างตารางอีก 1 ตาราง (เรียกว่าตารางที่ 2)
ตารางที่ 2 มี 1 บรรทัด แต่มี 2 คอลัมน์ กำหนดความกว้างคอลัมน์แรกเป็น 30% ดังชุดคำสั่งคือ

<table width=100% border=1>
<tr>
<td width=30%>ข้อมูลในบรรทัดที่ 1 คอลัมน์ที่ 1</td>
<td>ข้อมูลในบรรทัดที่ 1 คอลัมน์ที่ 2</td>
</tr>
</table>


ข้อมูลในคอลัมน์ที่ 1 ซึ่งอยู่ซ้ายมือบรรจุคำสั่งสร้างตาราง (เรียกว่าตารางที่ 3) ส่วนคอลัมน์ที่ 2 ที่อยู่ขวามือ บรรจุภาพอาคารตึกยุพราช
ตารางที่ 3 มี 9 บรรทัดและ 1 คอลัมน์ กำหนดความกว้างเป็น 100% ดังชุดคำสั่งคือ

<table width=100% border=1>
<tr>
<td>ข้อมูลในบรรทัดที่ 1</td>
</tr>
<tr>
<td>ข้อมูลในบรรทัดที่ 2</td>
</tr>
<tr>
<td>ข้อมูลในบรรทัดที่ 3</td>
</tr>
<tr>
<td>ข้อมูลในบรรทัดที่ 4</td>
</tr>
<tr>
<td>ข้อมูลในบรรทัดที่ 5</td>
</tr>
<tr>
<td>ข้อมูลในบรรทัดที่ 6</td>
</tr>
<tr>
<td>ข้อมูลในบรรทัดที่ 7</td>
</tr>
<tr>
<td>ข้อมูลในบรรทัดที่ 8</td>
</tr>
<tr>
<td>ข้อมูลในบรรทัดที่ 9</td>
</tr>
</table>


ในแต่ละบรรทัดกำหนดสีพื้นและข้อความตามที่กำหนดในใบงาน

เครดิต : www.yupparaj.ac.th
ความคิดเห็น

ประกาศล่าสุดในบอร์ดเดียวกัน

11 วันที่ผ่านมา
17 วันที่ผ่านมา
inplug Icon ชุดคำสั่งเบื้องต้นของ HTML อ่าน 5,185 7 ปีที่ผ่านมา
7 ปีที่ผ่านมา
7 ปีที่ผ่านมา
10 ปีที่ผ่านมา
inplug Icon วิธีใส่ Comment ใน HTML 2 อ่าน 17,981 10 ปีที่ผ่านมา
10 ปีที่ผ่านมา
inplug Icon การใช้งาน คำสั่ง IFRAME ใน HTML อ่าน 11,205 10 ปีที่ผ่านมา
10 ปีที่ผ่านมา
inplug Icon HTML ทำ effect ตอนเปลี่ยนหน้า อ่าน 7,785 10 ปีที่ผ่านมา
10 ปีที่ผ่านมา
inplug Icon HTML การสร้างเมนู อ่าน 9,819 10 ปีที่ผ่านมา
10 ปีที่ผ่านมา
10 ปีที่ผ่านมา
inplug Icon HTML ชุดคำสั่งในการเชื่อมโยง (Link) 1 อ่าน 9,483 10 ปีที่ผ่านมา
10 ปีที่ผ่านมา
inplug Icon HTML การใช้ตารางช่วยนำเสนองาน อ่าน 4,122 10 ปีที่ผ่านมา
10 ปีที่ผ่านมา
10 ปีที่ผ่านมา
inplug Icon โค๊ด HTML การแทรกภาพ (Image) 1 อ่าน 74,207 10 ปีที่ผ่านมา
10 ปีที่ผ่านมา
10 ปีที่ผ่านมา