หน่วยที่ 6 การสร้างตาราง (table)


Table คำสั่งที่สำคัญสุดในการทำเว็บเพจHTML

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

    1.ลองสร้างตารางดู 
    ตารางจะแบ่งออกเป็น 2 ส่วน คือ 

    1.แถว   <tr> คือจำนวนตารางในแนวนอน

    2.หลัก   <td> คือจำนวนตารางในแนวตั้ง

รูปแบบของคำสั่งตาราง

<table>

    <tr>


        <td></td>


    </tr>


</table>


    2.เส้นขอบตาราง 
    เมื่อพูดถึงตารางก็ต้องพูดถึงเส้นขอบของตาราง ซึ่งในบทนี้จะพูดถึงการกำหนดเส้นขอบของตาราง โดยขอบของตารางเราจะใช้ Attibute คำสั่ง border ในการควบคุม 

รูปแบบของคำสั่ง border

<table border="ขนาดเส้นของขอบ"> <tr><td></td></tr> </table>


    3.หัวข้อตาราง 
    ปรกตินั้นถ้าเราจะเขียนส่วนที่เป็นหัวข้อเราจะใช้ h tag หรือ <b> เพื่อเน้นส่วนที่เป็นหัวข้อ แต่ในส่วนของตารางมีคำสั่งให้เราใช้กันอยู่แล้ว นั่นคือ th 

รูปแบบของคำสั่ง border

<table> <tr><th></th></tr> </table>

ตัวอย่างคำสั่งตั้งแต่ข้อ 1-3
<table border="1">
  <tr>
      <th>หัวข้อ</th>
      <th>เนื้อหา</th>
                  </tr>
                  
  <tr>
                      <td>1</td>
      <td>เนื้อหาข้อที่ 1</td>
  </tr>

    <tr>
       <td>2</td>
         <td>เนื้อหาข้อที่ 2</td>
  </tr>
                </table> 
    
    4.ใส่ช่องว่างให้ตาราง 
    ถ้าเรามีตาราง 6 ช่อง แต่มีข้อมูลอยู่เพียง 5 ชิ้น เมื่อเราเขียนข้อมูลใส่ตารางจะพบว่าตารางแสดงผลมีเส้นขาดหายไปดังนั้นเราจึงต้องใส่ค่าว่างไปให้ตารางเพื่อแสดงผลเส้นที่ขาดหายไป ด้วยการใช้ &nbsp; 

การใช้ช่องว่าง

<table> <tr><td> &nbsp; </td></tr> </table>


    5.การผสานตาราง 
    ถ้าข้อมูลเขาเรา มี 1 หัวข้อใหญ่แต่มีข้อมูล ย่อยๆ 2 ชนิด ทำให้เราต้องทำการผสานตารางตามตัวอย่าง โดยมีหลักดังนี้

    1.ผสานในหลักให้ใช้คำสั่ง colspan = "จำนวนช่องที่ต้องการผสาน" 

    2.ผสานในแถวให้ใช้คำสั่ง rowspan = "จำนวนช่องที่ต้องการผสาน" 

ตัวอย่างคำสั่ง
<h4>การผสานตาราง ในหลัก:</h4>
        <table border="1">
        
        <tr>
            <td>Data 1</td>
            <td colspan="2">Data 2</td>
        </tr>
        
        <tr>
             <td>Data 3</td>
             <td>Data 4</td>
             <td>Data 5</td>
        </tr>

        </table>


       <h4>การผสานตาราง ในแถว:</h4>
       <table border="1">
        
        <tr>
              <td>Data 1</td>
              <td>Data 2</td>
        </tr>
        
        <tr>
               <td rowspan="2">Data 3</td>
               <td>Data 4</td>
        </tr>
        
        <tr>
          <td>Data 5</td>
        </tr>
        
       </table>

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

