ทำแบบทดสอบก่อนเรียน
การออกแบบเว็บไซต์
ภาษา html
การจัดรูปแบบเอกสาร
การจัดรูปแบบตัวอักษร
การใส่รูปภาพลงในเว็บเพจ
การสร้างตาราง
การเชื่อมโยงเว็บเพจ
การใส่ไฟล์มัลติมีเดีย
แบบทดสอบหลังเรียน

3. การจัดรูปแบบของตาราง

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

Border                ใช้กำหนดให้แสดงเส้นของกรอบตารางและกำหนดความหนาของกรอบตาราง
Height                 ใช้กำหนดความสูงของตาราง
Width                  ใช้กำหนดความกว้างของตาราง
Cellspacing          เป็นการกำหนดช่องว่างระหว่างตารางแต่ละช่อง
Cellpadding         เป็นการกำหนดระยะห่างระหว่างเส้นของเซลล์กับข้อมูลในเซลล์ 
align                    ใช้กำหนดการจัดวางตำแหน่งตาราง


3.1 การใส่เส้นตาราง


          เราสามารถแสดงเส้นตารางได้ด้วยการระบุคำสั่ง boder ลงในแท็ก <table> โดยมีรูปแบบดังนี้

<table border ="ขนาดเส้น">


    เมื่อ    ขนาดเส้น       กำหนดเป็นตัวเลขความหนาของเส้นมีหน่วยเป็นพิกเซล


ตัวอย่างเช่น

<table border ="1">


ผลที่ได้บนบราวเซอร์จะเป็นดังนี้

tt

3.2 การกำหนดขนาดของตาราง

          เราสามารถกำหนดขนาดของตารางได้ด้วยการระบุคำสั่ง height และwidth ลงในแท็ก <table> โดยมีรูปแบบดังนี้


<table height = "ความสูง" width = "ความกว้าง">


       เมื่อ
            Height              ใช้กำหนดความสูงของตารางทั้งตาราง โดยกำหนดเป็นตัวเลขพิกเซล หรือตัวเลขเปอร์เซ็น                                       ของความสูงของหน้าต่างเบราว์เซอร์ ขณะนั้น
            Width                ใช้กำหนดความกว้างของตารางทั้งตารางโดยกำหนดเป็นตัวเลขพิกเซล หรือตัวเลขเปอร์เซ็น                                        ของความกว้างของหน้าต่างเบราว์เซอร์ขณะนั้น


ตัวอย่างเช่น

<table height = "400" width = "150">


ผลที่ได้บนเบราว์เซอร์จะเป็นดังรูป               


j


3.3 การกำหนดความกว้างของคอลัมน์

        เมื่อเรากำหนดขนาดของตารางได้แล้วในบางครั้งเราอาจต้องการกำหนดขนาดวามกว้างของแต่ละคอลัมน์ให้แน่นอน
ตายตัว ซึ่งก็สามารถกระทำได้โดยการระบุคำสั่ง width ลงในแท็ก < td> เช่นเดียวกับที่กำหนดลงในแท็ก  <table> ในหัวข้อที่แล้ว  เช่น 


<td width="200">


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


3.4 การกำหนดระยะห่างระหว่างเซลล

          เราสามารถกำหนดระยะระห่างระหว่างเซลล์ในตารางได้ด้วยการระบุคำสั่ง cellspacing และ cellparring ลงในแท็ก <table> โดนมีรูปแบบดังนี้


<table cellspacing="ตัวเลข" cellpadding="ตัวเลข">


    เมื่อ    
           cellspacing             เป็นการกำหนดช่องว่างระหว่างเซลล์ โดยกำหนดเป็นตัวเลข

                                     
           cellpadding            เป็นการกำหนดระยะห่างระหว่างเส้นขอบเซลล์กับข้อมูลในเซลล์โดยกับหนดเป้นตัวเลข

                                     


ตัวอย่างเช่น


<table border="1" width="1" height="150"
Cellspacing="5" cellpadding="10">

 

ผลที่ได้จากเบราว์เซอร์จะเป็นดังรูป