Home » , , , , , , , , » การสร้างตาราง
วันอังคารที่ 22 กรกฎาคม พ.ศ. 2557
undefined

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

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

           1. การสร้างตาราง  <table> </table>            2. การสร้างแถวภายในตาราง  <tr> </tr> แท็กนี้ต้องอยู่ภายในแท็ก <table> </table>
           3. การสร้างคอลัมน์ภายในแถวแต่ละแถว <td> </td> แท็กนี้ต้องอยู่ภายในแท็ก <tr> </tr> 
 รูปแบบโครงสร้างของตาราง

  <table>       <tr>
              <td>...ข้อมูล....</td>
        </tr>
  </table>
จากโครงสร้างจะเป็นการสร้างตารางแบบง่ายที่สุดคือ การสร้างตาราแบบ 1 แถว และ 1 คอลัมน์
 ตัวอย่างการสร้างตารางแบบ 2 x 3  (2 แถว 3 คอลัมน์)

  <html>
  <head><title> ....การสร้างตารางแบบ 2 x 3  (2 แถว 3 คอลัมน์)....</title></head>
       <body>
               <table>
                      <!--เริ่มต้นแถวที่ 1 ->
                      <tr>
                             <td>...ข้อมูล....</td>
                             <td>...ข้อมูล....</td>
                             <td>...ข้อมูล....</td>
                      </tr>
                      <!--เริ่มต้นแถวที่ 2 -> 
                      <tr>
                             <td>...ข้อมูล....</td>
                             <td>...ข้อมูล....</td>
                             <td>...ข้อมูล....</td>
                      </tr>
               </table>       </body>
  </html>
จากตัวอย่างจะสักเกตได้ว่ามีแถว 2 แถว ซึ่งจะเขียนโค้ด html ได้โดยเขียนแท็ก <tr> </tr> 2 ชุด และในแถวแต่ละแถวมีคอลัมน์ 3 คอลัมน์ ดังนั้นเราก็สามารถเขียนโค้ดเืื่พื่อสร้างคอลัมน์ โดยเขียนแท็ก <td></td> ไว้ใน <tr> </tr> โดยใน 1 แถวมีคอลัมน์ 3 คอลัมน์ ดังนั้นเราจึงต้องเขียนแท็ก <td></td> 3 ชุดไว้ในแท็ก <tr> </tr> แต่ละชุด
สำหรับบทความนี้ก็ขอจบเีีพียงเท่านี้ก่อนนะค่ะ แต่เรื่องของการจัดการกับตารางยังไม่หมดเพียงแค่นี้ค่ะ เพราะเรายังสามารถปรับแต่งตารางได้อีกมากมายค่ะ ไม่ว่าจะเป็นการใส่สี การจัดตำแหน่งต่าง ๆ ติดตามรายละเอียดได้ในบทความตอนต่อไปค่ะ

0 ความคิดเห็น:

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

Popular Posts

  • รวมโค้ดสี
  • HTML Basic : โค้ดง่ายๆ
    Hypertext Markup Language โครงสร้าง <html> <head> <title>.........</title> </head> <body> </body> ...
  • ทำความรู้จัก Search Engine
    ทำความรู้จัก Search Engine บทที่แล้วได้เกริ่นไปกี่ยวกับ SEO และเมื่อพูดถึง SEO หากจะไม่พูดถึงเรื่องของ Search Engine ก็คงกะไรอยู่ เพราะว่ามี...
  • การใส่คำอธิบายให้รูปภาพ
    การใส่คำอธิบายให้รูปภาพ โดยใช้โปรแกรม Dreamweaver การใส่คำอธิบายให้รูปภาพ ก็คือการใส่คำสั่ง ALT Tag ในภาษา HTLM นั่นเอง และเราสามารถใช้โปรแ...
  • เริ่มต้น SEO ด้วยการใส่ Meta Tag
    เริ่มต้น SEO ด้วยการใส่ Meta Tag การใส่แท็ก Meta วิธีเริ่มต้นสำหรับการทำ SEO ให้กับเว็บไซต์ ทำได้ง่าย ๆ แค่ใส่แท็ก Meta ให้เว็บไซต์ เว็บไซต์...
  • ลงโปรแกรมโปรแกรม Appserv
    ::  โปรแกรม Appserv โปรแกรมสำหรับจำลองเครื่องเป็น Server ในบทความนี้เราจะมาทำการติดตั้งโปรแกรม Appserv กันค่ะ ขั้นตอนแรกให้เราไปทำการหาโป...
  • การจัดรูปแบบข้อความ
    ::  การจัดรูปแบบข้อความ สำหรับบทความนี้ก็ยังคงเกี่ยวข้องกับข้อความ เป็นบทความที่ต่อเนื่องมาจากบทความที่แล้ว ในบทความนี้เราจะมาจัดรูปแบบขอ...
  • เอา ICON แต่งเว็บมาฝาก
    เอา ICON แต่งเว็บมาฝาก Icon และภาพกราฟิคสวย ๆ สำหรับใช้ตกแต่งเว็บมีให้ดาวน์โหลดมากมาย และที่สำคัญคือฟรีด้วยค่ะ ลองเข้าไปเลือกดูนะค่ะ รับรอง...
  • Banner มาตรฐาน
    รู้เรื่อง Banner มาตรฐาน ตามเว็บไซต์ต่าง ๆ สิ่งที่เราจะเห็นบ่อย ๆ และเกือบทุก ๆ เว็บต้องมีก็คือ Banner หรือป้าย ซึ่งมีอยู่มากมาย จนบางเว็บอา...
  • การสร้างตาราง
    ::  การสร้างตาราง จากบทความในบทที่ผ่าน ๆ มา ในเรื่องของการจัดตำแหน่งของข้อความ จะเห็นได้ว่าถึงแม้เราจะสามารถจัดตำแหน่งได้แล้ว แต่การจัดตำ...
 
Copyright © 2015 สอนทำเว็บไซต์ ง่ายนิดเดี่ยว