صفحه شطرنج با 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

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

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