کد آماده HTML و CSS جدول رنگارنگ
کد تخفیف در جریان devme1397 %10 تا آخر پاییز97

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

جدول ها بسیار منعطف هستند و هر تغییری که بخواهید می توانید روی آنها اعمال کنید. این تغییرات شامل رنگ بندی ، تغییر در حاشیه ها ، اندازه ها ، فاصله ها ، عرض و ارتفاع و … . در اینجا ما یک جدولی را در اختیارتان قرار خواهیم داد که رنگ بندی متنوعی دارد و می توانید از آن برای نمایش اطلاعات مورد نظر خود در قالبتان استفاده نمایید. (برای مشاهده اندازه اصلی تصویر روی آن کلیک کنید)

جهت دریافت این جدول ، در سمت چپ در بخش پیوست ها ، فایل را دریافت نموده و سپس HTML داخل پکیج را یا با مرورگر اجرا نمایید تا بتوانید پیش نمایش آن را مشاهده کنید ، یا آن را با NotePad باز کنید تا کدها را دریافت کنید!

پیشنهاد می کنیم کدهای استایل داخل فایل HTML را در فایل CSS قالبتان قرار دهید و کد HTML مربوط به جدول را در هر مکانی از قالب یا مطلب که می خواهید!

 

نکات:

1 . تغییر رنگ ستون ها

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

#bg1 {background-color: #4CAF50;color: #FFF;}
#bg2 {background-color: #ff9800;color: #FFF;}
#bg3 {background-color: #03a9f4;color: #FFF;}
#bg4 {background-color: #9c27b0;color: #FFF;}
#bg5 {background-color: #f44336;color: #FFF;}
#bg6 {background-color: #3f51b5;color: #FFF;}

 

2 . افزایش یا کاهش تعداد سطر و ستون

الف) کد زیر مربوط به یک CEL (سلول) از یک ستون است:

<td id="bg6">&crarr; متن آزمایشی</td>

ب) کد زیر هم مربوط به اولین سلول از ستون است که استایل مخصوصی برایش تعیین شده :

<td id="bg6" class="dhead"> فیلم های آموزشی
<br><strong>همه چی!</strong></td>

ج) و همچنین کد زیر مربوط به یک ردیف :

<tr>
  <td id="bg1">&crarr; متن آزمایشی</td>
  <td id="bg2">&crarr; متن آزمایشی</td>
  <td id="bg3">&crarr; متن آزمایشی</td>
  <td id="bg4">&crarr; متن آزمایشی</td>
  <td id="bg5">&crarr; متن آزمایشی</td>
  <td id="bg6">&crarr; متن آزمایشی</td>
</tr>

همانطور که مشاهده می کنید ، در کد بالا ما 6 سلول داریم که هر کدام با یک آی دی خاصی تگ گذاری شده اند.

برای افزودن یک ستون جدید به این جدول ، کافیست در بخشی که کدهای مربوط به سلول اول جدول قرار دارند ، یک کد جدید مانند کد “ب” را در زیر کدهای مشابه به خود اضافه کنید. سپس در سورس 5 کد مانند بخش “ج” مشاهده می کنید که باید در انتهای هر یک از این ردیف ها ، یک کد مانند “الف” اضافه کنید!

masterwob گفت :آذر 16, 1396

سلام ممنون از این مطلب زیبا و کارآمد
یه سوال داشتم توی این جدول چون متن فارسی هست از دستور rtl برای از راست به چپ بودن استفاده شده
حالا اگه بخوایم این متن ها وسط قرار بگیرن باید چیکار کنیم؟

مسیح دیندار گفت :آذر 16, 1396

درود.
خاصیت استایل زیر رو برای سلول ها اعمال کنید تا متن ها رو وسط چین کنید :
text-align: center;

فاطمه گفت :آذر 20, 1396

سلام از مطالب خوبتون ممنونم من چند وقت بود دنبال سایتی میگشتم که سرس آماده داشته باشه یدون سایت تو این زمینه پیدا کردم کارمو راه انداخت فقط حیف که پولی هستش ولی فارسی هستش و استفاده ازش راحته 🙂

دیدگاه شما درباره این صفحه چیست؟