ตาราง (Table)
เว็บเพจสำรอง (Backup Webpages) : thaiall.com
ปรับปรุง : 2548-02-25 ()
ผู้สนับสนุน ยินดีรับ ผู้สนับสนุน เว็บไซต์ด้านการศึกษา
กลุ่มเว็บไซต์นี้ เริ่มพัฒนา พ.ศ.2542
โดยบุคลากรทางการศึกษาด้านคอมพิวเตอร์
โทร. 081-9927223 (ผมเป็นคนลำปางหนา)
ปล. ขอไม่รับ work at home / อาหารเสริม
[ ตาราง (Table) ]

  1. ตารางธรรมดา
  2. สีและขอบ ของตาราง
  3. ความกว้าง ของตาราง
  4. แบบฝึกหัด
ตารางธรรมดา
[ tr ใช้สำหรับคุมบรรทัด ] - [ td ใช้สำหรับคุม cell ] - [ bgcolor ใช้กำหนดสีพื้น ]
Tables
The HTML table model has been chosen for its simplicity and flexibility. By default the table is automatically sized according to the cell contents and the current window size. The COLSPEC attribute can be used when needed to exert control over column widths, either by setting explicit widths or by specifying relative widths. You can also specify the table width explicitly or as a fraction of the current margins (see WIDTH attribute).
Table start with an optional caption followed one or more rows. Each row is formed by one or more cells, which are differentiated into header and data cells. Cells can be merged across rows and columns, and include attributes assisting rendering to speech and braille, or for exporting table data into databases. The model provides little direct support for control over appearence, for example border styles and margins, as these can be handled via subclassing and associated style sheets.
Tables can contain a wide range of content, such as headers, lists, paragraphs, forms, figures, preformatted text and even nested tables. When the table is flush left or right, subsequent elements will be flowed around the table if there is sufficient room. This behaviour is disabled when the --noflow-- attribute is given or the table align attribute is --center-- (the default), or --justify--.
By Dave Raggett, the HTML working group : Internet Engineering Task Force (IETF) - html3.0
ตัวอย่างคำสั่ง ตัวอย่างผลลัพท์
<table>
<td bgcolor=#ff0000>abc</td>
</table>
(กำหนดตาราง 1 cell ให้มีพื้นสีแดง)
abc
<table>
<td bgcolor=#ff0000>wow <img src=/pic/logota.gif> wow</td>
</table>
wowwow
<table>
<td bgcolor=#0000ff>abc</td>
<td bgcolor=#00ff00>def</td>
</table>
(กำหนดตาราง 2 cell ให้แต่ละ cell มีสีต่างกัน)
abcdef
<table> (เริ่มกำหนดตาราง)
<tr bgcolor=#ff0000> (เริ่มต้นบรรทัดที่ 1 และให้สีบรรทัดนี้เป็นสีแดง)
<td> (เริ่ม cell ที่ 1 ในบรรทัดที่ 1)
abc (เริ่ม cell ที่ 1 ในบรรทัดที่ 1)
</td> (ปิด cell ที่ 1 ในบรรทัดที่ 1)
<td> (เริ่ม cell ที่ 2 ในบรรทัดที่ 1)
def (เริ่ม cell ที่ 2 ในบรรทัดที่ 1)
</td> (ปิด cell ที่ 2 ในบรรทัดที่ 1)
</tr> (ปิดบรรทัดที่ 1)
</table> (ปิดตาราง)
abcdef
<table>
<tr bgcolor=#ff0000><td>abc</td><td>def</td></tr>
<tr bgcolor=#ffff00><td>abc</td><td>def</td></tr>
<tr bgcolor=#ff00ff><td>abc</td><td>def</td></tr>
</table>
abcdef
abcdef
abcdef
[ Editor on web for HTML ]
สี และขอบ ของตาราง
[ border ใช้กำหนดความกว้างของขอบ ] - [ cellspacing ใช้กำหนดความกว้างของขอบตาราง ]
[ cellpadding ใช้กำหนดความกว้างของขอบถึงตัวอักษร ]
ตัวอย่างคำสั่ง ตัวอย่างผลลัพท์
<table bgcolor=#0000ff border=1><td>abc</td></table>
abc
<center>
<table bgcolor=#ff00ff border=5>
<td>abc<br><img src=/pic/logota.gif></td>
</table>
</center>
abc
<center>
<table bgcolor=#ff00ff border=1>
<td>abc</td>
<td bgcolor=#ff0000>abc</td>
<td>abc</td>
</table>
</center>
abcabcabc
<center>
<table cellspacing=5 border=1>
<td>abc</td>
<td bgcolor=#ff0000>abc</td>
<td>abc</td>
</table>
</center>
abcabcabc
<center>
<table cellpadding=5 border=1>
<td>abc</td>
<td bgcolor=#ff0000>abc</td>
<td>abc</td>
</table>
</center>
abcabcabc
<center>
<table>
<tr bgcolor=#ffff00>
<td>abc</td>
<td bgcolor=#0000ff>abc</td>
<td>abc</td></tr>
<tr>
<td>abc</td>
<td bgcolor=#ff0000>abc</td>
<td>abc</td></tr>
</table>
</center>
abcabcabc
abcabcabc
[ Editor on web for HTML ]
ความกว้าง ของตาราง
[ width ใช้กำหนดความกว้างตาราง ] - [ align ใช้กำหนดด้านที่จะให้ชิด ] - [ valign ใช้กำหนดด้านที่จะให้ชิดในแนวขวาง ]
ตัวอย่างคำสั่ง ตัวอย่างผลลัพท์
<table bgcolor=#0000ff border=1 width=100%>
<td>abc</td>
</table>
abc
<table bgcolor=#00ffff border=1 width=100%>
<td align=left width=20%>a</td>
<td align=center width=30%>b</td>
<td align=right width=50%>c</td>
</table>
a b c
<table bgcolor=#00ffff border=1 width=90%>
<td width=10%>a<br>b<br>c</td>
<td valign=top width=10%>a</td>
<td valign=middle align=center width=30%>b</td>
<td valign=bottom width=50%>c</td>
<td>d</td>
</table>
ถ้าไม่ผิดร้ายแรง ก็จะปล่อยให้ผ่านไปได้เช่น การกำหนด % ในตัวอย่างนี้
a
b
c
a b c d
[ Editor on web for HTML ]
แบบฝึกหัด
ให้เขียน homepage โดยทำตามคำสั่งแต่ละข้อต่อไปนี้
ข้อ 1 : ทำตารางบรรทัดเดียว มี cell เดียว และให้มีคำว่า test ใน cell นั้น
ข้อ 2 : ทำตารางแบบใดก็ได้ ให้มีสีอย่างน้อย 4 สี ในตาราง
ข้อ 3 : ทำตาราง 3 บรรทัด บรรทัดละ 4 cell และในทุก cell ให้มีทั้งภาพ และตัวอักษร
ข้อ 4 : ทำตารางที่กำหนดความกว้างของทุก cell ให้คงที่ แต่ตัวตารางให้กว้าง 80%
ข้อ 5 : ทำตารางที่ใช้ทุกคำสั่ง ทั้งหมดในแต่ละตาราง และให้มีทั้งหมด 3 ตาราง ซึ่งเขียนแตกต่างกัน
[ Editor on web for HTML ]

แนะนำเว็บใหม่ : ผลการจัดอันดับ
รักลำปาง : thcity.com : korattown.com : topsiam.com : มหาวิทยาลัยเนชั่น
ศูนย์สอบ : รวมบทความ : ไอทีในชีวิตประจำวัน : ดาวน์โหลด : facebook.com
ติดต่อ ทีมงาน ชาวลำปาง มีฝันเพื่อการศึกษา Tel.08-1992-7223