แบบทดสอบ Online

สถิติผู้เข้าชม

507751
TodayToday2
YesterdayYesterday397
This WeekThis Week772
This MonthThis Month5809
All DaysAll Days507751

ROBOT TEAM


warayuphat panumphan 'Kru Pu', Powered by Joomla!
08 การสร้างตาราง table PDF Print E-mail
Written by Administrator   
Wednesday, 19 September 2018 07:53

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

การสร้างตาราง ลงในเว็บเพจ เราสามารถ ประยุกต์ นำไปใช้กับงานได้หลายอย่าง เพื่อความสวยงาม เป็นสัดส่วน ในหน้าเว็บเพจ

 

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

<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="/6150/../index.asp"><img height=20 src="/6150/34.gif" width=20 border=0></a></td>

<td width="50%"><a href="/6150/../index.asp">กลับไปหน้าแรก</a></td>

</tr>

</tbody>

</table>

 

 

ขอบคุณที่มา :- https://sites.google.com/site/class0223/learnhtml

 

ตัวอย่าง code

<table align="center" border="1" width="80%" bgcolor="#FFFF99">

<tr>

<td>Number</td>

<td>Name</td>

<td>Sirname</td>

</tr>

 

<tr>

<td>01</td>

<td>Warayuphat</td>

<td>Panumphan</td>

</tr>

<tr>

<td>02</td>

<td>Kita</td>

<td>Natsitthichai</td>

</tr>

 

<tr>

<td>03</td>

<td>Achita</td>

<td>Yodsri</td>

</tr>

</table>

 

ผลลัพธ์

 

 

 

 

Last Updated on Wednesday, 28 November 2018 05:38
 

Poll กรุณาตอบคำถามค่ะ

คุณเขียนโปรแกรมบ่อยแค่ไหน
 

Poll สื่อการสอน

สื่อแบบไหน ที่คุณชอบ
 

จำนวนผู้ชมที่ online ขณะนี้

We have 8 guests online

analogclock

search engine

Banner
Banner
Banner
Banner
Banner
Banner
Banner
Banner
Banner
Banner
Banner