ตาราง (Table)


	ตาราง (Table)

เว็บเพจสำรอง (Backup Webpages) : thaiall.com
ปรับปรุง : 2548-02-25 ()

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

[ ตาราง (Table) ]

ตารางธรรมดา
สีและขอบ ของตาราง
ความกว้าง ของตาราง
แบบฝึกหัด

ตารางธรรมดา
[ 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

wow

<table>
<td bgcolor=#0000ff>abc</td>
<td bgcolor=#00ff00>def</td>
</table>
(กำหนดตาราง 2 cell ให้แต่ละ cell มีสีต่างกัน)

abc

def

<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> (ปิดตาราง)

abc

def

abc	def
abc	def
abc	def

[ Editor on web for HTML ]

สี และขอบ ของตาราง
[ border ใช้กำหนดความกว้างของขอบ ] - [ cellspacing ใช้กำหนดความกว้างของขอบตาราง ]
[ cellpadding ใช้กำหนดความกว้างของขอบถึงตัวอักษร ]

ตัวอย่างคำสั่ง

ตัวอย่างผลลัพท์

abc

abc

abc

abc

abc

abc	abc	abc
abc	abc	abc

[ Editor on web for HTML ]

ความกว้าง ของตาราง
[ width ใช้กำหนดความกว้างตาราง ] - [ align ใช้กำหนดด้านที่จะให้ชิด ] - [ valign ใช้กำหนดด้านที่จะให้ชิดในแนวขวาง ]

ตัวอย่างคำสั่ง

ตัวอย่างผลลัพท์

abc

<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

[ 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 ]