طراحی جدول در وبسایت، گاهی ساعت ها زمان می برد تا بتوانیم به اندازه، رنگ و سبک دلخواهمون نزدیک کنیم. برای ساخت این موارد مثل جدول، منو و ... یک سری کتابخانه های مخصوص طراحی وبسایت ایجاد شده اند که کار را برای ما بسیار ساده کرده اند. به قول معروف که ضرب المثلی بسیار جالب است:

"وقتی چرخ هست نیاز به اختراع آن نیست"

معرفی کتابخانه های طراحی وبسایت

کتابخانه های (library) بسیاری هستند که با جستجو در گوگل می توانید به جزئیات آنها بپردازید مانند:

 

بوت استرپ (bootstrap)

 

فاندیشن (foundation)

 

بولما (bulma)

 

یوآی کیت (Ui kit)

 

سمنتیک یو آی (Semantic Ui)

 

متریالایز (Materialize)

 

جدول در بوت استرپ (bootstrap)

تمامی کتابخانه های بالا امکان های منحصر به فرد خود را دارند و به سادگی می توانید وارد وبسایتون بشوید و از طریق داکیومنت وب سایت اطلاعات مورد نظر را به صورت رایگان دریافت نمایید.

کتابخانه بوت استرپ (bootstrap) یکی از ساده ترین و محبوبترین کتابخانه های طراحی وبسایت به خصوص در استایل دهی با css مورد استفاده قرار می گیرد.

نکته مهم بوت استرپ

آخرین ورژن در حال حاضر 4.5.2 که این پست را خدمتتون گذاشته ام هستش. دقت کنید که هر ورژن با ورژن قبلی مختلف است.مثلا اگر از ورژن 2 بگذارید و کلاسهای ورژن 4 را فراخوانی کنید ممکن است به درستی کد شما کار نکند.

حالا با توضیحاتی که دادم میخوام برسم به قسمت کلاس جداول که فقط با دانلود کردن فایل bootsrap css و متصل کردن به وبسایت خود میتوانید به سادگی جدول زیر را ایجاد کنید. با من همراه باشید:

 

کدهای html


<head>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css">
</head>
<body>



<div class="container table-responsive py-5">
	<table class="table table-bordered table-hover">
		<thead class="thead-dark">
		<tr>
			<th scope="col">#</th>
			<th scope="col">نام</th>
			<th scope="col">نام خانوادگی</th>
			<th scope="col">ایمیل</th>
		</tr>
		</thead>
		<tbody>
		<tr>
			<th scope="row">1</th>
			<td>شبنم </td>
			<td>بهمنی</td>
			<td>bahmani@gmail.com</td>
		</tr>
		<tr>
			<th scope="row">2</th>
			<td>سارا</td>
			<td>اسکندری</td>
			<td>sara@gmail.com</td>
		</tr>
		<tr>
			<th scope="row">3</th>
			<td>شمیم</td>
			<td>احمدی </td>
			<td>shamim@gmail.com</td>
		</tr>
		<tr>
			<th scope="row">4</th>
			<td>علی</td>
			<td>سمیعی </td>
			<td>ali@gmail.com</td>
		</tr>

		</tbody>
	</table>
</div>



</body>

کدهای css نیاز نیست چون خود کتابخانه بوت استرپ شامل کدهای استایلی هست و ما فقط کلاس ها را صدا می زنیم.

 

خروجی :