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

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

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

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

ในการสร้างตารางนั้นจะมี 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

GENRES

Video Of the Day

Facebook

Labels

Labels

Labels

Labels