طراحی و استایل بندی جدول با کمک CSS

[ آخرین بازنگری ۲۱ آبان ۱۳۹۵ ] [ نسخه چاپی ]

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

همونطور که میدونید در HTML برای ایجاد جدول از تگهای <table> برای کل جدول ، <tr> برای هر ردیف ، <th> برای ردیف اول که سرتیتر هر ستون در جدول هست و <td> که هر سلول جدول رو نشون میدن استفاده میکنیم بنابراین انتخابگرهامون در css برای کنترل کردن جدول همینها هستند و میتونید به اونها کلاس و یا ID هم اختصاص بدید که در ادامه راجع به اون صحبت خواهیم کرد.

طراحی جدول با استفاده از css

حاشیه جدول در css

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

[restrict paid=”true”]

برای اینکه کد css طولانی نشه از این درس سعی میکنیم تمام مشخصه های تکراری رو یکی کنیم و در یک سطر استفاده کنیم.
table , th , td { border : 1px solid #000;}

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

table , th , td {
Border-width:1px ;
Border-style:solid;
Border-color:#000;
}

از طرفی بجای اینکه برای هرکدوم از انتخابگرهای table ، td و th این مقادیر رو جداگانه اختصاص بدیم ، چون تمام مقادیر یکسان هستند ، با استفاده از کاما “,” انتخابگرها رو جدا کردیم.
مشخصه ی border-style میتونه مقادیر متفاوتی رو دریافت کنه ، به عنوان مثال dotted ، dashed ، groove ، double و همچنین مقدار none برای عدم نمایش حاشیه.

مثال شماره ۱

اگر به مثال ۱ توجه کرده باشید میبینید که حاشیه ی جدول دوتاست ، یکی مربوط به حاشیه خود جدول (table) و یکی هم مربوط به سلولها (td) . برای اینکه هردوی این حاشیه ها رو باهم یکی کنیم از مشخصه ی border-collapse استفاده میکنیم که دو مقدار رو میتونه دریافت کنه : collapse و separate

 

table{border-collapse:collapse;}
table,th,td{border: 1px solid #000;}

حالا بیایید دوباره به مثال یک نگاه کنیم و ببینیم چه تغییری کرده :

مثال شماره ۲

 

همونطور که ملاحظه میکنید فقط یکی از دو حاشیه قابل مشاهده است و دیگری حذف شده.

اندازه جدول در css

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

table { width : 50%;}
th { height : 50px;}

مقادیری که به درصد هستند اندازه ی ثابتی ندارند و بر حسب وضوح صفحه نمایش اندازه اونها تغییر میکنه و در واقع ۵۰% فضای صفحه نمایش رو و یا ۵۰% بخشی که شما جدول رو در اون قرار دادید اشغال میکنند.
مثلا فرض کنید شما یک تگ div دارید که ۵۰۰ پیکسل پهنا داره ، در صورتی که جدول شما درون این تگ باشه عرضی معادل ۲۵۰ پیکسل خواهد داشت ( ۵۰ درصد از ۵۰۰ پیکسل) ولی اعدادی که با پیکسل مشخص شده اند همیشه اندازه ثابتی خواهند داشت.

 

ترازبندی متن درون جدول با css

برای اینکه متن و نوشته و تصاویر داخل جدول رو بتونیم ترازبندی کنیم از مشخصه text-align برای ترازبندی افقی (چپ و راست) و مشخصه ی vertical-align برای ترازبندی عمودی (بالا و پایین) استفاده میکنیم.
مشخصه text-align میتونه سه مقدار رو دریافت کنه ، right برای نمایش در سمت راست ، left برای سمت چپ و center برای نمایش در مرکز .
مشخصه vertical-align میتونه مقادیر بیشتری رو داشته باشه ولی مهمترین اونها top برای بالا ، bottom برای پایین ، middle برای مرکز هست.

td{text-align:right;}
td{height:50px; vertical-align:bottom;}

 

در صورتی که شما از تصویر هم میخواهید درون سلولهای جدول استفاده کنید مقادیر baseline و text-top و text-bottom رو هم امتحان کنید و نتیجه رو بررسی کنید.

مثال شماره ۳

 

ایجاد فاصله داخلی (حاشیه داخلی)
برای اینکه بین محتوای سلولهای جدول و حاشیه (border) یک فضایی رو بتونید ایجاد کنید تا جدول بهم ریخته بنظر نرسه میتونید از مشخصه padding استفاده کنید. این مشخصه نه تنها در جدول بلکه در تمام انتخابگرها در css میتونه استفاده بشه و فاصله ی محتوا رو از حاشیه تعیین میکنه. در درسهای بعد بطور اختصاصی در مورد این مشخصه صحبت خواهیم کرد.

td{padding:15px;}

با کد بالا ، محتویات درون سلولها از هر طرف ۱۵ پیکسل از حاشیه فاصله خواهند گرفت.

رنگبندی جدول با css

به منظور زیباتر کردن جدول و همچنین جدا کردن بخشهای مهم میتونیم از رنگها استفاده کنیم. برای اینکار کافیه از مشخصه ی background-color استفاده کنیم.

th{background-color:#09f;}

 

مثال شماره ۴

همونطور که در مثال ۴ مشاهده میکنید ما یک جدول کامل رو ایجاد کردیم ، به بعضی ردیفها یک کلاس اضافه کردیم و رنگ اونها رو تغییر دادیم تا سطرهای جدول از هم تفکیک بشوند. حتما کدهای html و css رو در مثال ۴ بررسی کنید و حالتها و مقادیر متفاوت رو امتحان کنید و نتیجه رو بررسی کنید.
برای اضافه کردن توضیحات به جدول و یا زیر نویسی که پایین جدول در کتابها میبینید میتونید از تگ <caption> استفاده کنید که تگ html هست ولی با استفاده از css میتونید اون رو کنترل کنید.

[/restrict]

احتمالا این مطالب برای شما جالب هستند

آموزش css – درس دوم-دستورات
دوره‌ی مقدماتی آموزش کسب مهارت CSS
آشنایی با CSS و لزوم استفاده از آن در طراحی سایت
آموزشcss – درس پنجم – تصویر زمینه
تعیین فونت و قلم نوشته‌ها و استایل بندی آن در CSS
آموزش css – درس ششم – ویرایش متن
آموزش css – درس چهارم – نحوه استفاده از css

گفتگو پیرامون طراحی و استایل بندی جدول با کمک CSS

(منتشر شده: 3 | در انتظار تایید: 0)
mahgole

سلام ممنون از سایتون اگه میشه منو راهنمایی کنید
من می خوام تو سایت عکس های کالا رو با قیمت و یک دکمه خرید کنارش بزار من دونم چطور این کارو انجام بدم ؟من سایت دیجی کالا

پاسخ دهید
سعید

سلام من اگه بخوام از دو جدول مجزا در یک کلاس استفاده کنم تو html چی بنویسم که بتونم تو css صداشون بزنم

پاسخ دهید
عصرعلم

در پاسخ به سعید

سلام
منظورتون یک کلاس در دو جدول مجزا است؟
در تگ table مقدار class=”YOURCLASS” رو قرار بدید و در css هم با استفاده از YOURCLASS. دستورات رو وارد کنید.

پاسخ دهید

مرام‌نامه‌ی ارسال دیدگاه را رعایت کرده‌ام! (»نمایش مرام‌نامه)