ওয়েব ডিজাইন Part-16(Nested Table দিয়ে Project) - প্রিয়লেখা

ওয়েব ডিজাইন Part-16(Nested Table দিয়ে Project)

Md. Sajal
Published: September 8, 2016

Nested Table দিয়ে Project:

Nested Table হল টেবিল এর ভেতর টেবিল নিয়ে কাজ করা। আমরা এখন দেকব কিভাবে   Nested Table দিয়ে ডিজাইন করা যাই-

table

এই ডিজাইন টার কোড দেউয়া হল-এইটা   কপি করে নোটপ্যাড paste করে index.html  সেভে করে যেকোনো ব্রাউজার এ ওপেন করলেই দেখা যাবে। কোড-

<!DOCTYPE  html>

<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>html table</title>
</head>
<body>
<table border=”0″ cellpadding=”0″ cellspacing=”0″ align=”center” width=”800″>
<tr>
<td>
<table width=”100%” border=”0″ cellpadding=”0″ cellspacing=”0″>
<tr>
<td width=”50%” bgcolor=”#f98132″ height=”150″>head 1</td>
<td width=”50%” bgcolor=”#d60106″ height=”150″>head 2</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width=”100%” height=”100″ bgcolor=”#f6bcbe”>banner</td>
</tr>
<tr>
<td width=”100%” height=”50″>
<table width=”100%” height=”100%” border=”0″ cellpadding=”0″ cellspacing=”0″>
<tr>
<td width=”20%” bgcolor=”#3816e8″>one</td>
<td width=”20%” bgcolor=”#b6a9f9″>two</td>
<td width=”20%” bgcolor=”#dd3103″>three</td>
<td width=”20%” bgcolor=”#4e4b4b”>four</td>
<td width=”20%” bgcolor=”#fb5c31″>five</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width=”100%” height=”400″>
<table width=”100%” height=”100%” border=”0″ cellpadding=”0″ cellspacing=”0″>
<tr>
<td width=”40%” height=”100%” bgcolor=”#314d06″>left part</td>
<td width=”60%” height=”100%”>
<table width=”100%” height=”100%” border=”0″ cellpadding=”0″ cellspacing=”0″>
<tr>
<td width=”100%” height=”40%” bgcolor=”#858683″>Right top part</td>
</tr>
<tr>
<td width=”100%” height=”60%”>
<table width=”100%” height=”100%” border=”0″ cellpadding=”0″ cellspacing=”0″>
<tr>
<td width=”50%” bgcolor=”#f85aeb”>right one</td>
<td width=”50%”>
<table width=”100%” height=”100%” border=”0″ cellpadding=”0″ cellspacing=”0″>
<tr>
<td width=”100%” height=”50%” bgcolor=”#7777f6″>right two </td>
</tr>
<tr>
<td width=”100%” height=”50%”>
<table width=”100%” height=”100%” border=”0″ cellpadding=”0″ cellspacing=”0″>
<tr>
<td width=”50%” height=”100%” bgcolor=”0707ea”>11</td>
<td width=”50%” height=”100%”>
<table width=”100%” height=”100%” border=”0″ cellpadding=”0″ cellspacing=”0″>
<tr>
<td width=”100%” height=”50%” bgcolor=”#605e07″>
12
</td>
</tr>
<tr>
<td width=”100%” height=”50%” bgcolor=”#074160″>
13
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width=”100%” height=”100″ bgcolor=”#7b0205″></td>
</tr>
</table>
</body>
</html>