جداول CSS

جداول CSS

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

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

 جداول CSS جداول CSS جداول CSS Training tables styling CSS

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

نتیجه  به صورت زیر خواهد بود :

جداول CSS جداول CSS جداول CSS Capture 4

 

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

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

 

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

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

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

گستردگی (Padding) جدول

برای کنترل فضای بین مرز و محتوا در یک جدول، از خاصیت padding در عناصر th و td استفاده کنید :

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

خواهیم داشت که:

جداول CSS جداول CSS جداول CSS Capture 5

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

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

مثلا نمونه جدول زیز:

جداول CSS جداول CSS جداول CSS table

کد css جدول به صورت زیر خواهد  بود

و کد جدول هم به شکل زیر :

 

آموزش CSS آموزش طراحی وب

دیدگاه خود را بیان کنید