The words you are searching are inside this book. To get more targeted content, please make full-text search by clicking here.
Home Explore 5การสร้างตาราง
View in Fullscreen

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

Like this book? You can publish your book online for free in a few minutes!
Download PDF
Share

Related Publications

Discover the best professional documents and content resources in AnyFlip Document Base.
Search
Published by sjnoi777, 2019-10-09 02:44:12

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

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

HTML

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

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

Table หรือ ตาราง เป็นอีกวธิ ีหน่ึงในการนาเสนอขอ้ มลู บน
Web ที่เหมาะกบั ขอ้ มูลที่เป็นรายงานสถิติ หรือขอ้ มลู ที่เป็นตวั เลขจานวน
มาก ๆ รวมท้งั เป็นการจดั หมวดหมขู่ องขอ้ มลู ใหเ้ ป็นระเบียบ ง่ายต่อการ
เขา้ ใจ จะสงั เกตเห็นวา่ Home Page ส่วนใหญ่จะมีการนาตารางมา
ช่วยในการจดั เมนูหรือหวั ขอ้ ที่เป็น ไปยงั Web Page หรือ Web
Site อ่ืน ตวั อยา่ ง เช่น เวบ็ ไซตข์ อง Sanook.com ที่มีการจดั หนา้
เวบ็ เพจดว้ ยการนาเอาตารางมาประยกุ ตใ์ ช้

คาสงั่ ที่นามาใชใ้ นการสร้างตาราง การสร้างตาราง

<Table>…… </Table>

- เป็น Tag สาหรับกาหนดจุดเร่ิมตน้ และสิ้นสุดการสร้างตาราง

<caption>…..</caption>
- กาหนดชื่อใหก้ บั ตาราง

<TR>……….</TR>
- เป็น Tag สาหรับสร้างแถว (row) ใหก้ บั ตาราง

<TD>………</TD>
- เป็น Tag สาหรับสร้างคอลมั น์ (column) ใหก้ บั ตารางHTML

รูปแบบ การสร้างตาราง

<table width = ความกวา้ งของตาราง border = ความหนา้ ของเส้นตาราง
bordercolor = สีของเสน้ ตาราง bgcolor = สีพ้ืนตาราง
height = ความสูงตาราง>
<caption>ชื่อตาราง</caption>
<tr> เป็นคาสัง่ เริ่มแถวที่ 1
<td>คาสัง่ หรือขอ้ ความสดมภท์ ี่ 1 แถวที่ 1</td>
<td>คาสง่ั หรือขอ้ ความสดมภท์ ี่ 2 แถวที่ 1</td>

</tr>

<tr>เป็นคาสัง่ เร่ิมแถวที่ 2
<td>คาส่งั หรือขอ้ ความสดมภท์ ่ี 1 แถวที่ 2</td>
<td>คาส่งั หรือขอ้ ความสดมภท์ ี่ 2 แถวที่ 2</td>

</tr>

</table>

การตกแต่งตาราง
การสร้างกรอบตาราง
รูปแบบคาสงั่ HTML ท่ีใชใ้ นการสร้างกรอบตาราง

<TABLE BORDER = "ขนาดของกรอบ”>...</TABLE>

การกาหนดสีเสน้ ของตาราง

<TABLE BORDER = "ขนาดของกรอบตาราง”
BORDERCOLOR="ชอ่ื สหี รือรหสั ส"ี >... </TABLE>

<HTML> การสร้างตาราง

<HEAD> ตวั อยา่ งการสร้างตาราง
<TITLE>การสร้างตารางดว้ ยภาษา HTML</TITLE>

</HEAD>
<BODY>

<TABLE BORDER = 2>
<CAPTION>การสรา้ งตารางอยา่ งงา่ ย</CAPTION>

<TR>
<TD>แถว 1 คอลมั น์ 1</TD>
<TD>แถว 1 คอลมั น์ 2</TD>

</TR>
<TR>

<TD>แถว 2 คอลมั น์ 1</TD>
<TD>แถว 2 คอลมั น์ 2</TD>

</TR>
<TR>

<TD>แถว 3 คอลมั น์ 1</TD>
<TD>แถว 3 คอลมั น์ 2</TD>

</TR>
</TABLE>
</BODY>
</HTML>

ตวั อยา่ งการสร้างตาราง การสร้างตาราง

<HTML>

<HEAD>
<TITLE>ตารางข้อมลู ลกู ค้า</TITLE>

</HEAD>

<BODY>
<table width = 500 border = 2 bordercolor = red>
<caption>ขอ้ มูลลูกคา้ </caption>
<tr>
<td>ช่ือ</td>
<td>ท่ีอย<ู่ /td>
</tr>

<tr>
<td>ปฏิพล คนหล่อ</td>
<td>อ.ปากพนงั จ.นครศรีธรรมราช</td>
</tr>
</table>

</BODY>
</HTML>


Click to View FlipBook Version