آموزش CSS (قسمت ۸)

آموزش-css-قسمت-۸

در قسمت 4 از آموزش HTML، با تگ <Table> و ساخت جدول ها آشنا شدید و توانستید از طریق تگ های مربوط به ساخت جدول، جدول های مورد نیاز خود را ایجاد کنید.خب جدولی که HTML در اختیار ما میگذارد ظاهر کاملا ساده و نه چندان جالب دارد ولی ممکن است در استفاده از جدول نیاز باشید ظاهری زیبا و شکیل تر داشته باشیم که HTML به تنهایی قادر به ایجاد چنین جدولی نیست ولی می توان با استفاده از استایل های CSS برای جدول ها شکل های مورد نظر را اعمال کرد.من یک استایل زیبا برای جدول ایجاد شده اعمال می کنم و شما می توانید با استفاده از کدهای این آموزش برای جداول خود استایل های شخصی و مورد نیاز خودتان را اعمال کنید.

کد جدول با HTML : 

<table class="custom_table">
    <tr>
        <th>ردیف</th>
        <th>عنوان</th>
        <th>نوشته</th>
        <th>ابزار</th>
    </tr>
    <tr>
        <td>1</td>
        <td>HTML</td>
        <td>آموزش ایجاد جدول با استفاده از HTML</td>
        <td class="delete">× حذف</td>
    </tr>
    <tr>
        <td>2</td>
        <td>CSS</td>
        <td>اعمال استایل به جدول ها</td>
        <td class="delete">× حذف</td>
    </tr>
    <tr>
        <td>3</td>
        <td>JQuery</td>
        <td>حذف ردیف مورد نظر از یک جدول</td>
        <td class="delete">× حذف</td>
    </tr>
    <tr>
        <td>4</td>
        <td>JavaScript</td>
        <td>اصول برنامه نویسی کاربردی</td>
        <td class="delete">× حذف</td>
    </tr>
</table>

اعمال استایل با CSS : 

<style>
    .custom_table{
        border-collapse: collapse;
        direction: rtl;
        text-align: right;
    }
    .custom_table tr:nth-child(odd){
        background-color: #f2f2f2;
    }
    .custom_table td, .custom_table th{
        border: 1px solid #e5e5e5;
        padding: 5px;
    }
    .custom_table th{
        background: #CC8E35;
        color: #fff;
    }
    .custom_table td.delete:hover{
        background:#C0392B;
        color: #fff;
        cursor: pointer;
    }
</style>

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

 

► قسمت قبلی 


خودتان امتحان کنید

آموزش های مرتبط :



پرسش و پاسخ

سوالی دارید بپرسید؟