ตัวอย่างคำสั่ง

  <table border="1">
                <tr>
                       <td colspan="2"><img src="logo.jpg"></td>               
               <tr>           
                       <td>
                             <!-- ตารางที่ซ้อนอยู่ -->
                             <table border="1">
                                  <tr>
                                      <td>เนื้อหาของเว็บไซต์</td>
                                  </tr>
                                  <tr>
                                      <td>ทำเว็บเบื้องต้น</td>
                                  </tr>
                                  <tr>
                                      <td>การเขียน HTML</td>
                                  </tr>
                                  <tr>
                                      <td>การใช้งาน CSS</td>
                                  </tr>
                             </table>
                       </td>
                       
                       <td>เว็บไซต์ www.hellomyweb.com <br>
                              เป็นเว็บไซต์ที่สอนทำเว็บ<br>
                              ซึ่งมีเนื้อหาตามหัวข้อทางซ้ายมือ<br>
                       </td>
               </tr>

    7.กำหนดระยะห่างของช่อง
    ในตัวอย่างจะเป็นการแสดงการใช้งาน cellpadding และ cellspacing โดยทั้ง 2 อย่างมีการใช้งานดังนี้ 

    1. cellpadding    ใช้กำหนดระยะห่างระหว่างข้อมูล กับเส้นขอบตาราง 

    2. cellspacing    ใช้กำหนดระยะห่างระหว่างเส้นตารางภายนอก และภายใน ให้ลองสังเกตุจากตัวอย่างดู จะเห็นว่าแตกต่างจากการใช้ border 

ตัวอย่างคำสั่ง

 <h4>ตารางทั่วไป</h4>
             <table border="1">
              <tr>
                  <td>First</td>
                  <td>Row</td>
              </tr>   
              
              <tr>
                  <td>Second</td>
                  <td>Row</td>
              </tr>
              </table>         
             <h4>ตาราง cellpadding="10" </h4>
             <table border="1" cellpadding="10">
              <tr>
                  <td>First</td>
                  <td>Row</td>
              </tr>   
              
              <tr>
                  <td>Second</td>
                  <td>Row</td>
              </tr>
              </table>

             <h4>ตาราง cellspacing="10" </h4>
             <table border="1" cellspacing="10">
              <tr>
                  <td>First</td>
                  <td>Row</td>
              </tr>   
              
              <tr>
                  <td>Second</td>
                  <td>Row</td>
              </tr>
              </table>

    8.ใส่พื้นหลังให้ตาราง
    ในบทนี้จะใส่พื้นหลังให้กับตาราง และช่องของตาราง โดยพื้นหลังมี 2 แบบคือ 

    1.แบบที่เป็นสี ใช้คำสั่ง bgcolor 

    2.แบบที่เป็นรูปภาพ ใช้คำสั่ง background 

ตัวอย่างคำสั่ง

 <h4>ใส่พื้นหลังเป็นสี:</h4>
         <table border="1" 
         bgcolor="yellow">
         <tr>
           <td>Data 100</td>
           <td>Data 200</td>
         </tr>   
         <tr>
           <td>Data 300</td>
           <td>Data 400</td>
         </tr>
         </table>

         <h4>ใส่พื้นหลังเป็นรูปภาพ:</h4>
         <table border="1" 
         background="logo.jpg">
         <tr>
           <td>Data 100</td>
           <td>Data 200</td>
         </tr>   
         <tr>
           <td>Data 300</td>
           <td>Data 400</td>
         </tr>
         </table>

         <h4>ใส่พื้นหลังให้กับช่อง:</h4>
         <table border="1">
         <tr>
           <td background="logo.jpg">Data 100</td>
           <td>Data 200</td>
         </tr>   
         <tr>
           <td>Data 300</td>
           <td bgcolor="yellow">Data 400</td>
         </tr>
         </table>

    9.ขนาดตาราง
    ขนาดของตารางกำหนดได้โดย Attibute คำสั่ง width และความสูงใช้คำสั่ง height ซึ่งเราจะกำหนดหน่วยเป็น % หรือ px(pixel) แล้วแต่จุดประสงค์ 

    1.แบบเปอร์เซนต์ (%) ขนาดจะเปลี่ยนตามขนาดหน้าต่างของ web browser ที่เปลี่ยนแปลง 

    2.แบบ pixel (px) ขนาดจะเท่าที่เรากำหนดตลอดไม่มีการเปลี่ยนแปลง ถ้าเราไม่กำหนดหน่วยเป็น % ตัวของ html จะกำหนดให้เป็น px เสมอ 

