html: กันยายน 2012

การสร้างตาราง

Table หรือ ตาราง เป็นอีกวิธีหนึ่งในการนำเสนอข้อมูลบน Web ที่เหมาะกับข้อมูลที่เป็นรายงานสถิติ
หรือข้อมูลที่เป็นตัวเลขจำนวนมาก ๆ รวมทั้งเป็นการจัดหมวดหมู่ของข้อมูลให้เป็นระเบียบ ง่ายต่อการเข้าใจ จะสังเกตเห็นว่า
Home Page ส่วนใหญ่่จะมีการนำตารางมาช่วยในการจัดเมนูหรือหัวข้อที่เป็น ไปยัง Web Page หรือ Web Site อื่น
ตัวอย่าง เช่น เว็บไซต์ของ Sanook.com ที่มีการจัดหน้าเว็บเพจด้วยการนำเอาตารางมาประยุกต์ใช้

คำสั่งที่นำมาใช้ในการสร้างตาราง
<Table>…… </Table>
- เป็น Tag สำหรับกำหนดจุดเริ่มต้นและสิ้นสุดการสร้างตาราง
<TR>……….</TR>
- เป็น Tag สำหรับสร้างแถว (row) ให้กับตาราง
<TD>………</TD>
- เป็น Tag สำหรับสร้างคอลัมน์ (column) ให้กับตารางHTML

รูปแบบของคำสั่ง ที่ใช้ในการสร้างตาราง

<TABLE>
      <CAPTION>หัวข้อตาราง</CAPTION>
             <TR>
                    <TD>คอลัมน์ที่ 1</TD>
                    <TD>คอลัมน์ที่ 2</TD>
            </TR>
            ...
</TABLE>

ตัวอย่างโปรแกรม
<HTML>
<HEAD>
<TITLE>การสร้างตารางด้วยภาษา HTML</TITLE>
</HEAD>
<BODY>
         <TABLE BORDER = 2>
                 <CAPTION>การสร้างตารางอย่างง่าย</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>

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

ตามปกติแล้ว ตารางที่สร้างขึ้นจะไม่มีกรอบของตาราง หากต้องการจะสร้างกรอบให้ตาราง เพื่อให้การแบ่งส่วนของข้อมูลในตารางชัดเจนขึ้น มีวิธีการดังนี้

การสร้างกรอบตาราง

รูปแบบคำสั่ง HTML ที่ใช้ในการสร้างกรอบตาราง

การกำหนดสีเส้นของตาราง

ตัวอย่างโปรแกรม
<HTML>
<HEAD>
<TITLE>การตกแต่งตารางโดยใช้ภาษา HTML</TITLE>
</HEAD>
<BODY>
      <TABLE BORDER = 2 BORDERCOLOR=BLUE>
      <CAPTION><font color=blue>การตกแต่งตาราง</font></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>

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

นอกจากเราจะใส่ข้อความหรือข้อมูลต่าง ๆ ลงในตารางแล้ว ยังสามารถนำรูปภาพมาวางไว้ในตารางได้
เพื่อให้การแสดงข้อมูลมีรูปแบบที่ดูง่าย มีความสวยงามและเป็นระเบียบมากขึ้น

รูปแบบของคำสั่ง HTML การใส่รูปภาพในตาราง

ตัวอย่างโปรแกรม

<html>

<head><title>การใส่รูปภาพในตาราง</title><body> <table align="center" width="360" hight="70" border=2 bordercolor="blue"> <caption>การใส่รูปภาพในตาราง</caption> <tr> <td align="center"><img src="t014.jpg"</td> <td align="center"><img src="t006.jpg"</td> <td align="center"><img src="t020.jpg"</td> </tr> <tr> <td align="center">รูปที่ 1</td> <td align="center">รูปที่ 2</td> <td align="center">รูปที่ 3</td> </tr> </table></body></html>

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

แหล่งที่มา

http://school.obec.go.th/krurenu/html/p5.html

http://school.obec.go.th/krurenu/html/p5-1.html

http://school.obec.go.th/krurenu/html/p5-2.html

http://school.obec.go.th/krurenu/html/p5-3.html

การใส่รูปภาพประกอบในเว็บเพจ โดยการกำหนดความกว้างของภาพ 120 พิกเซล ความสูงของภาพ 120 พิกเซล
                            และใส่คำอธิบายรูปภาพว่า นี่คือภาพที่ฉันชอบ โดยแสดงกึ่งกลางจอภาพ

