سبد خرید (0)

تبلیغات

فرمت دهی جداول در 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)

Wiki

از خصوصیت 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 تنظیم شده است:

مثال (فرمت دهی جداول در CSS)

table, th, td
{
border: 1px solid black;
}
خودتان امتحان کنید »

توجه داشته باشید که جدول مثال بالا دو لبه خواهد داشت. این به خاطر این است که هم برای table و هم برای th/td به صورت جداگانه border تنظیم شده است.

اگر می خواهید فقط یک لبه داشته باشید از خاصیت border-collapse استفاده کنید.

یکی کردن Borderها

Wiki

برای تبدیل لبه های دوخطی به لبه های یک خطی و مجزا از خاصیت border-collapse استفاده می گردد:

مثال (فرمت دهی جداول در CSS)

table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}
خودتان امتحان کنید »

عرض و ارتفاع یک جدول (Width/height )

Wiki

عرض و ارتفاع یک جدول با خصوصیات Width و height تعریف می شود.

در مثال زیر عرض جدول 100% و ارتفاع آن با 50px تنظیم شده است:

مثال (فرمت دهی جداول در CSS)

table
{
width:100%;
}
th
{
height:50px;
}
خودتان امتحان کنید »

 تراز بندی متن جدول(Alignment)

Wiki

با خصوصیات text-align و vertical-align می توان متن داخل یک سلول جدول را تراز بندی کرد.

خصوصیت text-align متن را در جهت محور X تنظیم می کند (مثل چپ ، راست یا وسط)

مثال (فرمت دهی جداول در CSS)

td
{
text-align:right;
}
خودتان امتحان کنید »

خصوصیت vertical-align متن را در جهت محور Y تنظیم می کند(مثل بالا، پایین یا وسط)

مثال (فرمت دهی جداول در CSS)

td
{
height:50px;
vertical-align:bottom;
}
خودتان امتحان کنید »

Padding یک جدول

Wiki

برای کنترل فاصله بین لبه ها و متن در جدول می توان از خصوصیت padding استفاده کرد:

مثال (فرمت دهی جداول در CSS)

td
{
padding:15px;
}
خودتان امتحان کنید »

رنگ جدول

Wiki

در مثال زیر، در گروه اول یعنی (table, td, th) رنگ لبه ها با رنگ سبز تنظیم شده است و در گزینشگر (th) برای header جدول، رنگ پس زمینه با رنگ سبز و متن داخل آن با رنگ سفید تنظیم شده است:

مثال (فرمت دهی جداول در CSS)

table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
خودتان امتحان کنید »

مثال

مثال - خودتان امتحان کنید

Wiki

ساخت یک جدول فانتزی
این مثال نشان می دهد که چگونه یک جدول فانتزی ایجاد کنیم.

تنظیم مکان عنوان یا Caption یک جدول
این مثال نشان می دهد که چگونه مکان caption یک جدول را تنظیم کنیم.

دیدگاه‌ها  

+4 # ام ار 1395-11-08 23:58
سلام.چگونه یک چدولی طراحی کنم که سطر اول اون تعداد خونه هاش با تعداد خونه های سطر دومش برابر نباشد؟ممنون.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # امیر پهلوان صادق 1395-11-09 08:34
سلام، بعنوان مثال اگر جدول تان، شامل 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>
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # lililili 1395-07-14 09:51
دوستان ممنونم، دم همگي گرم :)
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # ...... 1395-04-03 12:24
سلام
تو یک ردیف از ستون های جدول عکس گذاشتم
اما نمیدونم چرا هر کاری میکنم یه فاصله بین عکس و لبه سمت چپ هست؟؟
<td style="padding- left:0px; padding-right:0 px" />
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # مهرداد صلاحی 1395-04-05 13:48
با سلام.
بهتره برای ترازبندی از تگ td مربوط به اون ردیف استفاده کنید و با خصوصیات text-align‌ و padding و ... فاصله و اندازه موردنظر رو به دست بیارید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # mina.z 1394-10-07 19:57
سلام میخواستم بدونم تا چه حدی از سی اس اس بخونم کافیه و بعد جاوا اسکریپت رو شروع کنم؟

