راه راه کردن سطرهای جدول با استفاده از CSS3

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

نتیجه جدولی راه راه به شکل زیر خواهد بود:

سلول شماره یک
سلول شماره دو
سلول شماره سه
سلول شماره چهار
سلول شماره پنج

برای راه راه کردن جدول مورد نظر خود کافیست دستور CSS زیر را بر آن اعمال کنید:

کدهای CSS

 tbody tr:nth-child(odd) {
	background-color: #ccc;
}

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

کدهای HTML جدول مورد نظر ما میتواند به شرح زیر باشد :

کدهای HTML

Table Cell
Table Cell
Table Cell
Table Cell
Table Cell
Table Cell

نظرات (13) -

  • محمد

    06/06/1393 08:06:31 ب.ظ | پاسخ به این نظر

    سلام
    بسیار عالی بود تشکر میکنم

    • حامد میرزایی

      06/06/1393 09:51:48 ب.ظ | پاسخ به این نظر

      سپاس از وقتی که برای مطالعه مطلب گذاشتید...

  • محمد

    06/06/1393 10:45:57 ب.ظ | پاسخ به این نظر

    سلام
    واقعا اغلب نکات کلیدی رو اضافه میکنید.
    من در لینک زیر
    http://www.manisoft.ir/nokate-fani
    دستور شما رو اجرا کردم و عالی شد
    سوالم اینه که اگه دقت کنید بین ستونها فاصله ای وجود داره که الان سفید رنگ هست اگه بخوام تمام ستونها به هم بچسبن و فاصله ای بینشون نباشه چکار باید کنم ؟

    • حامد میرزایی

      06/06/1393 11:11:00 ب.ظ | پاسخ به این نظر

      خصیصه CELLSPACING رو برای جدول برابر با 0 قرار بدید نتیجه رو ببینید.

  • آرش

    06/07/1393 11:19:44 ق.ظ | پاسخ به این نظر

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

    • حامد میرزایی

      06/07/1393 12:08:13 ب.ظ | پاسخ به این نظر

      سلام
      ضمن تشکر، علت دیر آپ شدن مطالب حساسیت زیاد من در انتخاب و نوشتن با کیفیت مطلوب هست. اما اخیرا مشغله خارج از وب نیز به این مورد دامن زده.اما تلاش میکنم بروزرسانی مرتب انجام بشه.
      در مورد سئوالتون شما باید یک عنصر div درست کنید و خاصیت position اون رو برابر با position:relative قرار بدید. سپس عکس مورد نظر رو داخل اون div بندازید و خاصیت position:absolute رو به عکس اعمال کنید. بعد متن مورد نظر رو هم داخل div بندازید و برای اون هم position:absolute در نظر بگیرید. حالا با ست کردن موقعیت عکس و تصویر توسط خاصیت left ، right، top و bottom متن رو در محل مورد نظر خودتون قرار بدید.

      • آرش

        06/07/1393 05:06:16 ب.ظ | پاسخ به این نظر

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

  • محمد

    06/07/1393 01:25:36 ب.ظ | پاسخ به این نظر

    سلام
    لطفا با توجه به دمویی که دادم کد مورد نظر رو بفرمائید بصورت دقیق ممنونم.
    و اینکه الان چطور میتونم ردیف هایی که سفید هستند رو یکرنگ دیگه بزارم ؟
    ممنون

    • حامد میرازیی

      06/07/1393 05:04:17 ب.ظ | پاسخ به این نظر

      دقیقا در تگ table بعد از کلمه table بنویس "cellspacing="0
      برای رنگی کردن سطرهای هم در همین آموزش یه نکته پائین کدهای css گفتم بخونید. باید یبار دیگه همون کد css رو به جدول اعمال کنید ولی اینبار بجای کلمه odd بنویسید even و رنگ جدید رو هم ست کنید.

  • محمد

    06/09/1393 11:26:20 ب.ظ | پاسخ به این نظر

    سلام
    عالی بود
    جداول بسیار زیبا شد
    لطفا از این موارد ریز و حساس ما رو دریغ نکنید

  • محمد

    06/22/1393 03:32:57 ق.ظ | پاسخ به این نظر

    سلام
    با توجه به دستورات گفته شده جداول حالت بسیار زیبایی پیدا کرد
    فقط یک نکته میمونه برای من که نتونستم حلش کنم
    اینجا رو ببینید
    http://www.manisoft.ir/nokate-fani
    جدول ها از خود سیستم ایجاد شده و زیبا هستند
    حالا اینجا رو ببینید
    http://www.manisoft.ir/doreha/premiere-pro-cs6
    اینجا من جدول با ویرایشگر درست کردم و داره از اون دستور استفاده می کنه
    چه راهی هست این دو قسمت رو از هم جدا کنم تا لینک دوم ازش پیروی نکنه ؟!
    با تشکر

    • Abolfazl

      11/17/1393 09:09:30 ب.ظ | پاسخ به این نظر

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

  • امین پورهادی

    07/25/1393 08:42:28 ب.ظ | پاسخ به این نظر

    با سلام
    خیلی ممنون از مطالب و آموزش های مفیدتون.
    امیدوارم همیشه موفق باشین.

Loading