วันพุธที่ 11 กันยายน พ.ศ. 2556

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

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

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

คำสั่งหลักที่ใช้ในการสร้างตารางของภาษา HTML  มีดังนี้

<TABLE>...........</TABLE>   

เป็นคำสั่งที่กำหนดให้โปรแกรมเบราว์เซอร์สร้างตาราง

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

ตัวอย่างการสร้างตาราง



ผลลัพธ์




คำสั่งต่างๆ ที่ใช้ในการตกแต่งตารางของภาษา HTML 

คำสั่ง BORDER   ใช้กำหนดความหนาให้กับเส้นขอบของตาราง มีหน่วยเป็น Pixel ถ้าไม่ใส่คำสั่งนี้ไว้ด้วย  BORDER  ก็จะมีค่าเท่ากับ 1 ซึ่งเป็นค่าปกตอ คือจะไม่เห็นเส้นขอบของตาราง  


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




ผลลัพธ์




คำสั่ง ALIGN ใช้กำหนดตำแหน่งการจัดวางตาราง มี 3 รูปแบบ คือ
                  - LEFT    คือ จัดตารางชิดซ้าย (ค่าปกติ) ของจอภาพ
- RIGHT  คือ จัดตารางชิดขวาของจอภาพ
          - CENTER  คือ จัดตารางไว้กึ่งกลางของจอภาพ


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




ผลลัพธ์



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



ตัวอย่าง





ผลลัพธ์




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


ตัวอย่าง



ผลลัพธ์




คำสั่ง 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 

ไม่มีความคิดเห็น:

แสดงความคิดเห็น