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

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

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

<TABLE>...........</TABLE>   1.  คำสั่งหลักที่ใช้ในการสร้างตารางของภาษา HTML  มีดังนี้เป็นคำสั่งที่กำหนดให้โปรแกรมเบราว์เซอร์สร้างตาราง<CAPTION>...........</CAPTION>  
ป็นคำสั่งที่ใช้ตั้งชื่อหรือหัวข้อเรื่องให้กับตาราง<TR>...........</TR> เป็นคำสั่งที่ใช้กำหนดแถว (ROW)
 <TH>...........</TH> เป็นคำสั่งที่ใช้ในการกำหนดข้อมูลส่วนหัวของตาราง
<TD>...........</TD> เป็นคำสั่งที่ใช้ในการกำหนดข้อมูลในแต่ละแถว
 
 โครงสร้างของตาราง
<TABLE>
            <CAPTION> ชื่อตาราง </CAPTION>
            <TR>
                     <TH> ข้อมูลส่วนหัว </TH>
            </TR>             <TR>
                     <TD> ข้อมูล </TD>
             </TR>
             <TR>
                     <TD> ข้อมูล </TD>
             </TR>
</TABLE>   

                                                                      ตัวอย่างโค้ด

                                                                           ผลที่ได้

 2.2  คำสั่ง ALIGN ใช้กำหนดตำแหน่งการจัดวางตาราง มี 3 รูปแบบ คือ

 - LEFT    คือ จัดตารางชิดซ้าย (ค่าปกติ) ของจอภาพ
- RIGHT  คือ จัดตารางชิดขวาของจอภาพ

 - CENTER  คือ จัดตารางไว้กึ่งกลางของจอภาพ

      ตัวอย่างโค้ด

ผลที่ได้

 

                                   

 2.2  คำสั่ง ALIGN ใช้กำหนดตำแหน่งการจัดวางตาราง มี 3 รูปแบบ คือ

 - LEFT    คือ จัดตารางชิดซ้าย (ค่าปกติ) ของจอภาพ
 - RIGHT  คือ จัดตารางชิดขวาของจอ
 - CENTER  คือ จัดตารางไว้กึ่งกลางของจอภาพ

                                         ตัวอย่างโค้ดการสร้างตารางอยู่กึ่งกลางจอภาพ

ผลที่ได้

              

 2.3 คำสั่ง WIDTH ใช้กำหนดความกว้างของตารางทั้งหมด  มีหน่วยเป็น Pixel หรือ เปอร์เซ็นต์ก็ได้
 2.4 คำสั่ง HEIGHT  ใช้กำหนดความสูงของตารางทั้งหมด มีหน่วยเป็น Pixel หรือ เปอร์เซ็นต์ก็ได้
 2.5 คำสั่ง BGCOLOR    เป็นคำสั่งที่ใช้ในการกำหนดสีพื้นหลังของตารางใช้ได้กับเว็บเบราว์เซอร์ Internet Explorer เท่านั้น

                                                                       ตัวอย่างโค้ด

                                                             

ผลที่ได้

   2.5 คำสั่ง  CELLSPACING  ใช้กำหนดระยะห่างระหว่างช่องแต่ละช่องในตาราง โดยการเพิ่มขนาด      หรือลดขนาดตามความหนาของเส้นขอบตาราง

ตัวอย่างโค้ด

ผลที่ได้

                                                                                      

 2.7 คำสั่ง Colspan และ Rowspan คำสั่ง <TD  COLSPAN> เป็นคำสั่งในการรวมคอลัมน์เข้าด้วยกัน ตามค่าของจำนวนคอลัมน์ที่กำหนดไว้
รูปแบบคำสั่ง      <TD  COLSPAN = "Number">โดยที่ - COLSPAN คือ แอตทริบิวต์ที่ใช้ในการกำหนดการรวมคอลัมน์
- Numberคือ ค่าตัวเลขที่ใช้ในการรวมคอลัมน์เข้าเป็นคอลัมน์เดี่ยวกัน
คำสั่ง <TD  ROWSPAN> เป็นคำสั่งในการรวมแถวเข้าด้วยกัน ตามค่าของจำนวนแถวที่กำหนดไว้


รูปแบบคำสั่ง     <TD  ROWSPAN = "Number">
 โดยที่ - ROWSPAN คือ แอตทริบิวต์ที่ใช้ในการกำหนดการรวมแถว
  - Number คือ ค่าตัวเลขที่ใช้ในการรวมแถวเข้าเป็นแถวเดียวกัน

ตัวอย่างโค้ด

ผลที่ได้

ที่มา: https://sites.google.com/site/cirayus/sux-kar-reiyn-ru/kar-srang-tarang

13/09/13

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

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

การใส่รูปภาพ

1. ระบุด้วย Tag img

    รูปแบบคำสั่ง <img src=”x”> โดยที่ x คือ ไฟล์รูปภาพที่เราต้องการ

***หากไฟล์รูปภาพไม่ได้เก็บไว้ที่ Path (ตำแหน่ง) เดียวกับเอกสาร HTML จะต้องระบุ Path ของรูปไว้หน้าไฟล์ด้วย เช่น <img src=”my web/images/kong.jpg”>

