ตาราง (Table)

wave
มานพ กองอุ่น 10 เม.ย. 2016 12:32:25 11,049

การใส่ตารางใน 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

เขียนบทเรียนรู้ของคุณ

รายละเอียด
  • ดู 11,049
  • รักเลย 0
  • หมวดหมู่ HTML
  • เขียนเมื่อ
  • แก้ไขเมื่อ
  • Tags html html5
ข้อมูลผู้เขียน
มานพ กองอุ่น

มานพ กองอุ่น

เป็นสมาชิกเมื่อ: 18 ธ.ค. 2009