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

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

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

 -Tag table
                  ตารางมีการกำหนดด้วยแท็ก <table>

ตารางแบ่งออกเป็นแถว (ที่มีแท็ก <tr>) และแต่ละแถวจะแบ่งออกเป็นเซลล์ข้อมูล (ที่มีแท็ก <td>) td ย่อมาจาก "ข้อมูลตาราง" และถือเนื้อหาของเซลล์ข้อมูล แท็ก <td> สามารถมีข้อความการเชื่อมโยง, ภาพ, รายการ, รูปแบบ, ตารางอื่น ๆ ฯลฯ

width การปรับความกว้าง

            การปรับความกว้างของตาราง สามารถทำได้ดังนี้

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

           

            <table border =1 width =40%>

ตัวอย่าง

ผลที่ได้

Height การปรับความสูง

          การปรับความสูงของตาราง สามารถทำได้ดังนี้

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

           

            <table border =1 height =30%>

ตัวอย่าง

ผลที่ได้

Align การจัดตำแหน่ง

       

       การจัดตำแหน่งของตารางสามารถทำได้ดังนี้

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

       ** เนื่องจากการแทรกตารางเริ่มแรกจะชิดซ้ายอยู่แล้ว

       <table border =1 width=30% align = "center">

       <table border =1 width=30% align = "right">

     

  ตัวอย่าง                                   

การจัดอยู่กึ่งกลาง

ผลที่ได้

ตัวอย่าง

การจัดแบบชิดขวา

ผลที่ได้

Colspan การรวมเซล์

           การรวมเซลล์สามารถทำได้ดั้งนี้

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

           การรวมเซลล์ ต้องใส่จำนวนของแถวที่จะใส่ด้วย 

          

           <td colspan =4 align="center">........</tr>

ตัวอย่าง

ผลที่ได้

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

http://www.bcoms.net/html/10.asp

http://www.aw.ac.th/web_html/011.htm

26 สิงหาคม 2555

            

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

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

 การแทรกรูปภาพนั้นสามารถทำได้โดยระบุแท็ก ได้ดังนี้

<img src="..."> โดยที่ข้อความในเครื่องหมายคำพูดจะต้องเป็นชื่อไฟล์รูปภาพ

นามสกุลของภาพใช้ jpg jpge gif ดังนี้

หน้าจอแสดงผล

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

สามารถใส่โค้ดได้ดั้งนี้

<left><img src="......"></left>            การจัดแบบชิดซ้าย

<center><img src="......"></center>   การจัดแบบกึ่งกลาง

<right><img src="......"></right>        การจัดแบบชิดขวา

สามารถทำตามภาพได้ดังนี้

การแทรกรูปภาพแบบชิดซ้าย

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

การแทรกรูปภาพแบบกึ่งกลาง

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

การแทรกรูปภาพแบบชิดขวา

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

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

สามารถใส่โค้ดได้ดังนี้

<img src="....."width=(ขนาดความกว้างของรูป)height=(ขนาดความสูงของรูปภาพ)>

รูปภาพขนาดต่างจะเป็บรูปแบบ pixle

สามารถทำได้ตามภาพดังนี้

ตัวอย่าง

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

เอกสารอ้างอิง

http://www.yupparaj.ac.th

http://www.thainextstep.com

21 สิงหาคม 2555

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

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

รูปแบบ code

 <Font face = "รูปแบบของ font ที่ต้องการ " > ข้อความที่ต้องการให้ปรากฎ </Font>

เช่น  <font face="Angsana upc">LOVE</font>    

        <font face="Giddyup Std">LOVE</font>       

        <font face="Monotype Corsiva">LOVE</font>

code

Answer

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

รูปแบบ Code

 <Font size="ขนาดตัวเลข" > ข้อความที่ต้องการให้ปรากฏ </Font> 

เช่น  <Font size = "3">JENJIRA</Font><br>

        <Font size = "5">JENJIRA</Font><br>

        <Font size = "7">JENJIRA</Font>

code

Answer

สีตัวอักษร

รูปแบบ Code

<font color="กำหนดสีที่ต้องการ" > ข้อความที่ต้องการให้ปรากฏ </font>  

เช่น   <Font color="Green" >JB</Font>                       

        <Font color="Pink" >JB</Font>            
        <Font color="Blue" >JB</Font>   

code

     

Answer

สีตัวอักษรแบบรหัส Code

รูปแบบ Code

<Font color = รหัสสีที่ต้องการ > ข้อความที่ต้องการแสดง </Font>

เช่น    <font color =#FF00FF >หมูอ้วน & ไอ้เน่า</font>

         <font color = #1E90FF>หมูอ้วน & ไอ้เน่า</font>

         <font color = #32CD32>หมูอ้วน & ไอ้เน่า</font>

code

Answer

ตัวเอียง ตัวหนา ตัวขีดเส้นใต้

รูปแบบ Code

: ตัวเอียง     <I>ข้อความที่ต้องการให้ปรากฏ</I>

: ตัวหนา      <B>ข้อความที่ต้องการให้ปรากฏ</B>

: ขีดเส้นใต้  <U>ข้อความที่ต้องการให้ปรากฏ</U>

เช่น   <I>ตัวเอียง Italic</I>                           

        <B>ตัวหนา Bold</B>                       

        <U>ขีดเส้นใต้ Underline</U> 

code

Answer

ตัวขีดฆ่า ตัวยก ตัวห้อย

รูปแบบ Code

: ตัวขีดฆ่า

           <del> ข้อความที่ต้องการขีดฆ่า </del>                                                                           

: ตัวยก     

          <sup> ข้อความหรือตัวเลข^{ข้อความหรือตัวเลขที่ต้องการยก}                       

: ตัวห้อย     

          <sub> ตัวอักษรหรือตัวเลข_{ตัวอักษรหรือตัวเลขที่ต้องการห้อย}

เช่น   <del> อักษรขีดฆ่า </del>                                                                               

        <sup> ตัวยก 8²,5²                         

        _{ตัวห้อย H}₂_{0 ,CH}₃<sub>COOH

code

Answer

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

รูปแบบ Code

: ตัวอักษรวิ่ง         <Marquee>ตัวอักษรหรือข้อความที่ต้องการให้วิ่ง</Marquee>
: ตัวอักษรกระพริบ <Blink>ตัวอักษรหรือข้อความที่ต้องการให้กระพริบ</Blink>

เช่น    <Marquee>JENJIRA&TOSSAPON</Marquee>           

          <Blink>JENJIRA&TOSSAPON</Blink> 

code

Answer

การจัดตำแหน่งข้อความ

รูปแบบ Code

: การจัดย่อหน้าแบบชิดซ้าย <P Align=Left>ข้อความที่ต้องการจัดตำแหน่ง</P>
: การจัดย่อหน้าแบบกึ่งกลาง <P Align=center>ข้อความที่ต้องการจัดตำแหน่ง</P>
: การจัดย่อหน้าแบบชิดขวา  <P Align=Right>ข้อความที่ต้องการจัดตำแหน่ง</P>

เช่น    <P Align=Left>ชิดซ้าย</P>

          <P Align=center>กึ่งกลาง</P>

          <P Align=Right>ชิดขวา</P> 

code

Answer

ที่มา

      :   http://meepooh23.multiply.com/journal/item/10/

&show_interstitial=1&u=%2Fjournal%2Fitem

วันที่  12  กรกฎาคม  2555