Munu

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

หน้าแรก » ข่าวสาร » การสร้างตาราง html

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

โครงสร้างตาราง

<TABLE>
<TR>
<TH>หัวข้อตาราง
<TD>รายละเอียดย่อย
<TR>
<TH>หัวข้อตาราง
<TD>รายละเอียดย่อย
</TABLE>

คำสั่ง
คุณสมบัติ
<TABLE>…</TABLE> เป็นคำสั่งเปิดปิดตาราง
<TR>…</TR> ตารางตามแนวนอน เป็นการกำหนดแถวในตาราง
<TH>…</TH> หัวข้อ ของ ตาราง ข้อความ ที่อยู่ใน คำสั่ง จะถูก จัดให้เป็น ตัวหนา
และกึ่งกลาง โดย อัตโนมัติ
<TD>…</TD> เป็นราย ละเอียด ของตาราง เป็นการ กำหนดจำนวน คอร์ลัม ของตาราง


คุณสมบัติของตาราง 

<TABLE>
ALIGN=align-type
BACKGROUND=url
BGCOLOR=color
BORDER=n
CELLPADDING=n
CELLSPACING=n
WIDTH=n
HEIGHT=n

โดย

ALIGN กำหนด ตำแหน่งตาราง โดย
LEFT=กำหนดตารางให้อยู่ทางซ้าย
RIGHT=กำหนดตารางให้อยู่ทางขวา
BACKGROUND ใส่ภาพกรฟิก เป็นพื้นหลังตาราง url เป็น ตำแหน่ง ภาพ
BGCOLOR กำหนดสีให้ตาราง
BORDER เส้นขอบ ตาราง n เป็นค่า ความหนาของ ขอบตาราง
BORDERCOLOR กำหนดสี ให้ขอบตาราง โดยสัมพันธ์กับ BORDER
CELLPADDING กำหนดระยะ ห่างระหว่าง ตัวหนังสือและเส้นแบ่งตาราง
CELLSPACING กำหนดขนาดของเส้นตาราง
WIDTH กำหนดความกว้างของตาราง เป็นตัวเลขและเป็น %
HEIGHT กำหนดความสูงของตารางเป็นตัวเลขและเป็น %

<TR>
ALIGN=align-type
BACKGROUND=url
BGCOLOR=color
BORDERCOLOR=color
VALIGN=align-type

โดย

ALIGN กำหนด ตำแหน่งข้อความในแถวตามแนวนอน โดย
LEFT=อยู่ทางซ้าย
CENTER=อยู่ตรงกลาง
RIGHT=อยู่ทางขวา
BACKGROUND ใส่ภาพกราฟิก เป็นพื้นหลังแถว url เป็น ตำแหน่ง ภาพ
BGCOLOR กำหนดสีที่เป็นฉากหลังให้แถว
BORDERCOLOR กำหนดสีให้ขอบตาราง
VALIGN จัดตำแหน่งข้อมูลในแนวตั้ง โดย
TOP = จัดอยู่ข้างบน
MIDDLE = จัดอยู่ตรงกลาง
BPTTOM = จัดอยู่ข้างล่าง

<TH>
ALIGN=align-type
BACKGROUND=url
BGCOLOR=color
BORDERCOLOR=color
COLSPAN=n
ROWSPAN=n
VALIGN=align-type

โดย

ALIGN กำหนด ตำแหน่งข้อความในแถวตามแนวนอน โดย
LEFT=อยู่ทางซ้าย
CENTER=อยู่ตรงกลาง
RIGHT=อยู่ทางขวา
BACKGROUND ใส่ภาพกราฟิก เป็นพื้นหลังแถว url เป็น ตำแหน่ง ภาพ
BGCOLOR กำหนดสีที่เป็นฉากหลังให้แถว
BORDERCOLOR กำหนดสีให้ขอบตาราง
COLSPAN ปรับขนาดของคอร์ลัมให้มีขนาดเป็น เท่า ของความกว้างปกติ สูงสุดเท่ากับจำนวนคอร์ลัมที่มี
ROWSPAN ปรับขนาดความสูงของแถวในตารางเป็นเท่าของแถวปกติ สูงสุดเท่ากับ จำนวนแถวที่มี
VALIGN จัดตำแหน่งข้อมูลในแนวตั้ง โดย
TOP = จัดอยู่ข้างบน
MIDDLE = จัดอยู่ตรงกลาง
BPTTOM = จัดอยู่ข้างล่าง

<TD>
ALIGN=align-type
BACKGROUND=url
BGCOLOR=color
BORDERCOLOR=color
COLSPAN=n
ROWSPAN=n
VALIGN=align-type

โดย

