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
ความคิดเห็น

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

14 วันที่ผ่านมา
21 วันที่ผ่านมา
35 วันที่ผ่านมา
2 เดือนที่ผ่านมา
2 เดือนที่ผ่านมา
inplug Icon ชุดคำสั่งเบื้องต้นของ HTML อ่าน 5,254 7 ปีที่ผ่านมา
7 ปีที่ผ่านมา
7 ปีที่ผ่านมา
10 ปีที่ผ่านมา
inplug Icon วิธีใส่ Comment ใน HTML 2 อ่าน 18,535 10 ปีที่ผ่านมา
10 ปีที่ผ่านมา