ตารางใน html5


ใน html5 ได้ปรับปรุงโครงสร้างตารางให้สามารถอธิบายข้อมูลภายในได้มากขึ้น โดยมีโครงสร้าง

<table border="1">
	<caption>
	ตารางเงินเดือน
	</caption>
	<thead>
		<tr>
			<th scope="cal">เดือนที่</th>
			<th scope="cal">เดือน</th>
			<th scope="cal">รายได้</th>
			<th scope="cal">รวม</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th scope="row">1</th>
			<td>ม.ค.</td>
			<td>10,000</td>
			<td>10,000</td>
		</tr>
		<tr>
			<th scope="row">2</th>
			<td>ก.พ.</td>
			<td>1,000</td>
			<td>11,000</td>
		</tr>
		<tr>
			<th scope="row">3</th>
			<td>มิ.ค.</td>
			<td>1,040</td>
			<td>12,040</td>
		</tr>
	...........
		</tbody>
	<tfoot>
		<tr>
			<td colspan="3">รวม</td>
			<td scope="cal">100,000</td>
		</tr>
	</tfoot>
</table>

จะเห็นส่วนที่เพิ่มมาคือ

  1. caption อธิบายรายละเอียดตาราง
  2. th จะใช้แทน td ในกรณีที่เป็นหัวตารางทั้งคอลัมน์และแถว (ทำไมไม่ใช้สดมและแถว ?) จะมี scope Attribute โดยมีค่า
    • col = คอลัมน์
    • colgroup = กลุ่มคอลัมน์
    • row = แถว
    • rowgroup = กลุ่มของแถว

    ถ้าเป็นคอลัมน์ที่เป็นผลรวมของทั้งตารางละ ?

  3. thead table tfoot คือ หัวตาราง เนื้อหา และท้ายตารางตามลำดับ

จะเห็นได้ว่าเป็นโครงสร้างที่สามารถอธิบายข้อมูลภายในได้มากกว่าเดิม น่าเสียดายที่ Adobe Dreamweaver ไม่ช่วยปรับพวก scope เวลารวมตารางต้องมาปรับเอง

About plusmagic

PHP lover in thailand

Posted on 2010/07/16, in HTML, programming and tagged , , , , , , , . Bookmark the permalink. ใส่ความเห็น.

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s

%d bloggers like this: