คำสั่งหรือ Tag ที่ใช้ในการสร้างตารางคือ <table>...</table>
ในการสร้างตารางนั้น ในเบื้องต้นต้องใช้คำสั่งหรือแท็กดังต่อไปนี้
<table>...</table> เป็นการบอกจุดเิ่ริ่มต้นและจุดสิ้นสุดในการสร้างตาราง
<tr>....</tr> เป็นการบอกจำนวนแถว (row)
<td>...</td> เป็นการบอกจำนวนคอลัมน์ (colunm)
ตัวอย่างการสร้างตาราง
ผลลัพธ์
การปรับความกว้างและความสูงให้กับตาราง
การกำหนดความกว้างและความสูงให้กับตารางโดยใช้แอททริบิวต์ width และ height ในแท็ก <table> ซึ่งสามารถกำหนดได้ 2 รูปแบบดังนี้
1.กำหนดเป็นเปอร์เซ็น ซึ่งจะปรับขนาดตารางตามขนาดหน้าจอของเบราว์เซอร์ในขณะนั้น
<table width="50%" height="60%"> 2.กำหนดความกว้าง และความยาวเป็นจุด (pixel) ซึ่งขนาดตารางจะไม่ปรับตามขนาดหน้าจอของเบราว์เซอร์
ในขณะแสดงผล วิธีนี้จะไม่ทำให้ตารางและข้อมูลในตารางขยับเปลี่ยนตำแหน่ง
<table width="400" height="200">
1.กำหนดเป็นเปอร์เซ็น ซึ่งจะปรับขนาดตารางตามขนาดหน้าจอของเบราว์เซอร์ในขณะนั้น
<table width="50%" height="60%"> 2.กำหนดความกว้าง และความยาวเป็นจุด (pixel) ซึ่งขนาดตารางจะไม่ปรับตามขนาดหน้าจอของเบราว์เซอร์
ในขณะแสดงผล วิธีนี้จะไม่ทำให้ตารางและข้อมูลในตารางขยับเปลี่ยนตำแหน่ง
<table width="400" height="200">
ตัวอย่างการกำหนดความกว้างและความสูงของตาราง
<html>
<head>
<title>การสร้างตาราง</title>
</head>
<body>
การกำหนดความกว้างและความสูงของตาราง <br>
<hr>
<table border="1" cellspacing="5" width="500" height="400">
<caption align="bottom">ตารางที่ 1 การทดลองสร้างตาราง </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>
<head>
<title>การสร้างตาราง</title>
</head>
<body>
การกำหนดความกว้างและความสูงของตาราง <br>
<hr>
<table border="1" cellspacing="5" width="500" height="400">
<caption align="bottom">ตารางที่ 1 การทดลองสร้างตาราง </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>
ผลลัพธ์
การกำหนดความกว้างและความสูงของตาราง
| แถว 1 คอลัมน์ 1 | แถว 1 คอลัมน์ 2 |
| แถว 2 คอลัมน์ 1 | แถว 2 คอลัมน์ 2 |
| แถว 3 คอลัมน์ 1 | แถว 3 คอลัมน์ 2 |
การตีเส้น และสีเส้นตาราง การกำหนดระยะห่างระหว่างช่องเซลล์ และการเว้นระยะข้อมูลในเซลล์
หากต้องการให้มีเส้นตาราง ต้องมีการใช้คุณสมบัติหรือแอททริบิวต์ border ช่วย ซึ่งจะต้องเขียนไว้ในแท็ก <table> ดังนี้ <table border="1"> นอกจากความหนาของเส้นตารางแล้ว ยังมีแอททริบิวต์ที่กำหนดสีของเส้นตาราง bordercolorความห่างของช่องเซล์ cellspacing และการเว้นระยะ ระหว่างข้อมูลในเซลล์ กับกรอบเซลล์ cellpadding โดยใช้แอททริบิวต์ดังต่อไปนี้ bordercolor,cellspacing และ cellpadding เขียนต่อท้่ายในแท็ก <table> ดังนี้ <table border="1" bordercolor="blue" cellspacing="5" cellpadding="10">
border="1" หมายความว่าให้ตีเส้่นด้วยความหนาของเส้น 1 จุด (pixel) หากไม่ต้องการเส้นให้กำหนดค่า
เป็น "0" หรือไม่ต้องใช้แอททริบิวต์นี้
bordercolor="ค่าสี" หมายถึงกำหนดสีเ้ส้นตาราง สามารถระบุค่าสี เช่น "blue" คือสีน้ำเงิน หรือใส่เป็น
ค่าตัวเลขฐานสิบหกก็ได้
cellspacing="5" หมายถึงระยะห่างระหว่างช่องเซลล์มีค่าเป็น 5 จุด (pixel)
cellpadding="10" หมายถึงระยะห่างระหว่างข้อมูลในเซลล์กับกรอบเซลล์มีค่าเป็น 10 จุด (pixel)
border="1" หมายความว่าให้ตีเส้่นด้วยความหนาของเส้น 1 จุด (pixel) หากไม่ต้องการเส้นให้กำหนดค่า
เป็น "0" หรือไม่ต้องใช้แอททริบิวต์นี้
bordercolor="ค่าสี" หมายถึงกำหนดสีเ้ส้นตาราง สามารถระบุค่าสี เช่น "blue" คือสีน้ำเงิน หรือใส่เป็น
ค่าตัวเลขฐานสิบหกก็ได้
cellspacing="5" หมายถึงระยะห่างระหว่างช่องเซลล์มีค่าเป็น 5 จุด (pixel)
cellpadding="10" หมายถึงระยะห่างระหว่างข้อมูลในเซลล์กับกรอบเซลล์มีค่าเป็น 10 จุด (pixel)
สามารถใส่ข้อความกำกับตาราง เพื่อให้ทราบว่าตารางนั้นนำเสนอข้อมูลเกี่ยวกับเรื่องใด โดยมีรูปแบบดังนี้
<caption align="ตำแหน่ง">ข้อความกำกับตาราง</caption> โดยค่า "ตำแหน่ง" มีดังนี้
"top" หมายถึง อยู่กลางตารางด้านบน
"bottom" หมายถึง อยู่กลางตารางด้านล่าง
"left" หมายถึง อยู่ด้านบนซ้าย
"right" หมายถึง อยู่ด้านบนขวา
การจัดตำแหน่งข้อมูลในตาราง
ข้อมูลในตารางแต่ละช่องสามารถจัดตำแหน่งให้อยู่
ชิดซ้าย ชิดขวา หรือตรงการเซลล์ได้ โดยการใช้ แอททริบิวต์ align="ตำแหน่งของข้อมูล" ลงในแท็ก <tr> หรือ <td>
เช่น
<tr align="center"><td> แถว 1
คอลัมน์ 1 </td><td> แถว 1 คอลัมน์ 2
</td></tr>
หมายถึง จัดตำแหน่งข้อมูลแถวที่ 1
ทั้งแถวให้อยู่ตรงกลางเซลล์
<tr><td align="center"> แถว 1
คอลัมน์ 1 </td><td> แถว 1 คอลัมน์ 2
</td></tr>
หมายถึง จัดตำแหน่งข้อมูลในแถวที่ 1 คอลัมน์ที่ 1 ให้อยู่ตรงกลางเซลล์
เพียงเซลล์เดียว
"ตำแหน่งของข้อมูล" มีดังนี้
"center" หมายถึง อยู่ตรงกลางเซลล์
"justify" หมายถึง เต็มช่องเซลล์
"left" หมายถึง
อยู่ชิดด้านซ้ายเซลล์
"right" หมายถึง อยู่ชิดด้านขวาเซลล์
| เป็นการผสานเซลล์ตั้ง 2 เซลล์ขึ้นไป เหมือนตารางใน Microsoft Word หรือ Microsoft Excel การรวมเซลล์มี 2 ลักษณะ คือ การรวมคอลัมน์ และการรวมแถว | |
| 1) การรวมคอลัมน์ เป็นการรวมเซลล์ตามแนวนอนตั้งแต่ 2 เซลล์ขึ้นไป เป็นเซลล์เดียวกัน โดยใช้คำสั่ง COLSPAN กำหน ดไว้ในคำสั่ง <TD> รูปแบบ <TR> <TD COLSPAN = " จำนวนคอลัมน์ที่รวม " > ข้อความ </TD> </TR> เช่น <TD COLSPAN = "3">จำนวนนักเรียน</TD> เป็นคำสั่งรวมคอลัมน์จำนวน 3 คอลัมน์มาเป็น 1 เซลล์ และในเซลล์นั้นจะมีข้อความ จำนวนนักเรียน ตัวอย่าง 
ภาพแสดงการใช้คำสั่ง colspan ภาพแสดงผลการใช้คำสั่ง colspan
| |
| 2) การรวมแถว | |
| เป็นการรวมเซลล์ตามแนวตั้ง ตั้งแต่ 2 เซลล์ขึ้นไป เป็นเซลล์เดียวกัน โดยใช้คำสั่ง ROWSPAN กำหนดไว้ในคำสั่ง <TD> เหมือนการรวมคอลัมน์ รูปแบบ <TR> <TD ROWSPAN ="จำนวนแถวที่รวม"> ข้อความ </TD></TR> เช่น <TD ROWSPAN ="2">ลำดับที่</TD> เป็นคำสั่งรวมแถวจำนวน 2 แถวมาเป็น 1 เซลล์ และในเซลล์นั้นจะมีข้อความ ลำดับที่ ตัวอย่าง 
ภาพแสดงการใช้คำสั่ง rowspan และ colspan
จากตัวอย่างมีการใช้ำคสั่ง เป็นการกำหนดช่องว่างให้กับเซลล์ หากไม่กำหนดเซลล์ในตารางจะไม่เห็นเส้นขอบ ดังภาพ
 |
http://school.obec.go.th/pp_school/html/table.html
https://sites.google.com/site/cirayus/sux-kar-reiyn-ru/kar-srang-tarang
http://www.thainextstep.com/html/html_08.php
http://www.kty.ac.th/html/unit5/unit503.html'
