webdevlinux - logo Web Dev Linux

වගු (Tables)

මෙම කොටසේදී HTML සමග වගු සාදන ආකාරය පිළිබඳ අධ්‍යයනය කරමු.

HTML Tables HTML table elements

පහත උදාහරණයෙන් ඔබට වගු පිළිබඳව දළ අවබෝධයක් ලබාගැනීමට හැකිවනු ඇත.

FILE : tables.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML Tables</title>
</head>
<body>
 <table border="1">
	<caption>Table Caption</caption>
	<tr>
		<td>row1 column1</td>	
		<td>row1 column2</td>	
		<td>row1 column3</td>	
	</tr>
	<tr>
		<td>row2 column1</td>	
		<td>row2 column2</td>	
		<td>row2 column3</td>	
	</tr>
 </table>
</body>
</html>

පැහැදිලිකිරීම

ඉහත උදාහරණයේ ඇති elements සහ attributes පිළිබදව පැහැදිලිකිරීම පහලින් දක්වා ඇත.

<table></table>
වගුවක් නිරූපණය කිරීමට යොදාගනී.
<tr></tr>
වගුවක් තුල තිරස් තීරුවක් (row) නිරූපණය කිරීමට යොදාගනී.
<td></td>
වගුවක් තුල දත්ත ඇතුලත් කල හැකි කොටසක් (table cell) නිරූපණය කිරීමට යොදාගනී.
<caption></caption>
වගුවක මාතෘකාවක් ඇත්නම් එය නිරූපණය කිරීමට යොදාගනී.
border="1"
වගුවක දාර නිරූපණය කිරීමට මෙම attribute එක යොදාගනී. මෙය නොමැති වගුවේ පේලි හා තීරු වෙන වෙනම නොපෙනේ.

CSS භාවිතයෙන් අපට අවශ්‍ය පරිදි වගුවේ දාර සකස් කරගත හැකිය. ඒ පිළිබඳව පසුව වෙනත් පාඩමකින් අධ්‍යයනය කරමු.