html: กันยายน 2012

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

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

ในการสร้างตารางนั้น ในเบื้องต้นต้องใช้คำสั่งหรือแท็กดังต่อไปนี้

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

ตัวอย่างการใช้คำสั่ง

ผลลัพธ์

จากตัวอย่างจะเห็นว่าไม่ปรากฎเส้นตารางขึ้นมาบนหน้าเว็บเพจ หากต้องการให้มีเส้นตาราง ต้องมีการใช้คุณสมบัติหรือแอททริบิวต์ border ช่วย ซึ่งจะต้องเขียนไว้ในแท็ก <table> ดังนี้

       <table border="1">

        นอกจากความหนาของเส้นตารางแล้ว ยังมีแอททริบิวต์ที่กำหนดสีของเส้นตาราง bordercolor ความห่างของช่องเซล์   cellspacing และการเว้นระยะ ระหว่างข้อมูลในเซลล์ กับกรอบเซลล์ cellpadding โดยใช้แอททริบิวต์ดังต่อไปนี้ bordercolor,cellspacing และ cellpadding เขียนต่อท้่ายในแท็ก <table> ดังนี้

<table border="1" bordercolor="blue" cellspacing="5" cellpadding="10">

border="1" หมายความว่าให้ตีเส้่นด้วยความหนาของเส้น 1 จุด (pixel) หากไม่ต้องการเส้นให้กำหนดค่าเป็น "0" หรือไม่ต้องใช้แอททริบิวต์นี้
bordercolor="ค่าสี" หมายถึงกำหนดสีเ้ส้นตาราง สามารถระบุค่าสี เช่น "blue" คือสีน้ำเงิน หรือใส่เป็นค่าตัวเลขฐานสิบหกก็ได้

cellspacing="5" หมายถึงระยะห่างระหว่างช่องเซลล์มีค่าเป็น 5 จุด (pixel)
cellpadding="10" หมายถึงระยะห่างระหว่างข้อมูลในเซลล์กับกรอบเซลล์มีค่าเป็น 10 จุด (pixel)

ตัวอย่างการใช้คำสั่ง

ผลลัพธ์

การกำหนดความกว้างความสูง

การกำหนดความกว้างและความสูงให้กับตารางโดยใช้แอททริบิวต์ width และ height ในแท็ก <table> ซึ่งสามารถกำหนดได้ 2 รูปแบบดังนี้

1.กำหนดเป็นเปอร์เซ็น ซึ่งจะปรับขนาดตารางตามขนาดหน้าจอของเบราว์เซอร์ในขณะนั้น

          <table width="50%" height="60%">

   2.กำหนดความกว้าง และความยาวเป็นจุด   (pixel)   ซึ่งขนาดตารางจะไม่ปรับตามขนาดหน้าจอของเบราว์เซอร์ในขณะแสดงผล วิธีนี้จะไม่ทำให้ตารางและข้อมูลในตารางขยับเปลี่ยนตำแหน่ง
           <table width="400" height="200">

ตัวอย่างการใช้คำสั่ง

ผลลัพธ์

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

ตารางสามารถจัดตำแหน่งให้อยู่ ชิดซ้าย ชิดขวา หรือตรงการเซลล์ได้ โดยการใช้ แอททริบิวต์ align="ตำแหน่งของตาราง"

"ตำแหน่งของตาราง" มีดังนี้
                    "center" หมายถึง อยู่ตรงกลางเซลล์
                    "left"     หมายถึง อยู่ชิดด้านซ้ายเซลล์
                    "right"   หมายถึง อยู่ชิดด้านขวาเซลล์

ตัวอย่างการใช้คำสั่ง

ผลลัพธ์

การรวมเซลล์

colspan="x" [การผสานคอลัมน์โดยที่ x เป็นจำนวนคอลัมน์ที่ต้องการรวม]

ตัวอย่างการใช้คำสั่ง

ผลลัพธ์

rowspan="x" [การผสานแถวโดยที่ x เป็นจำนวนแถวที่ต้องการรวม]

ตัวอย่างการใช้คำสั่ง

ผลลัพธ์

ที่มาค่ะ : http://school.obec.go.th/pp_school/html/table.html

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

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

การแทรกภาพ

ตามปกติภาพที่จะใช้แสดงในเว็บเพจ นิยมใช้ภาพที่มีชื่อสกุลของภาพเป็น .JPG หรือ .GIF เพราะเป็นไฟล์ภาพที่มีขนาดเล็ก สามารถแสดงผลได้รวดเร็ว จึงไม่ต้องเสียเวลาในการรอให้ภาพปรากฏนานเกินไป

ไฟล์รูปภาพอยู่ที่เดียวกับเว็บเพจ

คำสั่งที่ใช้ในการใส่แฟ้มภาพลงเว็บเพจ (Web Page)

คำสั่ง <IMG SRC> (Image Source) เป็นคำสั่งที่ใช้สำหรับใส่รูปภาพลงในเอกสาร HTML โดยที่ไฟล์รูปภาพต่าง ๆ ที่ต้องการนำมาใส่ในเอกสาร HTML นั้น จะต้องถูกเก็บอยู่ในโฟลเดอร์เดียวกันกับเอกสาร HTML เท่านั้น แต่ถ้าอยู่คนละแห่งก็สามารถนำมาใส่ได้ โดยการกำหนดไดร์ฟและโฟลเดอร์ของไฟล์ที่รูปภาพนั้นอยู่ไว้ด้วย มีรูปแบบการใช้คำสั่งดังนี้

ตัวอย่างการใช้คำสั่ง