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
ความคิดเห็น
ประกาศล่าสุดในบอร์ดเดียวกัน
inplug Icon สอน HTML โดย นาย พงศธร ชมดี อ่าน 2,944 5 ปีที่ผ่านมา
5 ปีที่ผ่านมา
inplug Icon ชุดคำสั่งเบื้องต้นของ HTML อ่าน 4,649 5 ปีที่ผ่านมา
5 ปีที่ผ่านมา
5 ปีที่ผ่านมา
8 ปีที่ผ่านมา
inplug Icon วิธีใส่ Comment ใน HTML 2 อ่าน 14,751 8 ปีที่ผ่านมา
8 ปีที่ผ่านมา
inplug Icon การใช้งาน คำสั่ง IFRAME ใน HTML อ่าน 10,584 8 ปีที่ผ่านมา
8 ปีที่ผ่านมา
inplug Icon HTML ทำ effect ตอนเปลี่ยนหน้า อ่าน 7,426 8 ปีที่ผ่านมา
8 ปีที่ผ่านมา
inplug Icon HTML การสร้างเมนู อ่าน 9,210 8 ปีที่ผ่านมา
8 ปีที่ผ่านมา
8 ปีที่ผ่านมา
inplug Icon HTML ชุดคำสั่งในการเชื่อมโยง (Link) 1 อ่าน 9,163 8 ปีที่ผ่านมา
8 ปีที่ผ่านมา
inplug Icon HTML การใช้ตารางช่วยนำเสนองาน อ่าน 3,801 8 ปีที่ผ่านมา
8 ปีที่ผ่านมา
8 ปีที่ผ่านมา
inplug Icon โค๊ด HTML การแทรกภาพ (Image) 1 อ่าน 70,245 8 ปีที่ผ่านมา
8 ปีที่ผ่านมา
8 ปีที่ผ่านมา
inplug Icon โค๊ด HTML การกำหนดสีของตัวอักษร อ่าน 8,793 8 ปีที่ผ่านมา
8 ปีที่ผ่านมา