فرمت دهی جداول در CSS
جداول در CSS
در CSS به خوبی می توان ظاهر جداول HTML را اصلاح نمود:
| Company | Contact | Country |
|---|---|---|
| Alfreds Futterkiste | Maria Anders | Germany |
| Berglunds snabbköp | Christina Berglund | Sweden |
| Centro comercial Moctezuma | Francisco Chang | Mexico |
| Ernst Handel | Roland Mendel | Austria |
| Island Trading | Helen Bennett | UK |
| Königlich Essen | Philip Cramer | Germany |
| Laughing Bacchus Winecellars | Yoshi Tannamuri | Canada |
| Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |
| North/South | Simon Crowther | UK |
| Paris spécialités | Marie Bertrand | France |
| The Big Cheese | Liz Nixon | USA |
| Vaffeljernet | Palle Ibsen | Denmark |
لبه های جدول(Border)
از خصوصیت border برای مشخص کردن لبه های جدول استفاده می شود.
همان طور که می دانید برای ساخت جدول در HTML از تگ <table> استفاده می گردد. به عنوان مثال جدول بالا به صورت زیر خواهد بود:
<table>
<tr>
<th>...</th>
<th>...</th>
<th>...</th>
</tr>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
...
...
</table>
در مثال زیر برای عناصر table و th و td خصوصیت border تنظیم شده است:
توجه داشته باشید که جدول مثال بالا دو لبه خواهد داشت. این به خاطر این است که هم برای table و هم برای th/td به صورت جداگانه border تنظیم شده است.
اگر می خواهید فقط یک لبه داشته باشید از خاصیت border-collapse استفاده کنید.
یکی کردن Borderها
برای تبدیل لبه های دوخطی به لبه های یک خطی و مجزا از خاصیت border-collapse استفاده می گردد:
مثال (فرمت دهی جداول در CSS)
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}
عرض و ارتفاع یک جدول (Width/height )
عرض و ارتفاع یک جدول با خصوصیات Width و height تعریف می شود.
در مثال زیر عرض جدول 100% و ارتفاع آن با 50px تنظیم شده است:
تراز بندی متن جدول(Alignment)
با خصوصیات text-align و vertical-align می توان متن داخل یک سلول جدول را تراز بندی کرد.
خصوصیت text-align متن را در جهت محور X تنظیم می کند (مثل چپ ، راست یا وسط)
خصوصیت vertical-align متن را در جهت محور Y تنظیم می کند(مثل بالا، پایین یا وسط)
Padding یک جدول
برای کنترل فاصله بین لبه ها و متن در جدول می توان از خصوصیت padding استفاده کرد:
رنگ جدول
در مثال زیر، در گروه اول یعنی (table, td, th) رنگ لبه ها با رنگ سبز تنظیم شده است و در گزینشگر (th) برای header جدول، رنگ پس زمینه با رنگ سبز و متن داخل آن با رنگ سفید تنظیم شده است:
مثال (فرمت دهی جداول در CSS)
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
ساخت یک جدول فانتزی
این مثال نشان می دهد که چگونه یک جدول فانتزی ایجاد کنیم.
تنظیم مکان عنوان یا Caption یک جدول
این مثال نشان می دهد که چگونه مکان caption یک جدول را تنظیم کنیم.
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 39291
دیدگاهها
سلام.چگونه یک چدولی طراحی کنم که سطر اول اون تعداد خونه هاش با تعداد خونه های سطر دومش برابر نباشد؟ممنون.
سلام، بعنوان مثال اگر جدول تان، شامل 3 ستون باشد و بخواهید سطر اول شامل دو ستون باشد، کافی است که در tr یا همان ردیف اول بصورت زیر عمل کنید:
<table>
<tr>
<td colspan="2"> سلول A</td>
<td>سلول B</td>
</tr>
<tr>
<td>سلول A</td>
<td>سلول B</td>
<td>سلول C</td>
</tr>
</table>
دوستان ممنونم، دم همگي گرم :)
سلام
تو یک ردیف از ستون های جدول عکس گذاشتم
اما نمیدونم چرا هر کاری میکنم یه فاصله بین عکس و لبه سمت چپ هست؟؟
<td style="padding- left:0px; padding-right:0 px" />
با سلام.
بهتره برای ترازبندی از تگ td مربوط به اون ردیف استفاده کنید و با خصوصیات text-align و padding و ... فاصله و اندازه موردنظر رو به دست بیارید.
سلام میخواستم بدونم تا چه حدی از سی اس اس بخونم کافیه و بعد جاوا اسکریپت رو شروع کنم؟
ممنون از سایت خوبتون
سلام.
والا حد مشخصی نداره. اگر فکر می‌کنید تسلط پیدا کردید به CSS و مفاهیمش رو می‌دونید می‌تونید جاوااسکریپت رو شروع کنید.
البته این نکته رو بگم که در اصل این دو به هم ربطی ندارن و به اصطلاح پیش‌نیاز نیستند، ولی بهتره ترتیب رعایت بشه.
با سلام و خسته نباشید
این قسمت و متوجه نشدم لطفا اگر شد جواب بدین
باتشکر
padding:3px 7px 2px 7px
با سلام
به آموزش "خصوصیت padding"
از طریق لینک زیر مراجعه کنید :
www.beyamooz.com/cssref/227-css-properties/845-padding
سلام:
خیلی ممنون از وب سایت قشنگ تون ، واقعاً خیلی زحمت کشیدید.
یک سوال داشتم اگه اجازه باشه !
برای ساختن یک جدول فانتزی باید این روشی که شما کار کردید یه کم کار ما بیشتر شده یعنی مجبور شدیم که ID یا Class برای هر tr بدهیم ، سوال اینجاست که آیا نمیشه از حلقه ها برای ساختن یک جدول فانتزی استفاده کنیم؟
یعنی با یک بار نوشتن کود مورد نظر برای همه ردیف ها یکی در میان رنگ آمیزی کنیم!
سلام ممنون ...
نکته بسیار مهم:
بجای روش بالا، برای رنگ آمیزی ردیف های جدول بصورت یکی در میان می توانید از روش زیر استفاده کنید:#customers tr:nth-child(od d)
{
color:#000000;
background-color:#EAF2D3;
}
با استفاده از شبه کلاس ()nth-child می توانید به فرزندان یک عنصر دسترسی داشته باشید، بعنوان مثال اگر پارامتر 2 را برای آن تنظیم کنیم، منظور فرزند شماره 2 است و یا اگر پارامتر odd برای آن تنظیم شود به تمام فرزندان با شماره فرد دسترسی خواهد بود.
لطفاً مثال زیر را که با روش بالا پیاده سازی شده است مشاهده فرمایید:
www.beyamooz.com/try_it_yourself/tryit.php?filename=trycss_table_fancy01
سلام:
در مثال "ساخت یک جدول فانتزی" چرا گزینشگر customers th# را دو بار و هر بار با خاصیت های متفاوت تعریف کرده اید!؟
#customers td, #cust omers th
{
font-size:1em;
border:1px solid #98bf21;
padding:7px 7px 2px 7px;
}
#cust omers th
{
font-size:1.1em;
text-align:left;
padding-top:5px;
padding-bottom:4px;
background-color:#A7C942;
color:#ffffff;
}
سلام
گزینشگری که در بالا با رنگ قرمز متمایز شده، مربوط به عناوین ستون هاست.
در مثال ساخت جدول فانتزی، عناوین ستون ها یعنی thها و ردیف های معمولی یعنی tdها در بعضی از خصوصیت ها مشترک هستند، بنابراین خصوصیت های مشترک را در یک مجموعه مانند قسمت اول کد بالا ذکر می کنیم.
در ادامه توضیح بالا، بعضی از خصوصیت ها مثل رنگ پس زمینه، فقط در thها بکار رفته، بنابراین، مجبوریم که یکبار دیگر گزینشگر مربوطه را ذکر کنیم.
توجه داشته باشید که این روش در طراحی صفحات وب، بسیار بسیار کاربردی است و غیر ممکن است که صفحه ای را طراحی کنید و به این صورت عمل نکنید...!
ممنون ولی خصوصیتهایی مثل font-size وpaddingدر هردو customers th# هم در بالا و هم در پایین به کاررفته این به چه شکله!؟
به خاطر دقتتون بهتون تبریک می گم ...!
توجه داشته باشید، که در بعضی از موارد مثل font-size و padding که شما فرمودید، اجتناب ناپذیر است و مجبوریم که خصوصیت های مذکور را در دو قسمت ذکر کنیم.
توجه: مقدار تنظیم شده برای font-size و padding عناوین ستون ها (th ها) در مقابل ردیف های معمولی کمی بزرگتر است.
ان شا الله در آینده که تبدیل به یک طراح ماهر شدید، متوجه خواهید شد که این حالت بسیار اتفاق خواهد افتاد و مطمئن باشید، که اشتباهی رخ نداده است.
تو قسمت جدول فانتزی متوجه این قسمت نشدم.اگه امکانش هست یه کم توضیح بدین
#customers tr.alt td
{
color:#000000;
background-color:#EAF2D3;
}
جوابمو تو دیدگاهها گرفتم.دیگه لازم نیست.ممنون
سلام،خسته نباشید
توی مثالی که برای ساخت جدول فانتزی آوردید میشه این کد رو توضیح بدید؟#customers tr.alt td
{
color:blue;
background-color:red;
}
سلام، ممنون
اگر گزینشگر یا Selector بالا، را با توجه به فاصله هایی که بین هر قسمت وجود دارد تفسیر کنیم به نتیجه زیر خواهیم رسید:
قسمت 1- این قسمت به یک عنصر با id یا شناسه "customers" که در صفحه یکتاست اشاره دارد.
قسمت 2- این قسمت به تمام tr های با کلاس "alt" که فرزند قسمت 1 هستند، اشاره دارد.
قسمت 3- این قسمت به تمام tdهایی که فرزند قسمت 2 هستند، اشاره دارد.
حالا با توجه به قسمت 3 به عناصر مورد نظرمان برای استایل دهی دسترسی پیدا کردیم. در ادامه خصوصیت های color و background-colo r را برای آنها تنظیم می کنیم.
اگر به کد HTML مثال "ساخت یک جدول فانتزی" توجه کنید، می بینید که کلاس "alt" بصورت یکی در میان برای trهای جدول تنظیم شده است، و با این کار نهایتاً می توانیم ردیف های جدول را یکی در میان رنگی کنیم.
نکته بسیار مهم:
بجای روش بالا، برای رنگ آمیزی ردیف های جدول بصورت یکی در میان می توانید از روش زیر استفاده کنید:#customers tr:nth-child(od d)
{
color:#000000;
background-colo r:#EAF2D3;
}
با استفاده از شبه کلاس ()nth-child می توانید به فرزندان یک عنصر دسترسی داشته باشید، بعنوان مثال اگر پارامتر 2 را برای آن تنظیم کنیم، منظور فرزند شماره 2 است و یا اگر پارامتر odd برای آن تنظیم شود به تمام فرزندان با شماره فرد دسترسی خواهد بود.
مگه یه id فقط خاص یه عنصر نیس؟پس چرا customers برای چند عنصر اومده؟#customers td,#customers th و غیره،لطف میکنین یه کم توضیح بدین؟
در قسمت اول گزینشگر یعنی "customers#"، به این نتیجه می رسیم که با توجه به علامت "#" که در ابتدای آن آمده است، تنها به یک عنصر اشاره می شود (عنصری با id یا شناسه "customers")، اما زمانی که به قسمت دوم گزینشگر یعنی td بیشتر توجه کنید، متوجه خواهید شد که به تمام tdهایی که فرزند قسمت اول هستند اشاره خواهد شد.
***یه پیشنهاد!***
چرا بعد از هر درس یه توضیح مختصر ومفید نمیزارید!اینطور ی خود به خود به سوالهای خیلی ازدوستان جواب داده میشه وزحمت شما هم کمتر میشه!؟
مثلا برای همین درس این چند خط کدو توضیح توضیح بدید تا جای خیلی از سوالات گرفته بشه.
"با تشکر"
توجه داشته باشید که یکی از عوامل موفقیت یک سایت، کوتاه و مختصر بودن مطالب است، به نظر بنده بیشتر از 80 درصد افراد، با خواندن مطلب بالا، موضوع را درک خواهند کرد و طولانی کردن توضیحات مربوط به جدول لزومی ندارد.
به نقل از امیر پهلوان صادق:
نحوه تشخیص فرزند قسمت اول ودوم به چه شکله!؟
هنگام نوشتن گزینشگرها در CSS، اگر بین قسمت های گزینشگر از فاصله استفاده کنید، منظور پیمایش بسمت داخل خواهد بود. یعنی اگر بین قسمت اول گزینشگر و قسمت دوم فاصله وجود داشت، این فاصله به معنی فرزند خواهد بود:
با توجه به گزینشگر سه قسمتی زیر:#customers tr.alt td
فاصله بین قسمت اول یعنی customers# و قسمت دوم یعنی tr.alt به صورت زیر تفسیر خواهد شد: تمام tr های با کلاس "alt" که فرزند عنصر با شناسه customers هستند.
برای قسمت سوم، یعنی td داستان به همین صورت خواهد بود.