ตาราง (Table)

wave

ตาราง (Table)

มานพ กองอุ่น 10 เม.ย. 2016, 12:32:25 4,411

การใส่ตารางใน html นั้นสามารถที่จะแทรก Tag และกำหนด Attribute ต่างๆ ได้ดังนี้

<table border= “Border” bgcolor= “TableBg” cellspacing= “CS” cellpadding= “CP” width= “Width” height= “Height” background= “Background”>
	<tr bgcolor= “TrBg”>
		<th bgcolor= “ThBg”>Head Text</th>
		<th>Head Text</th>
	</tr>
	<tr>
		<td bgcolor= “TdBg” align= “Align” valign= “Valign” width= “Width” height= “Height”>Body Text</td>
		<td>Body Text</td>
	</tr>
</table>
 

 

Border คือ ความหนาของเส้นขอบตาราง
TableBg คือ สีพื้นหลังของตาราง
Background คือ รูปภาพพื้นหลังของตาราง
CS คือ ช่องว่างระหว่างเซลล์ของตาราง
CP คือ ระยะห่างจากเส้นขอบของตาราง
TrBg คือ สีพื้นหลังของแถว
ThBg คือ สีพื้นหลังของเซลล์ Header ของตาราง
TdBg คือ สีพื้นหลังของเซลล์ ของตาราง
Head Text คือ ข้อความหัวเรื่องของตาราง
Body Text คือ ข้อความในตาราง
Align คือ การจัดตำแหน่งแนวนอน left/center/right/char/justify
Valign คือ การจัดตำแหน่งแนวตั้ง baseline/bottom/middle/top
Width คือ ความกว้าง
Height คือ ความสูง
<tr> คือ แถวของตาราง 1 แถว
<th>และ<td> คือ คือข้อมูลในแนวคอลัมน์


ตัวอย่าง ex19.html
 

<html>
<head>
<title>Bulleted List</title>
</head>
<body>
		<table border= “1" bgcolor= “#666666" cellspacing= “1" cellpadding= “2">
			<tr bgcolor= “#666666">
				<th>Head Text1</th>
				<th>Head Text2</th>
			</tr>
			<tr bgcolor= “#F9F9F9">
				<td>Data1</td>
				<td>Data2</td>
			</tr>
	</table>
</body>
</html>


ผลลัพธ์



 

 

 

 

 

 


ความคิดเห็น

หากบทเรียนรู้มีความผิดพลาดประการใด หรือมีข้อเสนอแนะกรุณาแจ้ง contact@programmerthailand.com