<HTML>
<HEAD>
<TITLE> การใส่รูปภาพประกอบในเว็บเพจ </TITLE>
</HEAD>
<BODY>
     <CENTER>
      นี่คือภาพที่ฉันชอบ><BR>
      <IMG SRC="flower.jpg" BORDER=0 WIDTH=120 HIGHT=120 ALT="นี่คือภาพที่ฉันชอบ"><BR>
      ดอกกุหลาบไง<BR>
      </CENTER>
</BODY>
</HTML>

ผลลัพธ์ที่ได้ รูปที่ (1)

นี่คือภาพที่ฉันชอบ

ตัวอย่ีางโปรแกรม การใส่กรอบให้รูปภาพ ความหนาของกรอบเท่ากับ 2 และใส่คำอธิบายรูปภาพ
<HTML>
<HEAD>
<TITLE>การใส่กรอบให้รูปภาพ </TITLE>
</HEAD>
<BODY>
       <CENTER>
       นี่คือภาพที่ฉันชอบ><BR>
       <IMG SRC="flower.jpg" BORDER=2 WIDTH=150 HIGHT=134 ALT="นี่คือดอกกุหลาบ"><BR>
       ดอกกุหลาบไง<BR>
       </CENTER>
</BODY>
</HTML>

ผลลัพธ์ที่ได้ รูปที่ (2)

นี่คือภาพที่ฉันชอบ

อธิบายคำสั่ง..

<IMG SRC> เป็นการบอกให้รู้ว่านี่คือแท็กรูปภาพ
="ชื่อไฟล์รูปภาพ.นามสกุล" ชื่อของรูปภาพที่จะนำมาประกอบเว็บเพจ (ต้องระบุ)
BORDER=0 กำหนดให้มีหรือไม่มีเส้นขอบรอบรูปภาพ 0=ไม่มีเส้นขอบ (ค่าปกติ)
WIDTH=150 กำหนดขนาดความกว้างของรูปภาพ (Pixel) (ไม่ต้องกำหนดก็ได้)
HEIGHT=134 กำหนดขนาดความสูงของรูปภาพ (Pixcel) (ไม่ต้องกำหนดก็ได้)
ALT="คำอธิบาย" สามารถแสดงข้อความเมื่อวางเมาส์บนรูปภาพ

การใช้แท็กแบบย่อ ๆ <IMG SRC="flower.jpg"> จะได้ผลลัพธ์เหมือนรูปที่ 1 คือไม่มีเส้นขอบ

ตัวอย่างโปรแกรม
<HTML>
<HEAD>
<TITLE>การจัดตำแหน่งของรูปภาพร่วมกับข้อความ</TITLE>
</HEAD>
<BODY>
      <CENTER>
      <IMG SRC="flower1.jpg" BORDER=0 ALIGN=LEFT>
      <FONT COLOR="Blue">
"...คุณธรรมข้อหนึ่งที่ยังมีอยู่อย่างบริบริบูรณ์ ในจิตใจของคนไทยก็คือ การให้ การให้นี้ไม่ว่าจะให้ส่ิงใดแ่ก่ผู้ใด โดยสถานใดก็ตาม
เป็นสิ่งที่พึงประสงค์อย่างหนึ่ง เพราะเป็นเครื่องประสานไม่ตรีอย่างสำคัญ ระหว่างบุคคลกับบุคคล และทำให้สังคมมีความมั่นคง
เป็นปึกแผ่น ด้วยสามัคคีธรรม..."
พระราชดำรัสเนื่องในโอกาสวันขึ้นปีใหม่ : 31 มกราคม 2545 <BR>
       </FONT>
       </CENTER>
</BODY>
</HTML>

ผลลัพธ์ที่ได้ รูปที่ (1) ALIGN=LEFT กำหนดให้รูปภาพอยู่ทางด้านซ้ายของข้อความ

...คุณธรรมข้อหนึ่งที่ยังมีอยู่อย่างบริบริบูรณ์ ในจิตใจของคนไทยก็คือ การให้ การให้นี้ไม่ว่าจะให้ส่ิงใดแ่ก่ผู้ใด โดยสถานใดก็ตาม
เป็นสิ่งที่พึงประสงค์อย่างหนึ่ง เพราะเป็นเครื่องประสานไม่ตรีอย่างสำคัญ ระหว่างบุคคลกับบุคคล และทำให้สังคมมีความมั่นคง
เป็นปึกแผ่น ด้วยสามัคคีธรรม..."
พระราชดำรัสเนื่องในโอกาสวันขึ้นปีใหม่ : 31 มกราคม 2545

