Membuat layout website dengan table

Sebenarnya layout website menggunakan table sudah sangat jarang di gunakan oleh sebagaian webmaster.

Saat ini web design atau para pendesain website banyak beralih ke bootstrap. Namun tidak ada salahnya kita mencoba mempelajari html seperti penggunaan table.


Sekilas tentang bootstrap

Wikipedia , Bootstrap adalah open-source framework front-end yang bebas untuk merancang situs web dan aplikasi web. Framework ini berisi template desain berbasis HTML dan CSS untuk tipografi, formulir, tombol, navigasi dan komponen antarmuka lainnya, serta juga ekstensi opsional JavaScript.

Langsung saja kita lihat script Membuat layout website dengan table di bawah ini, agar lebih mudah di pahami sebagai bahan latihan html.

Script css layout website dengan table

body {
	font-family: verdana;
	margin: 5px;
}
table {
	border: none;
}
.bingkai {
	background-image: url(https://my-id.site/images/bg2.png);
	vertical-align: top;
	width: 140px;
}
caption {
	background-color: blue;
	border: solid 1px blue;
	padding: 10px;
	color: white;    
}
td { 
	border: solid 1px gray;
	padding: 10px;
	vertical-align: top;
}
.gallery {
	background-color: whitesmoke;
	border: solid 1px blue;
	width: 100%; 
	text-align: center;
}
.pic {
	width: 100%;
	max-width: 260px;
	border: solid 1px transparent;
	opacity: 0.8;
}
.pic:hover {
	border: solid 1px red;
	opacity: 1;
}
ul li {
	color: blue;
	list-style: none;
}
ul li:hover {
	color: red;
	cursor: pointer;
}
.bottom {
	background: whitesmoke;
	vertical-align: middle; 
	text-align: center;
}

Script html layout website dengan table

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta content="width=device-width, initial-scale=1.0" name="viewport">
	<title>Membuat layout website dengan table</title>

</head>
<body>

	<table>
		<tbody>
            <tr>
				<td rowspan="2" class="bingkai">
					<p><strong>Left side menu</strong></p>
					<ul>
						<li>Menu 1</li>
						<li>Menu 2</li>
						<li>Menu 3</li>
						<li>Menu 4</li>
						<li>Menu 5</li>
						<li>Menu 6</li>
					</ul>
				</td>
				<td>
					<div>
						<strong>Top description here</strong>
					</div>
				</td>
            </tr>
            <tr>
				<td>
					<table class="gallery">
						<caption>Photo galerry</caption>
						<tbody>
							<tr>
								<td>
									<img src="https://my-id.site/images/bg/aa.jpg" class="pic"/>
								</td>
								<td>
									<img src="https://my-id.site/images/bg/bb.jpg" class="pic" />
								</td>
								<td>
									<img src="https://my-id.site/images/bg/cc.jpg" class="pic" />
								</td>
								<td>
									<img src="https://my-id.site/images/bg/dd.jpg" class="pic" />
								</td>                                                      
							</tr>
							<tr>
								<td>Pic 1</td>
								<td>Pic 2</td>
								<td>Pic 3</td>
								<td>Pic 4</td>
							</tr>
						</tbody>
					</table>
				</td>         
            </tr>
            <tr>
				<td colspan="2">
					<table style="background: #CCFF99;">
						<tbody>
							<tr>
								<td colspan="2">
									Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu sem ac est facilisis efficitur. Fusce sed fermentum elit. Integer placerat convallis porttitor. Quisque luctus porttitor mi. Nam pulvinar rhoncus ligula. Suspendisse vel neque varius, dapibus erat quis, pellentesque eros. Vivamus eu blandit erat, vel fringilla enim. Suspendisse non tellus placerat, commodo est eget, volutpat massa. Quisque interdum id ante ac tristique. Aenean fermentum libero sit amet magna mollis, nec iaculis odio ultrices.        
								</td>
								<td style="width: 120px; vertical-align: middle; text-align: center;">
									<strong>Right side</strong>
								</td>    
							</tr>
						</tbody>
					</table>
					<br>
					<table style="width: 100%;">
                        <tr>
							<td class="bottom">
								<strong>Bottom</strong>
							</td>    
                        </tr>
					</table>
				</td>
            </tr>
		</tbody>
	</table> 
	
</body>
</html>

Anda bisa mengedit dan melihat hasil script diatas dengan menggunakan Realtime html editor ↗ yang telah kami sediakan.

Demikianlah sedikit pembahasan Free script tentang Membuat layout website dengan table, semoga bermanfaat. Dan salam sukses untuk Anda semuanya.

Mungkin Anda Menyukai