วันเสาร์ที่ 1 กันยายน พ.ศ. 2555

การแทรกตาราง

ในการสร้างตารางนั้น ในเบื้องต้นต้องใช้คำสั่งหรือแท็กดังต่อไปนี้
<table>...</table>  เป็นการบอกจุดเิ่ริ่มต้นและจุดสิ้นสุดในการสร้างตาราง
<tr>....</tr>             เป็นการบอกจำนวนแถว (row)
<td>...</td>            เป็นการบอกจำนวนคอลัมน์ (colunm)

ตัวอย่างการสร้างตารางดังภาพด้านบน
<html>
<head>
<title>การสร้างตาราง</title>
</head>
<body>
การสร้างตารางในภาษา HTML <br>
<hr>
<table>
    <tr><td> แถว 1 คอลัมน์ 1 </td><td> แถว 1 คอลัมน์ 2 </td></tr>
    <tr><td> แถว 2 คอลัมน์ 1 </td><td> แถว 2 คอลัมน์ 2 </td></tr>
    <tr><td> แถว 3 คอลัมน์ 1 </td><td> แถว 3 คอลัมน์ 2 </td></tr>
</table>
</body>
</html>


แถว 1 คอลัมน์ 1
แถว 1 คอลัมน์ 2
แถว 2 คอลัมน์ 1
แถว 2 คอลัมน์ 2
แถว 3 คอลัมน์ 1
แถว 3 คอลัมน์ 2


การปรับขนาดตาราง

<html>
<head>
<title>การสร้างตาราง</title>
</head>
<body>
การกำหนดความกว้างและความสูงของตาราง <br>
<hr>
<table border="1" cellspacing="5" width="500" height="400">
    <caption align="bottom">ตารางที่ 1 การทดลองสร้างตาราง </caption>
    <tr><td> แถว 1 คอลัมน์ 1 </td><td> แถว 1 คอลัมน์ 2 </td></tr>
    <tr><td> แถว 2 คอลัมน์ 1 </td><td> แถว 2 คอลัมน์ 2 </td></tr>
    <tr><td> แถว 3 คอลัมน์ 1 </td><td> แถว 3 คอลัมน์ 2 </td></tr>
</table>
</body>
</html>


แถว 1 คอลัมน์ 1แถว 1 คอลัมน์ 2
แถว 2 คอลัมน์ 1แถว 2 คอลัมน์ 2
แถว 3 คอลัมน์ 1แถว 3 คอลัมน์ 2


 การจัดตำแหน่งตาราง
<html>
<head>
<title>การสร้างตาราง</title>
</head>
<body>
การกำหนดตำแหน่งข้อมูลในเซลล์ <br>
<hr>
<table border="1" cellspacing="5" width="700" height="100">
    <caption align="bottom">ตารางที่ 1 การทดลองสร้างตาราง </caption>
    <tr align="center"><td> แถว 1 คอลัมน์ 1[กลาง] </td><td> แถว 1 คอลัมน์ 2 [กลาง] </td></tr>
    <tr><td> แถว 2 คอลัมน์ 1 </td><td> แถว 2 คอลัมน์ 2 </td></tr>
    <tr><td> แถว 3 คอลัมน์ 1 </td><td align="right"> แถว 3 คอลัมน์ 2 [ขวา] </td></tr>
</table>
</body>
</html>




แถว 1 คอลัมน์ 1[กลาง]แถว 1 คอลัมน์ 2 [กลาง]
แถว 2 คอลัมน์ 1แถว 2 คอลัมน์ 2
แถว 3 คอลัมน์ 1แถว 3 คอลัมน์ 2 [ขวา]


การรวมเซลล์
<TR> <TD COLSPAN = " จำนวนคอลัมน์ที่รวม " > ข้อความ </TD> </TR> เช่น
                                                  <TD COLSPAN = "3">จำนวนนักเรียน</TD>
                                     เป็นคำสั่งรวมคอลัมน์จำนวน 3 คอลัมน์มาเป็น 1 เซลล์ และในเซลล์นั้นจะมีข้อความ จำนวนนักเรียน
                ตัวอย่าง
                              ภาพแสดงการใช้คำสั่ง colspan                                                      ภาพแสดงผลการใช้คำสั่ง colspan 


แหล่งอ้างอิิง
http://school.obec.go.th/pp_school/html/table.html
วันที่ 1 กันยายน 2555

เขียนโดย ที่ ไม่มีความคิดเห็น:

การแทรกรูปภาพ

รูปแบบโค้ด

<HTML>
<HEAD>
<TITLE> นี่คือเว็บเพจแรกของฉัน </TITLE>
</HEAD>
<BODY>
<CENTER>
นี่คือภาพดาราคนโปรดของฉัน><BR>
<IMG SRC="mypic.gif" BORDER=0 WIDTH=120 HIGHT=120 ALT="Super Star"><BR>
ลองทายดูซิว่าเธอคือใคร<BR>
</CENTER>
</BODY>
</HTML>

ผลลัพธ์ที่ได้ 


นี่คือภาพดาราคนโปรดของฉัน
ลองทายดูซิว่าเธอคือ


ในกรณีที่ภาพอยู่ในที่เดียวกัน

<HTML>
<HEAD>
<TITLE> นี่คือเว็บเพจแรกของฉัน </TITLE>
</HEAD>
<BODY>
<CENTER>
นี่คือภาพดาราคนโปรดของฉัน><BR>
<IMG SRC="mypic.gif" BORDER=0 WIDTH=120 HIGHT=120 ALT="Super Star"><BR>
ลองทายดูซิว่าเธอคือใคร<BR>
</CENTER>
</BODY>
</HTML>

ผลลัพธ์ที่ได้ 

นี่คือภาพดาราคนโปรดของฉัน
ลองทายดูซิว่าเธอคือใคร



ในกรณีที่ภาพอยู่คนละที่กัน

ให้ใส่พาสที่อยู่ของรูปภาพ
<HTML>
<HEAD>
<TITLE> นี่คือเว็บเพจแรกของฉัน </TITLE>
</HEAD>
<BODY>
<CENTER>
นี่คือภาพดาราคนโปรดของฉัน><BR>
<IMG SRC="my picture/mypic.gif" BORDER=0 WIDTH=120 HIGHT=120 ALT="Super Star"><BR>
ลองทายดูซิว่าเธอคือใคร<BR>
</CENTER>
</BODY>
</HTML>

ผลลัพธ์ที่ได้ 

นี่คือภาพดาราคนโปรดของฉัน
ลองทายดูซิว่าเธอคือใคร


แหล่งอ้างอิง



วันที่  1 กันยายน 2555
เขียนโดย ที่ ไม่มีความคิดเห็น:
สมัครสมาชิก: บทความ (Atom)