๑.ส่วนประกอบของตาราง

คำสั่งคือ <table> และปิดด้วยการ </table>
เราสามารถทำให้ตารางกว้างใหญ่ ตามต้องการ หรือ ไม่มี เส้นได้
ส่วนประกอบลึกลงไปของ table มีดังนี้
<tr> คือ table row
เป็นจุดเริ่มต้นของตาราง หรือ จน.ชั้น โดย ถ้ามี <table> ต้องมี <tr> ตาม ปิดโดย </tr>
<td> คือ table data cell
ตัวนี้คือตัวกำหนด ซึ่งมันสามารถ กำหนดได้ ทั้ง รูปภาพ ตัวหนังสือ แม้กระทั่ง ตารางอีกอันนึง ปิดโดย </td>
<th> คือ table header cell
ประมาณว่าเป็นหัวข้อ เพราะ ทุกครั้งที่ออกมา ตัวหนังสือจะเป็น ตัวหนาหมดเรยปิดได้โดย </th>

๒.ตารางพื้นฐาน แบบ ช่องเดี่ยว

<table> คือเปิดตาราง ต่อด้วย <tr> เปิด table row ที่มีตลอดต่อด้วย <td> โดย ใส่ ข้อมูลนั่นก้อคือ data นั่นเอง ไว้ด้านใน table data พอข้อมูลจบก้อทำหารปิด table data </td> ต่อจากนั้นก้อไล่ปิด table row </tr> และ สุดท้ายคือปิด table </table>
แต่ผลที่ออกมาจะไม่เหมือนตารางซะเท่าไหร่ เราควรกำหนด ของเส้นตารางโดย เติม boder เข้าไป เช่นเราจะทำให้ เส้นมีขนาด 1
คำสั่งคือ <table border="1"> แต่ถ้ายังคงไม่ต้องการให้มีเส้น ก้อเปลี่ยนเป็น 0 <table border="0">
คำสั่งรวมของหัวข้อนี้

<table border="1">
<tr>
<td>
ข้อมูล
</td>
</tr>
</table>

ผลที่ได้

ข้อมูล

รู้สึกว่าการทำตารางใหญ่สุดคือ 25 นั่นก้อคือ <table border="25"> ดูผล สิ หอหอหอ

ข้อมูล

๓.ตารางแบบแถวเดียว แต่หลายช่อง

ทำได้โดยแค่เพิ่ม <td> เข้าไป ได้ตามต้องการ แต่ต้องปิดก่อน และ ค่อยเพิ่มอันใหม่ เช่น
<table border="1">
<tr>
<td>im gus</td>
<td>เรา กัส</td>
<td>ข่อย กัด เด้อ</td>
</tr>
</table>
ผลที่ได้คือ

im gus

เรา กัส

ข่อย กัด เด้อ

*สังเกตว่า ตอนนี้ขนาดของตารางจะเท่ากับ ความยาวของตัวหนังสือ ที่พิมอยู่ด้านใน เดี๋ยวจะอธิบายวิธีทำตารางให้เท่ากันอีกทีฮับ

๔.การทำตารางมากกว่า ๑ ชั้น

อันนี้เราจะมาดูที่คำสั่ง <tr> เพราะมันคือตัวกำหนด row ชั้นใหญ่ทั้งหมดลองมาดูกัน
เช่นจะทำให้เป็น ๒ ชั้น ก้อเหมือนการเอา ก้อน 2 ก้อนมารวมกันโดยใช้ <tr> เป็นตัวแบ่ง
เช่น
<table border="1">
<tr>
<td>im gus</td>
<td>เรา กัส</td>
<td>ข่อย กัด เด้อ</td>
</tr>
<tr>
<td>ผัก</td>
<td>ผลไม้</td>
<td>อร่อย</td>
</tr>
</table>

ผลที่ได้คือ

im gus	เรา กัส	ข่อย กัด เด้อ
ผัก	ผลไม้	อร่อย

๕.การทำหัวข้อในตาราง

ก้อคือการใช้ <th> นั่นเองอย่างที่อธิบายไปในตอนต้นแล้วโดยนำ <th> ไปใส่แทน <td> ในช่องที่เราต้องการทำให้เป็นหัวข้อ หรือ ตัวหนานั่นเอง
เช่น
<table border="1">
<tr>
<th>hardcore band</th>
<th>rock band</th>
<th>japan singer</th>
</tr>
<td>limpbizkit</td>
<td>x-japan</td>
<td>ami</td>
</tr>
<td>rage against</td>
<td>hide</td>
<td>namie</td>
</tr>
</table>

ผลที่ได้คือ

hardcore band	rock band	japan singer
limpbizkit	x-japan	ami
rage against	hide	namie

๖.การกำหนดความกว้างของตาราง

ทำได้โดยการเติม width ไว้หลัง <table border> โดยใช้เป็น %
เช่น <table border="6"width="60%">

ผลที่ได้คือ

im gus	เรา กัส	ข่อย กัด เด้อ
ผัก	ผลไม้	อร่อย

ดูความแตกต่าง ระหว่าง 60% กับ 100%
<table border="6"width="100%">

ผลที่ได้คือ

im gus	เรา กัส	ข่อย กัด เด้อ
ผัก	ผลไม้	อร่อย

๗.การกำหนด ขนาดภายในตาราง

คือการกำหนดตัว <th> นั่นเองหรือถ้า ตารางนั้นไม่มีหัวข้อ ก้อกำหนดกับ <td> ได้เรย โดยใช้ width และ เป็น % เหมือนกัน เช่น
<table border="3" width="50%">
<tr>
<th width="44%">หัวข้อ</th>
<th width="90%">หัวข้อ</th>
<th width="15%">หัวข้อ</th>
</tr>
<tr>
<td>im gus</td>
<td>im gus</td>
<td>im gus</td>
</tr>
</table>

ผลที่ได้คือ

หัวข้อ	หัวข้อ	หัวข้อ
im gus	im gus	im gus

๘.ช่องว่างระหว่างตาราง

หรือ ที่เรียกๆกันว่า cellpadding นั่นเอง โดยใส่ไว้หลัง <table border="size">

เช่น <table border="3"cellpadding="20">
ผลที่ได้คือ

หัวข้อ	หัวข้อ	หัวข้อ
im gus	im gus	im gus

เห็นไม๊ว่า พอใส่ cell padding ลงไป ทำให้ตารางดูดีขึ้น

๙.ความหนาของ เส้นตาราง

หรือ cellspacing โดยใส่ไว้ตำแหน่งเดียวกับ cellpadding ถ้ามีทั้ง ๒ อย่างก้อให้ใส่ต่อกันได้เรย
เช่น <table border="20"cellpadding="15"cellspacing="20">
ผลที่ได้คือ

หัวข้อ	หัวข้อ	หัวข้อ
im gus	im gus	im gus

๑o.การแทรกรูปภาพ และ สี ลงในตาราง

การใส่รูปภาพไปแทนข้อมูล วิธีเหมือนข้างต้นโดยใช้คำสั่งเรียกรูป <img src>
เช่น รูปชื่อ gus.jpg และต้องการใสสี แดงลงไป ในฝั่งตัวหนังสือโดยใช้ bgcolor คำสั่งคือ
<table>
<tr>
<td><img src="gus.jpg"></td>
<td bgcolor="F0000F">เราสามารถเขียนเป็นตัวหนังสือได้ตรงนี้</td>
</tr>
</table>

ผลที่ได้คือ

เราสามารถเขียนเป็นตัวหนังสือ ได้ตรงนี้