logo
logo
تبلیغ کلیکی تاپ سایت 98

زیباسازی جدول با css

زیباسازی جدول با css
هدایت عباسی آموزش CSS

آمورش ویدئویی زیباسازی جدول با css

آمورش ویدئویی زیباسازی جدول با css همراه با چندین مثال

چنانچه مشکلی در اجرای فیلم دارید از مرورگر فایرفاکس استفاده نمایید یا روی لینک زیر کلیک نمایید.

مشاهده یا دانلود فیلم بالا

در این بخش از آموزش css از تاپ سایت 98 به سراغ ساخت جدول و زیباسازی جدول با css می رویم با ذکر چندین مثال این آموزش را پیش می بریم.

از جداول  در بخش های مختلف یک سایت می توان استفاده کرد.

یکی از جذابیت های سایت استفاده از css است که با استفاده از آن می توانیم یک جدول زیبا ایجاد نماییم.

ساخت جدول :

برای ساخت جدول بایستی از تگ table استفاده کنیم. پس از ایجاد جدول با html به سراغ css می رویم و جدول زیبایی را خلق می کنیم.

تگ table برای ایجاد جدول استفاده می شود. تگ tr , td نیز برای ایجاد سطر و ستون بکار می رود.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href="https://topsite98.com/">Click me!</a>
<p>HTML CSS Table topsite98.com</p>
<table>
<tr>
<th>name</th>
<th>lname</th>
</tr>
<tr>
<td>ali</td>
<td>rezaee</td>
</tr>
<tr>
<td>ahmad</td>
<td>ahmadi</td>
</tr>
<tr>
<td>reza</td>
<td>ahmadi</td>
</tr>
</table>
</body></html>

جدول زیبا با css :

در مثال زیر یک جدول زیبا را با استفاده از html,css ایجاد کردیم.

کدهای css در قسمت style قرار می گیرد. ما می توانیم برای هر تگ بصورت جداگانه استایل تعریف کنیم.

ابتدا برای تگ table عرض آن را مشخص کردیم سپس برای th , td نحوه نمایش متن و padding را مشخص کردیم . متن در سمت چپ قرار می گیرد و با فاصله 8 پیکسلی .

با استفاده از nth-chile مشخص کردیم که رنگ سطرها یک در میان تغییر کند تا زیبایی خاصی به جدول بدهد و همچنین تشخیص محتوا راحت تر باشد.

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

 

<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 60%;
}
th, td {
text-align: left;
padding: 8px;
}
tr:nth-child(even){background-color: #f2f2f2}
th {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<a href="https://topsite98.com/">Click me!</a>
<p>HTML CSS Table topsite98.com</p>
<table>
<tr>
<th>name</th>
<th>lname</th>
</tr>
<tr>
<td>ali</td>
<td>rezaee</td>
</tr>
<tr>
<td>ahmad</td>
<td>ahmadi</td>
</tr>
<tr>
<td>reza</td>
<td>ahmadi</td>
</tr>
</table>
</body></html>

برای یادگیری بهتر دسته آموزش css را ببینید. مثال های زیادی در آن وجود دارد.

اگر به دنبال کار پاره وقت هستید با ما تماس بگیرید.

اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید

کسب و کار
دوره های آموزشی دوره های آموزشی

نظرات کاربران

از دیدگاه مرتبط با موضوع استفاده نمایید.

از تبلیغ سایت یا شبکه اجتماعی خودداری فرمایید.

برای پاسخ گویی بهتر در سایت ثبت نام نمایید و سپس سوال خود را مطرح فرمایید.