<HTML>
<HEAD>
<TITLE> การจัดตำแหน่งของรูปภาพร่วมกับข้อความ </TITLE>
</HEAD>
<BODY>
<CENTER>
<IMG SRC="smicon7.gif" BORDER=0 ALIGN=RIGHT>
<FONT COLOR="Blue">
...คุณธรรมข้อหนึ่งที่ยังมีอยู่อย่างบริบริบูรณ์ ในจิตใจของคนไทยก็คือ การให้ การให้นี้ไม่ว่าจะให้ส่ิงใดแ่ก่ผู้ใด โดยสถานใดก็ตาม
เป็นสิ่งที่พึงประสงค์อย่างหนึ่ง เพราะเป็นเครื่องประสานไม่ตรีอย่างสำคัญ ระหว่างบุคคลกับบุคคล และทำให้สังคมมีความมั่นคง
เป็นปึกแผ่น ด้วยสามัคคีธรรม..."
พระราชดำรัสเนื่องในโอกาสวันขึ้นปีใหม่ : 31 มกราคม 2545 <BR>
</FONT>
</CENTER>
</BODY>
</HTML>

ผลลัพธ์ที่ได้ รูปที่ (2) ALIGN=RIGHT กำหนดให้รูปภาพอยู่ทางด้านขวาของข้อความ

อธิบายคำสั่ง..ALIGN=LEFT กำหนดให้รูปภาพอยู่ทางด้านซ้ายของข้อความ (Default)
ALIGN=RIGHT กำหนดให้รูปภาพอยู่ทางด้านขวาของข้อความ
ALIGN=TEXTTOP กำหนดให้ขอบบนของรูปภาพในอยู่ระดับเดียวกันกับขอบบนของข้อความ (ไม่ค่อยได้ใช้)
ALIGN=BOTTOM กำหนดให้ขอบล่างของรูปภาพในอยู่ระดับเดียวกันกับขอบบนของข้อความ (ไม่ค่อยได้ใช้)

การกำหนดระยะห่างของรูปภาพ
ปกติข้อความจะติดกับรูปภาพ ซึ่งเราสามารถกำหนดระยะห่างของรูปภาพและข้อความเองได้

ตัวอย่างโปรแกรม
<HTML>
<HEAD>
<TITLE> การกำหนดระยะห่างของรูปภาพ </TITLE>
</HEAD>
<BODY>
<CENTER>
<IMG SRC="flower1.jpg" BORDER=0 ALIGN=LEFT HSPACE=10>
<FONT COLOR="Blue">
คนเราถ้าพอใจในความต้องการ ก็มีความโลภน้อย เมื่อมีความโลภน้อย ก็เบียดเบียนคนอื่นน้อย ถ้าทุกประเทศมีความคิด<BR> อันนี้ไม่ใช่ เศรษฐกิจ มีความคิดว่าจะทำอะไรต้องพอเพียง หมายความว่า พอประมาณ ไม่สุดโต่ง ไม่โลภอย่างมาก <BR>
คนเราก็จะอยู่เป็นสุข<BR>
พระราชดำรัสเนื่องในโอกาสวันเฉลิมพระชนมพรรษา : 4 ธันวาคม 2541
</FONT>
</CENTER>
</BODY>
</HTML>

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

คนเราถ้าพอใจในความต้องการ ก็มีความโลภน้อย เมื่อมีความโลภน้อย ก็เบียดเบียนคนอื่นน้อย ถ้าทุกประเทศมีความคิดอันนี้ไม่ใช่ เศรษฐกิจ มีความคิดว่าจะทำอะไรต้องพอเพียง หมายความว่า พอประมาณ ไม่สุดโต่ง ไม่โลภอย่างมาก คนเราก็จะอยู่เป็นสุข
พระราชดำรัสเนื่องในโอกาสวันเฉลิมพระชนมพรรษา : 4 ธันวาคม 2541
<--- สังเกตุระยะห่างของรูปภาพกับข้อความ (10 Pixel) อธิบายคำสั่ง..
HSPACE=10 กำหนดระยะห่าง (ทางแนวนอน) ของรูปภาพ ค่าที่กำหนดมีหน่วยเป็น Pixel
VSPACE=10 กำหนดระยะห่าง (ทางแนวตั้ง) ของรูปภาพ ค่าที่กำหนดมีหน่วยเป็น Pixel

แหล่งที่มา

http://school.obec.go.th/krurenu/html/p4-1.html

http://school.obec.go.th/krurenu/html/p4-2.html

http://school.obec.go.th/krurenu/html/p4-3.html

วันที่ 20 กันยายน 2555

html

วันอาทิตย์ที่ 23 กันยายน พ.ศ. 2555

การสร้างตาราง

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