-
-
-
-
tag:<table> ... </table>
position:<body> ... </body>
content:ใช้ในการสร้างตาราง
example:<table>
<tr>
<td> แถวที่ 1 หลักที่ 1 </td>
<td> แถวที่ 1 หลักที่ 2 </td>
</tr>
<tr>
<td> แถวที่ 2 หลักที่ 1 </td>
<td> แถวที่ 2 หลักที่ 2 </td>
</tr>
</table>
-
tag:<table border="value"> ... </table>
value:ตัวเลข
content:ใช้ในการกำหนดความหนาของเส้นขอบ
example:<table border="2"> ... </table>
-
tag:<table cellspacing="value"> ... </table>
value:ตัวเลข
content:ใช้ในการกำหนดระยะห่างระหว่าง cell ในตาราง
example:<table cellspacing="0"> ... </table>
-
tag:<table cellpadding="value"> ... </table>
value:ตัวเลข
content:ใช้ในการกำหนดระยะห่างระหว่างข้อมูลกับกรอบของ cell
example:<table cellpadding="0"> ... </table>
-
tag:<table width="value"> ... </table>
value:ตัวเลข, เปอร์เซ็นต์
content:ใช้ในการกำหนดความกว้างของตาราง
example:<table width="500px"> ... </table>
-
tag:<table height="value"> ... </table>
value:ตัวเลข, เปอร์เซ็นต์
content:ใช้ในการกำหนดความสูงของตาราง
example:<table height="800px"> ... </table>
-
tag:<table bordercolor="value"> ... </table>
value:ชื่อสี, #ค่าสี
content:ใช้ในการกำหนดสีให้กับเส้นขอบ
example:<table bordercolor="#ff00aa"> ... </table>
-
tag:<table background="value"> ... </table>
value:ชื่อไฟล์ภาพ
content:ใช้ในการกำหนดภาพพื้นหลังให้กับตาราง
example:<table background="panda.jpg"> ... </table>
-
tag:<table frame="value> ... </table>
value:above, below, border, box, hsides, vsides, void, lhs, rhs
content:ใช้ในการกำหนดลักษณะของการแสดงเส้นขอบ
example:<table frame="above"> ... </table>
-
tag:<table rules="value"> ... </table>
value:all, none, rows, cols, groups ( กรณีมีการใช้ thead, tbody, tfoot )
content:ใช้กำหนดลักษณะการแสดงเส้นแบ่งช่องเซลล์
example:<table rules="rows"> ... </table>
-
tag:<table bgcolor="value"> ... </table>
value:ชื่อสี, #ค่าสี
content:ใช้กำหนดสีพื้นหลังของตาราง
example:<table bgcolor="#aa0055"> ... </table>
-
tag:<caption> ... </caption>
position:<table> ... </table>
content:ใช้กำหนดหัวข้อให้กับตาราง
example:<caption> ตารางสอนปี 2552 </caption>
-
tag:<caption align="value"> ... </caption>
value:top, bottom, left, right
content:ใช้กำหนดตำแหน่งของหัวข้อในตาราง
example:<caption align="bottom"> สรุปยอดขาย </caption>
-
tag:<tr> ... </tr>
position:<table> ... </table>
content:ใช้กำหนดแถวให้กับตาราง
example:<table>
<tr> แถวที่ 1 </tr>
<tr> แถวที่ 2 </tr>
</table>
-
tag:<tr bgcolor="value"> ... </tr>
value:ชื่อสี, #ค่าสี
content:ใช้กำหนดสีพื้นหลังให้กับแถว
example:<table>
<tr bgcolor="blue"> แถวที่ 1 </tr>
<tr bgcolor="#ff00aa"> แถวที่ 2 </tr>
</table>
-
tag:<th> ... </th>
position:<tr> ... </tr>
content:ใช้กำหนดคอลัมน์ ในลักษณะที่เป็นหัวข้อ
example:<table>
<tr> <th> ยอดขาย </th> </tr>
<tr> <td> 200 บาท </td> </tr>
<tr> <td> 100 บาท </td> </tr>
</table>
-
tag:<th bgcolor="value"> ... </th>
value:ชื่อสี, #ค่าสี
content:ใช้กำหนดสีพื้นหลังให้กับคอลัมน์
example:<table>
<tr> <th bgcolor="green"> ยอดขาย </th> </tr>
<tr> <td> 200 บาท </td> </tr>
<tr> <td> 100 บาท </td> </tr>
</table>
-
tag:<td> ... </td>
position:<tr> ... </tr>
content:ใช้กำหนดคอลัมน์
example:<table>
<tr>
<td> แถวที่ 1 หลักที่ 1 </td>
<td> แถวที่ 1 หลักที่ 2 </td>
</tr>
<tr>
<td> แถวที่ 2 หลักที่ 1 </td>
<td> แถวที่ 2 หลักที่ 2 </td>
</tr>
</table>
-
tag:<td bgcolor="value"> ... </td>
value:ชื่อสี, #ค่าสี
content:ใช้กำหนดสีพื้นหลังให้กับคอลัมน์
example:<table>
<tr> <th> ยอดขาย </th> </tr>
<tr> <td bgcolor="#1122aa"> 200 บาท </td> </tr>
<tr> <td bgcolor="#bbaacc"> 100 บาท </td> </tr>
</table>
-
tag:<td align="value"> ... </td>
value:left, center, right, justify ( เต็มช่อง )
content:ใช้กำหนดตำแหน่งของข้อมูลใน cell ในแนวนอน
example:<table>
<tr> <th align="center"> ยอดขาย </th> </tr>
<tr> <td align="right"> 200 บาท </td> </tr>
<tr> <td align="right"> 100 บาท </td> </tr>
</table>
-
tag:<td valign="value"> ... </td>
value:baseline คือ ตามเส้นฐาน,
top คือ ชิดบน,
middle คือ กึ่งกลาง,
bottom คือ ชิดล่าง
content:ใช้กำหนดตำแหน่งของข้อมูลใน cell เมื่อดูจากแนวตั้ง
example:<table>
<tr> <th valign="middle"> ยอดขาย </th> </tr>
<tr> <td valign="top"> 200 บาท </td> </tr>
<tr> <td valign="top"> 100 บาท </td> </tr>
</table>
-
tag:<td colspan="value"> ... </td>
value:ตัวเลข, เปอร์เซ็นต์
content:ใช้กำหนดการรวมคอลัมน์ในแนวนอน ( merge cell )
example:<table>
<tr> <th colspan="2"> ยอดขาย </th> </tr>
<tr> <th> ผลรวม </th> <th> ค่าเฉลี่ย </th> </tr>
<tr> <td> 200 บาท </td> <td> 150 บาท </td> </tr>
<tr> <td> 100 บาท </td> <td> 150 บาท </td> </tr>
</table>
-
tag:<td rowspan="value"> ... </td>
value:ตัวเลข, เปอร์เซ็นต์
content:ใช้กำหนดการรวมคอลัมน์ในแนวตั้ง ( merge cell )
example:<table>
<tr> <th colspan="2"> </th> <th> ปี 2552 </th> </tr>
<tr> <th rowspan="2"> ยอดขาย </th> <th> ค่าเฉลี่ย </th> <td> 100 บาท </td> </tr>
<tr> <th> ผลรวม </th> <td> 100 บาท </td> </tr>
</table>
-
tag:<thead> ... </thead> <tbody> ... </tbody > <tfoot> ... </tfoot >
position:<table> ... </table>
content:ใช้กำหนดเพื่อแบ่งส่วนของตารางออกเป็น 3 ส่วนใหญ่ๆ
โดย thead จะอยู่บนสุดของตารางเสมอ และมีได้เีพียง 1 tag
และ tfoot จะอยู่ล่างสุดของตารางเสมอ และมีได้เพียง 1 tag
และ tbody จะอยู่ตรงกลางของตารางเสมอ และมีได้มากกว่า 1 tag
example:<table>
<thead>
<tr>
<td> หัวของตาราง 1 </td>
<td> หัวของตาราง 2 </td>
</tr>
</thead>
<tbody>
<tr>
<td> เนื้อหาของตาราง 1 </td>
<td> เนื้อหาของตาราง 2 </td>
</tr>
</tbody >
<tfoot>
<tr>
<td> ท้ายของตาราง 1 </td>
<td> ท้ายของตาราง 2 </td>
</tr>
</tfoot >
</table>
