วันเสาร์ที่ 25 สิงหาคม พ.ศ. 2555

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

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

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

 -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>



ตัวอย่าง


ผลที่ได้


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




26 สิงหาคม 2555
            

วันอังคารที่ 21 สิงหาคม พ.ศ. 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