آموزش CSS

آموزش CSS - جداول

معمولا از جدول برای نماش داده های موجود استفاده می شود. در CSS شما می توانید ظاهر نمایشی مربوط به جداول را کنترل و مدیریت کنید.

سبک دهی جدول به کمک CSS:

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

اضافه کردن حاشیه(Borders )به جدول:

خصوصیت Border در زبان برنامه نویسی CSS بهترین روش برای تعریف حاشیه جدول هاست.  به مثال زیر توجه کنید. این کد می تواند حاشیه سیاه را برای المان های <table> ،<th> و <td> ایجاد کند.

table, th, td {
    border: 1px solid black;
}

خصوصیت border-collapse:

اگر خروجی مثال بالا را مشاهده کرده باشید  حتما متوجه شده اید که هر سلول از جدول دارای حاشیه های جداگانه و نیز فضایی بین حاشیه های سلول های مجاور است. این موضوع بدین خاطر رخ می دهد که حاشیه های سلول جدول به صورت پیش فرض از هم جدا شده اند. اما شما می توانید حاشیه های جدول را به کمک خصوصیت border-collapse به یک حاشیه واحد تبدیل کنید. این خصوصیت مدل حاشیه جدول را انتخاب می کند. چنین خصوصیتی می تواند یکی از دو مقادیر Collapse یا Separate را داشته باشد.

  •   مدل separated، مدل پیش فرض برای جدول های HTML  است که در آن هر سلول مجاور حاشیه مجزای خویش را خواهد داشت.
  •   در مدل collapsed ، سلول های مجاور دارای حاشیه های اشتراکی هستند.

به مثال زیر توجه کنید:

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

همچنین شما می توانید فضای بین حاشیه سلول های جدول را به کمک تنظیم مقدار خصوصیت border-spacing بر روی صفر حذف کنید. با اینحال، چنین خصوصیتی تنها فضای موجود را حذف می کند و همانند خصوصیت border-collapse حاشیه ها را ترکیب نمی نماید.

نکته: اگر <!DOCTYPE> در سند HTML مشخص نشده باشد، خصوصیت border-collapse نتایج غیر قابل پیش بینی خواهد داشت.

کنترل کردن طرح جدول:

به طور پیش فرض، یک جدول  برای اینکه بتواند خود را با داده های موجود در آن منطبق سازد، خود را توسعه داده یا کوچک تر می کند.  داده های موجود، داخلِ جدول را پر می کنند  و تا زمانی که فضای کافی برای داده فراهم نشده است جدول توسعه پیدا می کند. با اینحال، در برخی از موارد باید عرض ثابتی برای جدول در نظر گرفته شود تا طرح آن به درستی مدیریت گردد. برای اینکه بتوانید  اینکار را به درستی انجام دهید کافیست از خصوصیت table-layout استفاده نمایید. این خصوصیت الگوریتم هایی را برای استفاده در سلول ها، ستون ها و سطرها ایجاد می کند. دو الگوریتم طرح بندی جدول  در دسترس کاربران قرار دارد: یکی از آن ها automatic و دیگری Fixed است.

  •   Auto: از الگوریتم خودکار برای طرح بندی جدول استفاده می کند. با این الگوریتم عرض جدول و سلول های آن  به محتوای سلول بستگی خواهد داشت.
  •   Fixed: از الگوریتم ثابت برای طرح بندی جدول استفاده می کند. با این الگوریتم، طرح افقی جدول به محتوای سلول وابسته نیست و تنها به عرض جدول، عرض ستون و حاشیه یا فضای سلول وابسته خواهد بود.

مثال زیر نشان می دهد که جدول از الگوریتم fixed استفاده می کند و عرض ثابت 300 پیکسل را دارد.

table {
    width: 300px;
    table-layout: fixed;
}

بدون وجود مقادیر ثابت در خصوصیت table-layout( در جدول های بزرگ) کاربر تا زمانی که مرورگر کل جدول را رندر نکرده است هیچ بخشی از جدول را نخواهد دید .

نکته: شما می توانید عملکرد رندر شدن جدول را به کمک خصوصیت table-layout بهینه سازی کنید. مقادیر ثابت برای این خصوصیت، باعث می شود یک سطر از جدول شما در زمان واحد رندر شود و همین امر اطلاعات سریع تری در اختیار کاربران قرار می دهد.

مدیریت سلول های خالی:

خصوصیت empty-cells رندر شدن حاشیه ها و پس زمینه سلول هایی که محتوای قابل مشاهده در جدول ندارند را  کنترل می کند.  این خصوصیت سه مقدار زیر را می تواند اتخاذ کند:

  •   show
  •   hide
  •   inherit

قانون سبک دهی زیر، سلول های خالی موجود در المان جدول را پنهان می سازد.

table {
    border-collapse: separate;
    empty-cells: hide;
}

کنترل موقعیت عنوان جدول:

خصوصیت caption-side در زبان برنامه نویسی CSS، موقعیت عمودی جعبه کپشن جدول را تنظیم می کند. قانون سبک دهی زیر، کپشن جدول را زیر جدول والدش تنظیم می کند. با اینحال، برای  تغییر ترازبندی افقی متن کپشن، می توان از خصوصیت text-align استفاده کرد.

caption {
    caption-side: bottom;
}

هشدار: خصوصیت caption-side در مرورگر اینترنت اکسپلورر 7 و پایین تر از آن کار نمی کند. این خصوصیت تنها در اینترنت اکسپلورر 8 پشتیبانی می شود و باید <!DOCTYPE> مشخص گردد.

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

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

آموزش CSS

Learn CSS

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

کلیک کنید و سوالات خود را از ما بپرسید
لطفا فرم سوال را پر کنید

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

لطفا چند لحظه منتظر بمانید ...