صفحه شطرنج با HTML

صفحه شطرنج با HTML

در این آموزش قصد داریم طراحی صفحه شطرنج با HTML را آموزش بدهیم. راه‌های متفاوتی برای ترسیم طرح شطرنج وجود دارد. یکی از این راه‌ها استفاده از table است.

ساخت صفحه شطرنج با اچ‌تی‌ام‌ال

بدین صورت که 8 تا سطر و در هر سطر، 8 تا خانه ایجاد می‌کنیم و یکی در میان رنگ سفید و مشکی بهشون می‌دیم. ابتدا تگ table را باز و بسته می‌کنيم و در داخل آن از 8 تا تگ tr استفاده می‌کنيم. سپس در داخل هر تگ tr از تگ td استفاده می‌کنيم.

<table>
		<tr> 
			<td class="black"></td>
			<td class="white"></td>
			<td class="black"></td>
			<td class="white"></td>
			<td class="black"></td>
			<td class="white"></td>
			<td class="black"></td>
			<td class="white"></td>
		</tr>
		<tr>
			<td class="white"></td>
			<td class="black"></td>
			<td class="white"></td>
			<td class="black"></td>
			<td class="white"></td>
			<td class="black"></td>
			<td class="white"></td>
			<td class="black"></td>
		</tr>
		<tr> 
			<td class="black"></td>
			<td class="white"></td>
			<td class="black"></td>
			<td class="white"></td>
			<td class="black"></td>
			<td class="white"></td>
			<td class="black"></td>
			<td class="white"></td>
		</tr>
		<tr>
			<td class="white"></td>
			<td class="black"></td>
			<td class="white"></td>
			<td class="black"></td>
			<td class="white"></td>
			<td class="black"></td>
			<td class="white"></td>
			<td class="black"></td>
		</tr>
		<tr> 
			<td class="black"></td>
			<td class="white"></td>
			<td class="black"></td>
			<td class="white"></td>
			<td class="black"></td>
			<td class="white"></td>
			<td class="black"></td>
			<td class="white"></td>
		</tr>
		<tr>
			<td class="white"></td>
			<td class="black"></td>
			<td class="white"></td>
			<td class="black"></td>
			<td class="white"></td>
			<td class="black"></td>
			<td class="white"></td>
			<td class="black"></td>
		</tr>
		<tr> 
			<td class="black"></td>
			<td class="white"></td>
			<td class="black"></td>
			<td class="white"></td>
			<td class="black"></td>
			<td class="white"></td>
			<td class="black"></td>
			<td class="white"></td>
		</tr>
		<tr>
			<td class="white"></td>
			<td class="black"></td>
			<td class="white"></td>
			<td class="black"></td>
			<td class="white"></td>
			<td class="black"></td>
			<td class="white"></td>
			<td class="black"></td>
		</tr>
	</table>

همان‌طور که مشاهده می‌کنید به هر تگ td یک کلاس دادیم و یکی در میان کلاس black و white دارند. حال در داخل تگ head، استایل‌ها تگ table و td را می‌دهیم.

<html>
<head> 
<style>
body {
	background: khaki;
	padding:50px;
}
 
table {
	margin: 0 auto;
	border-collapse: collapse;
	background: black;
}
td {
    width: 40px; height: 40px;
}
 
.white{background:white}
.black{background:black}
</style>
</head>
 
<body>

هم‌چنین می‌توان پس از طراحی صفحه شطرنج با html، با javascript نیز بازی آن را ساخت. نتیجه را در عکس زیر می‌توانید مشاهده کنید:

صفحه شطرنج با html

برای امتیاز به این نوشته کلیک کنید!

[کل: 20 میانگین: 4.3]