ตัวอย่างโค้ด

ผลที่ได้

การปรับขนาดรูปภาพ

    รูปแบบคำสั่ง <img src=”ชื่อภาพ” width=”ขนาดความกว้าง” height=”ขนาดความยาว”>

ตัวอย่างโค้ด

ผลที่ได้

  การจัดตำแหน่งรูปภาพ

1. ALIGN=LEFT กำหนดให้รูปภาพอยู่ทางด้านซ้ายของข้อความ

 <LEFT><IMG SRC="ชื่อภาพ.jpg" ></LEFT>

ตัวอย่างโค้ด

ผลที่ได้

2. ALIGN=RIGHT กำหนดให้รูปภาพอยู่กึ่งกลางของข้อความ

<CENTER><IMG SRC="ชื่อภาพ.jpg" ></CENTER>

ตัวอย่างโค้ด

ผลที่ได้

3. ALIGN=RIGHT กำหนดให้รูปภาพอยู่ทางด้านขวาของข้อความ

<P ALIGN =RIGHT><IMG SRC="ชื่อภาพ.jpg" ></ RIGHT>

ตัวอย่างโค้ด

ผลที่ได้

อ้างอิง: สมุดจดวิชาคอมพิวเตอร์

13/09/13

การแต่งตัวอักษร

การแต่งตัวอักษร

 การกำหนดแบบอักษร

 1. ระบุด้วย Tag Font 

          รูปแบบคำสั่ง  <font>.....ข้อความ.....</font>

 2. ปรับรูปแบบ Font โดยการระบุ Attribute ดังนี้

            face = แบบตัวอักษร

            size  = ขนาดตัวอักษร

            color = สีตัวอักษร

การกำหนดรูปแบบตัวอักษร<FONT FACE>

           รูปแบบคำสั่ง <font face=”n”>...ข้อความ...</font> ซึ่ง n คือ font ที่   ต้องการ

ตัวอย่างโค้ด

ผลที่ได้

การกำหนดขนาดของตัวอักษร <FONT SIZE>

      การกำหนดขนาดตัวอักษร ในที่จะกล่าวถึงเพียงคำสั่งเดียวที่นิยมใช้กัน เพื่อป้องกันการสับสน คำสั่ง <FONT SIZE> ซึ่งจะมีระดับขนาดตัวอักษรตั้งแต่ -7 ถึง +7 ซึ่งตัวเลขยิ่งมากขนาดยิ่งใหญ่ และเมื่อจบประโยคหรือข้อความที่เราต้องการจะต้องจบด้วย </FONT>

      รูปแบบคำสั่ง <FONT SIZE = “number (-7 ถึง +7)” > …. </FONT>

ตัวอย่างโค้ด

ผลที่ได้

การกำหนดสีให้กับข้อความ<FONT COLOR>

     

     คำสั่ง <BODY TEXT> เป็นคำสั่งหนึ่งที่ใช้กำหนดสีให้กับข้อความ ซึ่งสามารถวางคำสั่งไว้ในส่วนระหว่าง </HEAD> กับ <BODY> หรือวางคำสั่งไว้หน้าข้อความที่เราต้องการ

         
         รูปแบบคำสั่ง 1

                  <FONT COLOR = รหัสสี เช่น "#306EFF> ข้อความ </FONT>

        
         รูปแบบคำสั่ง 2

                  <FONT COLOR = ชื่อสี เช่น "royal blue1"> ข้อความ </FONT>

ตัวอย่างโค้ด

ผลที่ได้

TAG อื่นๆที่ใช้ปรับแต่งตัวอักษร

   

   ตัวเอียง

          รูปแบบคำสั่ง <I>... (ข้อความ) ...</I>

   ตัวหนา

         รูปแบบคำสั่ง <B>... (ข้อความ) ...</B>

   ตัวขีดเส้นใต้

         รูปแบบคำสั่ง <U>... (ข้อความ) ...</U>

ตัวอย่างโค้ด

 




ผลที่ได้

    ตัวขีดฆ่า

          รูปแบบคำสั่ง <S>... (ข้อความ) ... </S>

    ตัวยกกำลัง

          รูปแบบคำสั่ง <SUP>... (ข้อความ)...</SUP>

    

    ตัวห้อย

      รูปแบบคำสั่ง <SUB>... (ข้อความ)...</SUB>

ตัวอย่างโค้ด

ผลที่ได้

    ตัวอักษรกระพริบ

           รูปแบบคำสั่ง <Blink>...(ข้อความ)...</Blink>

   ***สามารถเปิดดูผลได้ใน fire fox เท่านั้น***

      ตัวอักษรวิ่ง

           รูปแบบคำสั่ง <Marquee>...(ข้อความ)...</Marquee>

ตัวอย่างโค้ด

ผลที่ได้

อ้างอิง: สมุดวิชาคอมพิวเตอร์

ที่มา : http://www.sompongtaruwan.net/HTML/HTML.html