HTML ตาราง ช่วยให้เราสามารถจัดเรียงข้อมูลเป็นแถวและคอลัมน์ได้
ตัวอย่าง
<!DOCTYPE html>
<html lang="th-TH">
<head>
<title>nkaub | HTML ตาราง</title>
</head>
<body>
<table>
<tr>
<th>ชื่อ-นามสกุล</th>
<th>ที่อยู่</th>
<th>เบอร์โทรศัพท์</th>
</tr>
<tr>
<td>นาย สมชาย ใจดี</td>
<td>จ.น่าน</td>
<td>0812345678</td>
</tr>
<tr>
<td>นางสาว สมใจ เอาเก่ง</td>
<td>จ.ระยอง</td>
<td>0855555555</td>
</tr>
<tr>
<td>นาง แก้ว นมดี</td>
<td>จ.แพร่</td>
<td>0975623145</td>
</tr>
</table>
</body>
</html>
HTML ตาราง เพิ่ม Cells
ในแต่ละเซลล์ของตารางสามารถกำหนดได้โดยเพิ่มแท็ก <td> ลงไปในตาราง ข้อมูลที่สามารถใส่ลงไปในแท็ก <td> ได้นั้น มีทั้งข้อความ, รูปภาพ, Lists, ตารางและอื่นๆ
ตัวอย่าง
<table>
<tr>
<td>ชื่อ</td>
<td>ที่อยู่</td>
<td>เบอร์โทรศศัพท์</td>
</tr>
</table>
HTML ตาราง เพิ่ม Rows
เพิ่มแถวได้โดยใช้แท็ก <tr>
ตัวอย่าง
<table>
<tr>
<th>ชื่อ-นามสกุล</th>
<th>ที่อยู่</th>
<th>เบอร์โทรศัพท์</th>
</tr>
<tr>
<td>นาย สมชาย ใจดี</td>
<td>จ.น่าน</td>
<td>0812345678</td>
</tr>
</table>
HTML ตาราง เพิ่มส่วนหัวของตาราง
เพิ่มแท็ก <th> ไว้บนสุดของตาราง
ตัวอย่าง
<table>
<tr>
<th>ชื่อ-นามสกุล</th>
<th>ที่อยู่</th>
<th>เบอร์โทรศัพท์</th>
</tr>
</table>
เพิ่มเส้นขอบให้ตาราง
ตัวอย่าง
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
สีเส้นขอบ
th, td {
border-color: blue;
}
การใช้งานต้องดูลำดับความสัมพันธ์ของ <tr> และ <td> ด้วย ส่วนมากๆแล้วการใช้งานทั่วๆ จะเป็นการดึงข้อมูลต่างๆ มาจากฐานข้อมูลเพราะถ้าให้เขียนเองทุกช่องก็ไม่ไหวครับ