ตัวอย่างคำสั่ง
 <p>ตารางกำหนดขนาดแบบ 50% </p>
              <table border="1" width="50%">
                  <tr>
                       <td> data 1 </td>
                       <td> data 2 </td>
                  </tr>
                  <tr>
                       <td> data 3 </td>
                       <td> data 4 </td>
                  </tr>
              </table>


              <p>ตารางกำหนดขนาดแบบ 200px </p>
              <table border="1" width="200">
                  <tr>
                       <td> data 1 </td>
                       <td> data 2 </td>
                  </tr>
                  <tr>
                       <td> data 3 </td>
                       <td> data 4 </td>
                  </tr>
              </table>

              <p>ตารางกำหนดความสูงของช่อง 50px </p>
              <table border="1" width="200">
                  <tr>
                       <td height="50"> data 1 </td>
                       <td> data 2 </td>
                  </tr>
                  <tr>
                       <td> data 3 </td>
                       <td> data 4 </td>
                  </tr>
              </table>

    10.การจัดเรียงตัวอักษรในช่องของตาราง
    ในบทนี้จะเป็นเรื่องของ การจัดเรียงตัวอักษร หรือ รูปภาพ ในช่องของตารางให้ชิดซ้าย หรือชิดขวา หรือจัดเข้ากึ่งกลาง ซึ่งจะทำให้ตารางข้อมูลดูได้ง่ายขึ้น ซึ่งเราจะใช้ Attibute คำสั่ง Align 

ตัวอย่างคำสั่ง
  <p>การใช้ align ในการจัดตัวอักษรในตาราง</p>
            <table border="1" width="100%" cellpadding="10">
              <tr>
                    <th align="center" width="50%"> โครงการก่อสร้าง</th>
                    <th align="center"> มูลค่างาน (บาท) </th>
              </tr>
              <tr>
                   <td align="left">โรงแรม</td> 
                   <td align="right">3,600,000,000</td>
              </tr>
              <tr>
                   <td align="left">spa</td> 
                   <td align="right">700,000,000</td>
              </tr>
             </table>


    11.การกำหนดขอบของตาราง
    ขอบของตารางเราสามารถกำหนดได้ว่าจะให้มีขอบที่ด้านใดบ้าง โดยใช้ Attibute คำสั่ง frame ซึ่งมีค่าที่ใส่ให้ frame ตามข้อมูลด้านล่าง
BORDERแสดงเส้นกรอบทุกด้านของช่องตาราง
VOIDลบเส้นกรอบทุกด้านของตาราง
HSIDESแสดงเส้นด้านบนและด้านล่างของช่อางตาราง
ABOVEแสดงเส้นด้านบนของช่องตาราง
BELOWแสดงเส้นด้านล่างของช่องตาราง
VSIDESแสดงเส้นด้านซ้ายและด้านขวาของช่องตาราง
LHSแสดงเส้นด้านซ้ายของช่องตาราง
RHSแสดงเส้นด้านขวาของช่องตาราง
ตัวอย่างคำสั่ง
  <p>
             ดูที่ขอบของตาราง
           </p>

           <table frame="hsides" border="1">
                <tr>
                     <td>Data 1</td>
     <td>Data 2</td>
                </tr>   
           </table>
           <br />

           <table frame="vsides" border="1">
                <tr>
                      <td>Data 1</td>
                      <td>Data 2</td>
               </tr>   
           </table>