HOT-TH.COm

.:: สังคมดีๆแห่งการแบ่งปัน ::....

คุณมี ID แล้วหรือยัง ? สมัครสมาชิก  ลืมรหัสผ่าน

หาเงินออนไลน์ งาน online โปรเจคจบ ทำ seo adword สร้างเว็บฟรี แจกสคริป

ดู: 1383|ตอบกลับ: 2

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

[คัดลอกลิงก์]


1000

กระทู้

38

ติดตาม

1หมื่น

เครดิต

ผู้จัดการกระดาน

Rank: 9Rank: 9Rank: 9

โพสต์เมื่อ 9-6-2012 11:55:55 |ดูโพสต์ทั้งหมด
  shared Ping your blog, website, or RSS feed for Free

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> ในบรรทัด นั้น ๆ เช่น
AB
CD
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>


0

กระทู้

0

ติดตาม

70

เครดิต

สมาชิกระดับ 2

Rank: 2

โพสต์เมื่อ 20-3-2013 10:09:53 |ดูโพสต์ทั้งหมด
  shared Ping your blog, website, or RSS feed for Free

ขอบคุนคราบ


0

กระทู้

0

ติดตาม

7หมื่น

เครดิต

Vip

Rank: 8Rank: 8

โพสต์เมื่อ 20-4-2020 13:43:11 |ดูโพสต์ทั้งหมด
  shared Ping your blog, website, or RSS feed for Free

Sponsor
ขออภัย! คุณไม่ได้รับสิทธิ์ในการดำเนินการในส่วนนี้ กรุณาเลือกอย่างใดอย่างหนึ่ง ลงชื่อเข้าใช้ | สมัครสมาชิก

Ping your blog, website, or RSS feed for Free

© 2013 หาเงินออนไลน์ งาน online โปรเจคจบ ทำ seo adword สร้างเว็บฟรี แจกสคริป

Check Google Page Rank

Processed in 41.910752 second(s), 239 queries .

ขึ้นไปด้านบน