ALIGN กำหนด ตำแหน่งข้อความในแถวตามแนวนอน โดย
LEFT           =  อยู่ทางซ้าย
CENTER    =  อยู่ตรงกลาง
RIGHT         =  อยู่ทางขวา
BACKGROUND ใส่ภาพกราฟิก เป็นพื้นหลังแถว url เป็น ตำแหน่ง ภาพ
BGCOLOR กำหนดสีที่เป็นฉากหลังให้แถว
BORDERCOLOR กำหนดสีให้ขอบตาราง
COLSPAN ปรับขนาดของคอร์ลัมให้มีขนาดเป็น เท่า ของความกว้างปกติ สูงสุดเท่ากับจำนวนคอร์ลัมที่มี
ROWSPAN ปรับขนาดความสูงของแถวในตารางเป็นเท่าของแถวปกติ สูงสุดเท่ากับ จำนวนแถวที่มี
VALIGN จัดตำแหน่งข้อมูลในแนวตั้ง โดย
TOP           = จัดอยู่ข้างบน
MIDDLE    = จัดอยู่ตรงกลาง
BPTTOM   = จัดอยู่ข้างล่าง

ตารางซ้อนตาราง
               มีอยู่ บ่อยครั้งที่เราจำเป็นที่จะต้องสร้างตารางให้มีลักษณะของตารางทับซ้อนกันได้ เพื่อผลทางการแสดงผลข้อมูล
ข้อมูลให้แบบละเอียดของข้อมูลได้มากที่สุด รูปแบบ การเขียน ก็เหมือน กับเมื่อ สร้าง list ซ้อน list นั่นคือ ในส่วน ของ บรรทัด
<TR> จะมี การสร้าง ตาราง ใหม่ <TABLE>…..</TABLE> ก่อนที่ จะมี ตัวเปิด </TR> ในบรรทัด นั้น ๆ เช่น

A B
C D
E

ซึ่งมีโคดดังนี้
<HTML>
<HEAD><TITLE>Table with and Neted tables</HEAD></TITLE>
<BODY>
<H1>Table with and Neted tables</H1>
<TABLE BORDER WIDTH=50%>
<TR><TD>A</TD><TD>B</TR></TR>
<TR><TD><TABLE BORDER WIDTH=100%>
<TR><TD>C</TD><TD>D</TR></TR>
</TABLE><TD>
<TD>E</TD></TR>
</TABLE >
</BODY>
</HTML>

การใส่รูปภาพลงในตาราง
           เรา สามารถ นำรูปภาพ ที่มี อยู่บรรจุ ลงใน ตาราง ที่สร้าง ขึ้นได้ โดย การ บรรจุคำสั่ง สำหรับการ แสดงรูปภาพ <IMG SRC=รูปภาพ>เข้าไป ในส่วน หนึ่งของ ตาราง เช่น

<TABLE BORDER=”2″ CELLPADDING=”5″ CELLSPACING=”5″ WIDTH=”60%”>
<TR>
<TD VALIGN=”bottom” WIDTH=”30%”><IMG SRC=”Aq.gif” WIDTH=”108″ HEIGHT=”108″></TD>
<TD WIDTH=”30%”><IMG SRC=”34.gif” WIDTH=”20″ HEIGHT=”20″></TD>
<TR>
<TR>
<TD VALIGN=”bottom” WIDTH=”30%”><IMG SRC=”direc.gif” WIDTH=”200″ HEIGHT=”44″></TD>
<TD WIDTH=”30%”><IMG SRC=”pencil.gif” WIDTH=”50″ HEIGHT=”50″></TD>
<TR>
</TABLE>


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

<TABLE BORDER=”2″ CELLPADDING=”5″ CELLSPACING=”5″ WIDTH=”60%”>
<TR>
<TD VALIGN=”bottom” WIDTH=”30%”><IMG SRC=”Aq.gif” WIDTH=”80″ HEIGHT=”80″></TD>
<TD WIDTH=”30%”><IMG SRC=”34.gif” WIDTH=”80″ HEIGHT=”80″></TD>
<TR>
<TR>
<TD VALIGN=”bottom” WIDTH=”30%”><IMG SRC=”direc.gif” WIDTH=”80″ HEIGHT=”80″></TD>
<TD WIDTH=”30%”><IMG SRC=”pencil.gif” WIDTH=”80″ HEIGHT=”80″></TD>
<TR>
</TABLE>


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

<table border=2 cellpadding=5 cellspacing=5 width=”50%”>
<tbody>
<tr>
<td width=”50%”><a href=”../index.asp”><img height=20 src=”34.gif” width=20 border=0></a></td>
<td width=”50%”><a href=”../index.asp”>กลับไปหน้าแรก</a></td>
</tr>
</tbody>
</table>

กลับไปหน้าแรก

เรามีทีมงานผู้เชี่ยวชาญที่มีประสบการณ์ด้านเว็บไซต์

มาประยุกต์ในการพัฒนาการให้บริการอยู่ตลอดเวลา เพื่อสร้างความพึงพอใจสูงสุดให้แก่ลูกค้าทุกท่าน
ด้วยประสบการณ์ที่เรามีอยู่นั้น ทำให้มั่นใจได้ว่าลูกค้าทุกท่านจะได้รับการบริการที่ดีจากเรา

Call

082-493-2295

E-mail

Konyubyub@Gmail.com

Location

บริษัท ดีไซน์นำโชค จำกัด
58/146 หมู่ที่ 6 หมู่บ้านซื่อตรง คลอง13 ตำบลบึงน้ำรักษ์ อำเภอธัญบุรี จังหวัดปทุมธานี 12110

2014 Powered by IYATHAI.com
Tel: 082-493-2295 E-mail: Konyubyub@gmail.com