زیباسازی جدول با css
آمورش ویدئویی زیباسازی جدول با css
آمورش ویدئویی زیباسازی جدول با css همراه با چندین مثال
چنانچه مشکلی در اجرای فیلم دارید از مرورگر فایرفاکس استفاده نمایید یا روی لینک زیر کلیک نمایید.
مشاهده یا دانلود فیلم بالادر این بخش از آموزش css از تاپ سایت 98 به سراغ ساخت جدول و زیباسازی جدول با css می رویم با ذکر چندین مثال این آموزش را پیش می بریم.
از جداول در بخش های مختلف یک سایت می توان استفاده کرد.
یکی از جذابیت های سایت استفاده از css است که با استفاده از آن می توانیم یک جدول زیبا ایجاد نماییم.
ساخت جدول :
برای ساخت جدول بایستی از تگ table استفاده کنیم. پس از ایجاد جدول با html به سراغ css می رویم و جدول زیبایی را خلق می کنیم.
تگ table برای ایجاد جدول استفاده می شود. تگ tr , td نیز برای ایجاد سطر و ستون بکار می رود.
<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 با محتوای اصلی جدول متفاوت است و مشخص می شود که قسمت بالا تیتر یا عنوان است.
<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 را ببینید. مثال های زیادی در آن وجود دارد.
منبع: تاپ سایت 98
تگ: ریسپانسیو
نظرات کاربران
از دیدگاه مرتبط با موضوع استفاده نمایید.
از تبلیغ سایت یا شبکه اجتماعی خودداری فرمایید.
برای پاسخ گویی بهتر در سایت ثبت نام نمایید و سپس سوال خود را مطرح فرمایید.
اگر به دنبال کار پاره وقت هستید با ما تماس بگیرید.
اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید