ยินดีต้อนรับเข้าสู่เว็บการเรียนรู้ เรื่อง การเขียนเว็บเพจด้วยภาษา HTML
 
 
ytการสร้างตาราง


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

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

ตารางจะควบคุมการแสดงผลของข้อความ รูปภาพ ปุ่มเมนู ต่างๆ ให้รวมเป็นกลุ่ม ในเว็บเพจที่ใช้เทคนิคนี้แม้ว่าเราจะมองไม่เห็นเส้นขอบตาราง (เพราะกำหนดให้ซ่อนเส้นขอบไว้) แต่เราสามารถมองเห็นขอบเขตของตารางช่องต่างๆ ได้ ซึ่งเราจะได้ศึกษาเทคนิควิธีการในบทนี้และบทต่อๆ ไป

รูปแบบคำสั่ง คำอธิบาย
<TABLE>...............................</TABLE>
<CAPTION>..........................</CAPTION>
<TR>........................................</TR>
<TH>........................................</TH>
<TD>........................................</TD>
คำสั่งที่กำหนดให้บราวเซอร์สร้างตาราง
คำสั่งที่ใช้ตั้งชื่อหรือหัวข้อเรื่องให้กับตาราง
คำสั่งสำหรับสร้างแถวในตาราง (ROW)
คำสั่งสำหรับกำหนดข้อมูลส่วนหัวของตาราง
คำสั่งสำหรับสร้างแถวในตาราง (ROW)

ตัวอย่างเป็นการสร้างตาราง 2 แถว 2 คอลัมน์

รูปแบบคำสั่ง การแสดงผล
<TABLE>
    <CAPTION>ชื่อตาราง</CAPTION>
    <TR>
               <TH> ข้อมูลส่วนหัว1</TH>
               <TH> ข้อมูลส่วนหัว2</TH>
    <TR>
        <TD>ช่องที่ 1</TD><TD>ช่องที่ 2</TD>
    </TR>
    <TR>
        <TD>ช่องที่ 3</TD><TD>ช่องที่ 4</TD>
    </TR>
</TABLE>
ชื่อตาราง
ข้อมูลส่วนหัว1 ข้อมูลส่วนหัว2
ช่องที่ 1 ช่องที่ 2
ช่องที่ 3 ช่องที่ 4

ถ้าดูจากการแสดงผลฝั่งขวาแล้วจะเห็นว่าไม่เห็นมีตารางอะไรเลย เห็นเพียงข้อความ 4 ชุดในสองแถวเท่านั้นเอง แต่ในความเป็นจริงมีตารางอยู่แต่ไม่แสดงเส้นขอบ ซึ่งในคำสั่ง <TABLE> เองเราสามารถเพิ่มคุณสมบัติการแสดงเส้นขอบด้วยการเพิ่ม border="x" เมื่อ x เป็นตัวเลขขนาดพิกเซล (ปกติถ้าไม่กำหนดจะมีค่าเป็น 0)

รูปแบบคำสั่ง การแสดงผล
<TABLE BORDER="1" >
    <CAPTION>ชื่อตาราง</CAPTION>
    <TR>
               <TH> ข้อมูลส่วนหัว1</TH>
               <TH> ข้อมูลส่วนหัว2</TH>
    <TR>
        <TD>ช่องที่ 1</TD><TD>ช่องที่ 2</TD>
    </TR>
    <TR>
        <TD>ช่องที่ 3</TD><TD>ช่องที่ 4</TD>
    </TR>
</TABLE>
ชื่อตาราง
ข้อมูลส่วนหัว1 ข้อมูลส่วนหัว2
ช่องที่ 1 ช่องที่ 2
ช่องที่ 3 ช่องที่ 4

หมายเหตุ  คำสั่ง <CAPTION>............</CAPTION> และ <TH>..............</TH>  อาจไม่จำเป็นต้องใส่ก็ได้

Click to TOP
ytการกำหนดตำแหน่งการจัดวางตาราง

เราสามารถกำหนดตำแหน่งการวางตารางได้ 3 รูปแบบ

รูปแบบคำสั่ง การแสดงผล
<TABLE BORDER="1" WIDTH="90%">
    <TR>
        <TD>ช่องที่ 1</TD><TD>ช่องที่ 2</TD>
    </TR>
    <TR>
        <TD>ช่องที่ 3</TD><TD>ช่องที่ 4</TD>
    </TR>
</TABLE>
ช่องที่ 1 ช่องที่ 2
ช่องที่ 3 ช่องที่ 4

 

Click to TOP
ytSpecifying table sizes : การกำหนดความกว้างของตาราง

เราสามารถกำหนดความกว้างของตารางด้วยการกำหนดค่าในหน่วยเปอร์เซนต์ของหน้าจอ (ความกว้างจะขยายตามขนาดบราวเซอร์) และในหน่วยพิกเซล (ความกว้างจะคงที่ไม่ขยายตามบราวเซอร์) ด้วยการเพิ่มส่วนขยาย WIDTH="x" เข้าไปภายในคำสั่ง <TABLE> เช่นเดียวกับการแสดงเส้นขอบ

รูปแบบคำสั่ง การแสดงผล
<TABLE BORDER="1" WIDTH="90%">
    <TR>
        <TD>ช่องที่ 1</TD><TD>ช่องที่ 2</TD>
    </TR>
    <TR>
        <TD>ช่องที่ 3</TD><TD>ช่องที่ 4</TD>
    </TR>
