Lv.29 CSS Tables

CSS Tables เอาไว้สำหรับปรับแต่ง HTML Tables

ชื่อ-นามสกุลที่อยู่เบอร์โทรศัพท์
นายสมชาย โชคดี77 หมู่. 7708-77777777
นางสาวสมใจ เอวดี55 หมู่.5508-55555555
CSS Tables

CSS Tables Border

การระบุเส้นขอบของตารางใน CSS ให้ใช้ Property border

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS Tables</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="UTF-8">
		<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
		<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
		<meta name="author" content="Theethawat Chetjeerasioon">
		
		<style>
			table, th, td {
				border: 2px solid red;
			}
		</style>
	</head>
	<body>
	
		<table>
			<tr>
				<th>ชื่อ</th>
				<th>นามสกุล</th>
			</tr>
			<tr>
				<td>นาย สมชาย</td>
				<td>โชคดี</td>
			</tr>
			<tr>
				<td>นางสาว สมใจ</td>
				<td>เอวดี</td>
			</tr>
		</table>
		
	</body>
</html>

ทำตารางให้กว้างเต็มจอ

ถ้าต้องการตารางกว้างเต็มจอให้เพิ่ม width: 100% ให้กับอิลิเมนต์ <table>

table {
	width: 100%;
}

จัดตำแหน่งข้อความในตาราง

สามารถใช้ Property text-align ค่าที่ใช้ได้ left center right

ตัวอย่าง

td {
	text-align: center;
}

Responsive ตาราง

ให้เพิ่มอิลิเมนต์ <div> ครอบตาราง และกำหนดสไตล์เป็น overflow-x:auto

ตัวอย่าง

<div style="overflow-x:auto;">
	<table>
		<!-- ข้อมูลตาราง -->
	</table>	
</div>
Top