เขียน web ตอนที่ 4

สมาชิกเลขที่14 | 06 ต.ค. 53

2.3K views

คำสั่งการสร้างตาราง

จากในคราวที่แล้ว เราดูคำสั่งเกี่ยวกับการทำ hyperlink ไปแล้วนะครับ มาคราวนี้เรามาดูวิธีการสร้างตาราง กันบ้าง

คำสั่งนการสร้างตารางนะครับ

ใช้ tag <table> .... </table> เพื่อบอก จุดเริ่มต้นและสิ้นสุดตาราง
            <tr>....</tr> ในการสร้างแถว
            <th>....</th> ในการสร้างหัวคอลัมน์
            <td>....</td> ในการสร้างคอลัมน์

ตัวอย่างในการสร้าง นะครับ

<HTML>
<HEAD>
<TITLE> บทเรียนที่ 4</TITLE>
</HEAD>
<BODY>
            <table>
                     <tr>
                        <th>คอลัมน์ที่ 1</th>
                        <th>คอลัมน์ที่ 2</th>
                     </tr>
                     <tr>
                        <td>ข้อมูลที่ 1</td>
                        <td>ข้อมูลที่ 2</td>
                     </tr>
                     <tr>
                        <td>ข้อมูลที่ 3</td>
                        <td>ข้อมูลที่ 4</td>
                     </tr>
            </table>
</BODY>
</HTML>

ตามตัวอย่างด้านบนจะได้ ตาราง ที่มี 3 แถว 2 คอลัมน์ ครับ

นอกจากนี้ เราสามารถจัดรูปแบบต่างๆ ของตารางได้ เช่น

border            ใส่ขอบให้กับตาราง โดยค่าเป็นตัวเลข ถ้าเรากำหนดไม่มีเส้นขอบ คือ 0
                       วิธีใช้ <table border = "1"></table>

bordercolor     เติมสีขอบตารางโดยสามารถใส่ได้ 2 แบบคือ ค่าชื่อสีเช่น red,yellow และค่า RGB เช่น #FFEAFF,#FFFF00
                       วิธีใช้ <table bordercolor="#FF0000"></table>

cellpadding     เพิ่มระยะห่างระหว่างขอบตารางและข้อความ
                       วิธีใช้ <table cellpadding = "3"></table>

cellspacing      เพิ่มระยะห่างนอกขอบตารางและข้อความโดยข้อความชิดขอบคือ 0
                       วิธีใช้ <table cellspacing = "3"></table>

width               ความกว้างของตารางหรือคอลัมน์โดยใส่ค่าได้ 2 แบบคือแบบ % (Percent) เช่น 15%,100% และค่า Pixel (px) เช่น
                       50 , 100
                       วิธีใช้ <table width = "600"></table> คือการกำหนดให้ตารางกว้าง 600 pixel
                               <table width = "80%"></table> คือการกำหนดให้ตารางกว้าง 80 % ของขนาดพื่นที่ที่ตารางนั้นสร้างอยู่
                               <td width = "50"></td> คือการสร้างคอลัมน์กว้าง 50 px

height             ความสูงของตารางหรือคอลัมน์โดยใส่ค่าได้ 2 แบบคือแบบ % (Percent) เช่น 15%,100% และค่า Pixel (px) เช่น
                       50 , 100
                       วิธีใช้ <table height= "600"></table> คือการกำหนดให้ตารางสูง 600 pixel
                               <table height= "80%"></table> คือการกำหนดให้ตารางสูง 80 % ของขนาดพื่นที่ที่ตารางนั้นสร้างอยู่
                               <td height= "50"></td> คือการสร้างคอลัมน์สูง 50 px

align              ตำแหน่งของข้อความโดยสามารถให้อยู่ทาง ซ้าย,กลาง,ขวา โดยใส่ได้ 3 ค่าคือ left,center,right
                      วิธีใช้ <tr align = "left"></tr> คือการกำหนดให้ข้อความอยู่ชิดซ้ายของคอลัมน์

valign             ตำแหน่งของข้อความโดยสามารถให้อยู่ทาง บน,กลาง,ล่าง โดยใส่ได้ 3 ค่าคือ top,middle,bottom
                      วิธีใช้ <tr valign = "middle"></tr> คือการกำหนดให้ข้อความอยู่ตรงกลางของคอลัมน์

bgcolor           สีพื้นหลังของคอลัมน์โดยสามารถใส่ได้ 2 แบบคือ ค่าชื่อสีเช่น red,yellow และค่า RGB เช่น #FFEAFF,#FFFF00
                      วิธีใช้ <td bgcolor = "yellow"></td>

background   ภาพพื้นหลังของคอลัมน์
                      วิธีใช้ <td background   = "ตำแหน่งของรูปภาพ"></td>

colspan         การรวมคอลัมน์ กับ คอลัมน์
                     วิธีใช้ <td colspan = "2"></td>
                     ตัวอย่าง
                              <table width="100%" border="1">
                                          <tr>
                                                <td> </td>
                                                <td> </td>
                                          </tr>
                                          <tr>
                                                <td colspan = "2"> </td>
                                          </tr>
                               </table>
                      จากตัวอย่างจะเป็นการสร้าง ตาราง ที่มี 2 แถว โดยแถวบนมี 2 คอลัมน์ แต่แถวที่สองจะมีคอลัมน์เดียวจากการใช้คำสั่ง colspan
                     ในการรวมคอลัมน์


rowspan       การรวมแถวกับแถว
                     วิธีใช้ <td colspan = "2"></td>
                     ตัวอย่าง
                               <table width="100%" border="1">
                                     <tr>
                                          <td> </td>
                                          <td rowspan="2"> </td>
                                     </tr>
                                     <tr>
                                          <td> </td>
                                    </tr>
                               </table>
                      จากตัวอย่างจะเป็นการสร้าง ตาราง ที่มี 2 แถว โดยคอลัมน์แรกมี 2 แถว แต่คอลัมน์ที่สองจะมีแถวเดียวจากการใช้คำสั่ง rowspan
                     ในการรวมแถว

* คำสั่ง   เป็นคำสั่งในการเว้นวรรค เหมือนกับการ กด spacebar

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

<< ก่อนหน้า

ถัดไป >>