ممنون از سایت خوبتون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # مهرداد صلاحی 1395-04-05 13:47
سلام.
والا حد مشخصی نداره. اگر فکر می‌کنید تسلط پیدا کردید به CSS و مفاهیمش رو می‌دونید می‌تونید جاوااسکریپت رو شروع کنید.

البته این نکته رو بگم که در اصل این دو به هم ربطی ندارن و به اصطلاح پیش‌نیاز نیستند، ولی بهتره ترتیب رعایت بشه.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # ali bayervand 1394-07-01 13:13
با سلام و خسته نباشید
این قسمت و متوجه نشدم لطفا اگر شد جواب بدین
باتشکر
padding:3px 7px 2px 7px
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # شهربانو دوستی 1394-07-02 11:02
با سلام
به آموزش "خصوصیت padding"
از طریق لینک زیر مراجعه کنید :
www.beyamooz.com/cssref/227-css-properties/845-padding
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # صفی الله 1394-05-21 13:49
سلام:
خیلی ممنون از وب سایت قشنگ تون ، واقعاً خیلی زحمت کشیدید.
یک سوال داشتم اگه اجازه باشه !
برای ساختن یک جدول فانتزی باید این روشی که شما کار کردید یه کم کار ما بیشتر شده یعنی مجبور شدیم که ID یا Class برای هر tr بدهیم ، سوال اینجاست که آیا نمیشه از حلقه ها برای ساختن یک جدول فانتزی استفاده کنیم؟
یعنی با یک بار نوشتن کود مورد نظر برای همه ردیف ها یکی در میان رنگ آمیزی کنیم!
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # امیر پهلوان صادق 1394-05-21 14:42
سلام ممنون ...
نکته بسیار مهم:
بجای روش بالا، برای رنگ آمیزی ردیف های جدول بصورت یکی در میان می توانید از روش زیر استفاده کنید:#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
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # هیربد بهادری 1394-02-31 13:10
سلام:
در مثال "ساخت یک جدول فانتزی" چرا گزینشگر 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;
}
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+5 # امیر پهلوان صادق 1394-03-01 08:20
سلام
گزینشگری که در بالا با رنگ قرمز متمایز شده، مربوط به عناوین ستون هاست.
در مثال ساخت جدول فانتزی، عناوین ستون ها یعنی thها و ردیف های معمولی یعنی tdها در بعضی از خصوصیت ها مشترک هستند، بنابراین خصوصیت های مشترک را در یک مجموعه مانند قسمت اول کد بالا ذکر می کنیم.
در ادامه توضیح بالا، بعضی از خصوصیت ها مثل رنگ پس زمینه، فقط در thها بکار رفته، بنابراین، مجبوریم که یکبار دیگر گزینشگر مربوطه را ذکر کنیم.
توجه داشته باشید که این روش در طراحی صفحات وب، بسیار بسیار کاربردی است و غیر ممکن است که صفحه ای را طراحی کنید و به این صورت عمل نکنید...!
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # هیربد بهادری 1394-03-01 19:01
ممنون ولی خصوصیتهایی مثل font-size وpaddingدر هردو customers th# هم در بالا و هم در پایین به کاررفته این به چه شکله!؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+6 # امیر پهلوان صادق 1394-03-03 08:08
به خاطر دقتتون بهتون تبریک می گم ...!
توجه داشته باشید، که در بعضی از موارد مثل font-size و padding که شما فرمودید، اجتناب ناپذیر است و مجبوریم که خصوصیت های مذکور را در دو قسمت ذکر کنیم.
توجه: مقدار تنظیم شده برای font-size و padding عناوین ستون ها (th ها) در مقابل ردیف های معمولی کمی بزرگتر است.
ان شا الله در آینده که تبدیل به یک طراح ماهر شدید، متوجه خواهید شد که این حالت بسیار اتفاق خواهد افتاد و مطمئن باشید، که اشتباهی رخ نداده است.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # Marjan 1394-02-19 20:11
تو قسمت جدول فانتزی متوجه این قسمت نشدم.اگه امکانش هست یه کم توضیح بدین
#customers tr.alt td
{
color:#000000;
background-color:#EAF2D3;
}
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # Marjan 1394-02-19 20:13
جوابمو تو دیدگاهها گرفتم.دیگه لازم نیست.ممنون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # مانی 1393-11-19 16:12
سلام،خسته نباشید
توی مثالی که برای ساخت جدول فانتزی آوردید میشه این کد رو توضیح بدید؟#customers tr.alt td
{
color:blue;
background-color:red;
}
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # امیر پهلوان صادق 1393-11-20 08:02
سلام، ممنون
اگر گزینشگر یا 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 برای آن تنظیم شود به تمام فرزندان با شماره فرد دسترسی خواهد بود.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # مانی 1393-11-20 09:10
مگه یه id فقط خاص یه عنصر نیس؟پس چرا customers برای چند عنصر اومده؟#customers td,#customers th و غیره،لطف میکنین یه کم توضیح بدین؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # امیر پهلوان صادق 1393-11-20 14:21
در قسمت اول گزینشگر یعنی "customers#"، به این نتیجه می رسیم که با توجه به علامت "#" که در ابتدای آن آمده است، تنها به یک عنصر اشاره می شود (عنصری با id یا شناسه "customers")، اما زمانی که به قسمت دوم گزینشگر یعنی td بیشتر توجه کنید، متوجه خواهید شد که به تمام tdهایی که فرزند قسمت اول هستند اشاره خواهد شد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # هیربد بهادری 1394-02-30 01:15
***یه پیشنهاد!***
چرا بعد از هر درس یه توضیح مختصر ومفید نمیزارید!اینطور ی خود به خود به سوالهای خیلی ازدوستان جواب داده میشه وزحمت شما هم کمتر میشه!؟
مثلا برای همین درس این چند خط کدو توضیح توضیح بدید تا جای خیلی از سوالات گرفته بشه.
"با تشکر"
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # امیر پهلوان صادق 1394-02-30 12:22
توجه داشته باشید که یکی از عوامل موفقیت یک سایت، کوتاه و مختصر بودن مطالب است، به نظر بنده بیشتر از 80 درصد افراد، با خواندن مطلب بالا، موضوع را درک خواهند کرد و طولانی کردن توضیحات مربوط به جدول لزومی ندارد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # هیربد بهادری 1394-02-30 01:11
به نقل از امیر پهلوان صادق:
در قسمت اول گزینشگر اشاره شده توسط شما یعنی "customers#"، به این نتیجه می رسیم که با توجه به علامت "#" که در ابتدای آن آمده است، تنها به یک عنصر اشاره می شود (عنصری با id یا شناسه "customers")، اما زمانی که به قسمت دوم گزینشگر یعنی td بیشتر توجه کنید، متوجه خواهید شد که به تمام tdهایی که فرزند قسمت اول هستند اشاره خواهد شد.

نحوه تشخیص فرزند قسمت اول ودوم به چه شکله!؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # امیر پهلوان صادق 1394-02-30 12:35
هنگام نوشتن گزینشگرها در CSS، اگر بین قسمت های گزینشگر از فاصله استفاده کنید، منظور پیمایش بسمت داخل خواهد بود. یعنی اگر بین قسمت اول گزینشگر و قسمت دوم فاصله وجود داشت، این فاصله به معنی فرزند خواهد بود:
با توجه به گزینشگر سه قسمتی زیر:#customers tr.alt td
فاصله بین قسمت اول یعنی customers# و قسمت دوم یعنی tr.alt به صورت زیر تفسیر خواهد شد: تمام tr های با کلاس "alt" که فرزند عنصر با شناسه customers هستند.
برای قسمت سوم، یعنی td داستان به همین صورت خواهد بود.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

آموزش صوتی CSS

بستن
مدرس:

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!