</TABLE>
ช่องที่ 1 ช่องที่ 2
ช่องที่ 3 ช่องที่ 4
<TABLE BORDER="1" WIDTH="260"
HEIGHT="100">
    <TR>
        <TD>ช่องที่ 1</TD><TD>ช่องที่ 2</TD>
    </TR>
    <TR>
        <TD>ช่องที่ 3</TD><TD>ช่องที่ 4</TD>
    </TR>
</TABLE>
ช่องที่ 1 ช่องที่ 2
ช่องที่ 3 ช่องที่ 4

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

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

Click to TOP
ytText alignment in table cells : การกำหนดการจัดวางข้อความ

โดยปกติเมื่อป้อนข้อความในตารางเราจะเห็นข้อความปรากฏทางด้านซ้ายของตาราง เราสามารถกำหนดให้ข้อความอยู่ในตารางตามแนวนอน โดยใช้ส่วนขยาย ALIGN="LEFT/CENTER/RIGHT" (เลือกตำแหน่งตามที่ต้องการจากคำทั้ง 3) ถ้าไม่กำหนดตำแหน่ง ค่าปกติจะเป็นซ้าย (left)
            <TD ALIGN="LEFT"> หรือ <TD ALIGN="CENTER"> หรือ <TD ALIGN="RIGHT">

นอกจากการกำหนดตำแหน่งข้อความในแนวนอนแล้ว ยังสามารถกำหนดตำแหน่งตามแนวตั้งได้เช่นกัน โดยใช้ส่วนขยาย VALIGN="TOP/MIDDLE/BOTTOM" (เลือกตำแหน่งตามที่ต้องการจากคำทั้ง 3) ถ้าไม่กำหนดตำแหน่ง ค่าปกติจะเป็นซ้าย (middle)
            <TD VALIGN="TOP"> หรือ <TD VALIGN="MIDDLE"> หรือ <TD ALIGN="BOTTOM">

รูปแบบคำสั่ง
<TABLE BORDER="1" WIDTH="95%" HEIGHT="100">
    <TR>
        <TD align="left" valign="top">ซ้ายบน</TD>
        <TD align="right" valign="middle">ขวากลาง</TD>
    </TR>
    <TR>
        <TD align="center" valign="bottom">กลางล่าง</TD>
        <TD align="right" valign="top">ขวาบน</TD>
    </TR>
</TABLE>
การแสดงผล
ซ้ายบน ขวากลาง
กลางล่าง ขวาบน

Click to TOP
ytImages in table cells : การแทรกภาพในตาราง

อย่างที่บอกไว้แล้วว่า ตาราง สามารถที่จะควบคุมตำแหน่งของรูปภาพและข้อความให้อยู่ในที่ที่เราต้องการได้ การแทรกรูปภาพเราจะแทรกเข้าไปในเซลใดๆ ก็ได้ตามต้องการ โดยยังใช้คำสั่ง <IMG> แทรกระหว่าง <TD> ... lt;/TD>

รูปแบบคำสั่ง
<HTML>
    <HEAD>
        <TITLE>Images in Table : แทรกรูปภาพในตาราง</TITLE>
    </HEAD>
    <BODY>
        <TABLE BORDER="1">
            <TR>
                <TD>
                    <IMG SRC="mages/chickenlittle01.gif">
                </TD>
                <TD>
                    รูปด้านข้างนี้คือ chickenlittle
                </TD>
            </TR>
        </TABLE>
    </BODY>
</HTML>
การแสดงผล
chickenkittle รูปด้านข้างนี้คือ chickenlittle

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

Click to TOP
ytEND : สรุปคำสั่งที่ใช้ในบทนี้
TAGS รายละเอียด
<TABLE> ... </TABLE> คำสั่งกำหนดการสร้างตาราง ซึ่งในคำสั่งนี้สามารถเพิ่มเติมส่วนขยายให้กับตารางได้อีกมาก เช่น เส้นขอบ สีพื้นตาราง การจัดข้อความทั้งในแนวตั้งและแนวนอน
<TR> ... </TR> คำสั่งกำหนดการสร้างแถว (Table Row)
<TD> ... </TD> คำสั่งกำหนดช่องตารางหรือเซล หรือคอลัมน์ (Table Data) สำหรับบรรจุข้อมูล ตัวอักษร ภาพ
<TH> ... </TH> คำสั่งกำหนดช่องตารางหรือเซล หรือคอลัมน์ที่เป็นหัวตาราง (Table Heading) เหมือนกับ <TD> แต่ข้อความที่บรรจุระหว่างคำสั่งนี้จะเป็นตัวหนาและจัดกึ่งกลางเสมอ



ก่อนหน้านี้
หน้าถัดไป
 
 
เว็บไซต์นี้ แสดงผลได้ดี บน Internet Explorer ความละเอียดที่ 1024 x 760 Text Size Medium
จัดทำเพื่อใช้ประกอบการเรียนการสอนผ่านระบบเครือข่ายอินเทอร์เน็ต
รายวิชา การพัฒนาเว็บเพจด้วยโปรแกรมสำเร็จรูป
โรงเรียนคูซอดประชาสรรค์ อำเภอเมือง จังหวัดศรีสะเกษ
 
SITEMAP