Lv.14 HTML ตาราง

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> ด้วย ส่วนมากๆแล้วการใช้งานทั่วๆ จะเป็นการดึงข้อมูลต่างๆ มาจากฐานข้อมูลเพราะถ้าให้เขียนเองทุกช่องก็ไม่ไหวครับ

Top