جستجو برای:
سبد خرید 0
  • مداد سبز
  • دوره های آموزشی
    • آموزش برنامه نویسی
    • آموزش پایتون
    • آموزش PHP
    • آموزش متلب
    • آموزش SQl
    • آموزش سالیدیتی
    • آموزش Asp.net core
    • آموزش ++C
    • آموزش vue js
    • آموزش جاوا
  • وبلاگ
    • مقالات آموزش برنامه نویسی
    • مقالات پایتون
    • مقالات PHP
    • مقالات آموزش جاوا اسکریپت
    • مقالات آموزش فلاتر
    • مقالات کسب درآمد
  • داستان مداد سبز
  • تماس با مداد سبز
  • تدریس در مداد سبز
  • 09920882904
  • info@medadsabz.com
0
مداد سبز
  • مداد سبز
  • دوره های آموزشی
    • آموزش برنامه نویسی
    • آموزش پایتون
    • آموزش PHP
    • آموزش متلب
    • آموزش SQl
    • آموزش سالیدیتی
    • آموزش Asp.net core
    • آموزش ++C
    • آموزش vue js
    • آموزش جاوا
  • وبلاگ
    • مقالات آموزش برنامه نویسی
    • مقالات پایتون
    • مقالات PHP
    • مقالات آموزش جاوا اسکریپت
    • مقالات آموزش فلاتر
    • مقالات کسب درآمد
  • داستان مداد سبز
  • تماس با مداد سبز
  • تدریس در مداد سبز
آخرین اطلاعیه ها
جهت نمایش اطلاعیه باید وارد سایت شوید
ورود / عضویت

استایل دهی به جدول در CSS | کد CSS برای جدول + 11 مثال عملی

2022-10-17
ارسال شده توسط support
برنامه نویسی، CSS
استایل-دهی-به-جدول-در-CSS

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

کاربرد html در ساخت جدول

کاربرد html در ساخت جدول

همانطور که میدانید اگر ما صفحات وب را یک ساختمان در نظر بگیریم html یا Hyper Text Markup Language در صفحات وب همانند اسکلت ساختمان عمل میکند و CSS وظیفه زیبا کردن آن ساختمان را به عهده دارد، اما شما برای استایل دهی به جدول های خود با css در ابتدا باید یک جدول از جنسhtml  را داشته باشید چرا که پایه ای این کار بر اساس این زبان نشانه گذاری نوشته میشود.

اگر هنوز اطلاعات زیادی درباره زبان نشانه گذاری html ندارید و دوست دارید با آن آشنا شوید پیشنهاد میکنم در ابتدا مقاله HTML چیست؟ را مطالعه کنید و یا اگر دوست دارید بدانید که چرا به HTML زبان نشانه گذاری گفته میشود میتوانید مقاله چرا HTML زبان برنامه نویسی نیست را مطالعه کنید، تا یک دید کلی نسبت به ساخت جدول با html و استایل دهی جدول با css پیدا کنید.

جدول در html چیست؟

حال ممکن است این سوال به ذهن شما خطور کند که جدول چیست؟ جدول های سطح وب با جدول هایی که در کتاب ها و ویدیو های آموزشی و در دنیای واقعی دیده ایم هیچ تفاوتی ندارد و نگران این نباشید که ساخت جدول در آموزش html قرار است کار دشواری باشد، در واقع قرار است که همان جدول هایی که در ابتدا از جنس کاغذ روی کتاب ها هستند به جنس کد دربیاوریم. جدول ها مجموعه ای از ردیف ها و ستون ها هستند که انواع گوناگونی از شکل و شمایل آن ها وجود دارد که از طریق آن ها میتوانیم هر نوع داده و اطلاعاتی که نیاز داریم را وارد آن ها کنیم، این کار باعث میشود تا اطلاعات ما یک دست باشند و خواندن ان ها برای کاربران راحت تر باشد. در انتها همین مقاله 11 نمونه از جدول سایت که با CSS استایل دهی شده اند را در اختیار شما گذاشته ایم.

مطالعه مقاله
بهترین ویرایشگر کد برای html

آموزش ساخت جدول در html | مداد سبز

اما در ادامه ممکن است این سوال ذهن شما را قلقلک دهد که در زمان گذشته وقتی استفاده زیادی از CSS نمیشد جداول چگونه طراحی و استایل دهی میشدند؟ در گذشته شما اگر وارد هر سایتی که میشدید میتوانستید رد پایی از table ها را ببینید، این میزان استفاده تا حدی جلوتر رفت که بسیاری از سایت ها قالب و نمای خود را بر اساس جداول طراحی میکردند، این امر در زمان خود کار خوبی بود چرا که همانطور که اشاره کردیم

جدول ها باعث به اشتراک گذاشته شدن اطلاعات در یک بستر مناسب میشدند، اما امروزه با وجود زبان CSS این کاربرد جداول اچ تی ام ال کم رنگ تر شده است البته نباید اینگونه به داستان نگاه کنیم که از این جداول هیچ استفاده ای نمیشود! در حالی که برای طراحی قالب ایمیل این table ها بیشترین استفاده و کارایی را دارند.

آموزش ایجاد جدول با HTML

برای اینکه بخواهیم با استفاده از html یک جدول ایجاد کنیم شما در مرحله اول میتوانید آموزش مقدماتی HTML را که رایگان است مشاهده کنید و یا تا ادامه این مقاله همراه ما باشید.
برای ساخت جدول با اچ تی ام ال ابتدا باید از تگ باز جدول یا <table> شروع کنیم حال پس از ایجاد این تگ برای اینکه بتوانیم از سطر ها و ستون ها استفاده کنیم از تگ های <tr> سطر ها را ترسیم کرده و برای ایجاد سلول ها یا ستون ها از تگ <td> میبایست استفاده کنیم. در تصویر زیر میتوانید نمونه یک جدول ایجاد شده با تگ <table> را مشاهده کنید.

آموزش ایجاد جدول با HTML | مداد سبز

تگ های ساخت جدول در html

برای اینکه آموزش برنامه نویسی را عملی تر جلو ببریم در اینجا لیستی از تگ های جدول در html را در اختیارتان گذاشته ایم که در ساخت جدول باید ان ها را در ذهن خود داشته باشید. برای به یاد سپردن این تگ ها نیازی به حفظ کردن ان ها نیست و سعی کنید با تمرین کردن این تگ ها را به ذهن خودتان بسپارید.

مطالعه مقاله
تگ ‌های معنایی(Semantic Tags) در HTML۵

تگ های ساخت جدول در html | مداد سبز

چند نکته مهم: سلول های جدول که به عنوان هدرهای ستون یا سرصفحه های ردیف عمل می کنند باید از عنصر <th> (هدر جدول) استفاده کنند.
برای تعریف ستون های جدول برای یک ظاهر طراحی شده می توانید از <col> و <colgroup>استفاده کنید. با این حال ، تعدادی از محدودیت ها با این عمل وجود دارد.با استفاده از عنصر <caption> می توان عنوان را به جدول اضافه کرد.

استایل دهی به جدول با css

در این قسمت بعد از اینکه جدول های خود را طراحی کردید سراغ استایل دهی جدول با css میرویم. اگر هنوز با زبان برنامه نویسی CSS اشنا نیستید پیشنهاد میکنم در ابتدا مقاله CSS چیست؟ را مطالعه کنید. البته این نکته را به یاد داشته باشید که جدول ها در ابتدا هیچ ظاهری ندارند و ما با استفاده از سی اس اس به ان ظاهر زیبا خواهیم داد. مانند جدول زیر:

فرم دهی به جداول در CSS | مداد سبز

ویژگی خطوط (table borders) در CSS

از این ویژگی در طراحی جدول میتوان به آن ها خطوط اضافه کرد که در مثال زیر میتوانید نمونه آن را مشاهده کنید:

ویژگی خطوط (table borders) در CSS | مداد سبز

همچنین در نمونه کد ویژگی خطوط (table borders) در CSS را میتوانید مشاهده کنید که در این عنصر table نام و نام خانوادگی افراد را نمایش دادیم حال برای اینکه بتوانیم مرز بین ستون های جدول را از هم دیگر جدا کنیم از ویژگی border که روی th، td و table تاثیر گذاشته است را تعیین کنیم که در نهایت تبدیل به جدول بالا میشود.

نمونه کد ویژگی خطوط (table borders) در CSS | مداد سبز

ویژگی یکی کردن خطوط جدول (collapse) در CSS

با این ویژگی در جدول شما میتوانید خطوط بین جداول را از بین ببرید و یک جدول واحد ایجاد کنید. در تصویر زیر میتوانید خاصیت استفاده از ویژگی collapse را مشاهده کنید.

ویژگی یکی کردن خطوط جدول (collapse) در CSS | مداد سبز

همچنین در تصویر زیر میتوانید نمونه کد یکی کردن خطوط جدول در css را مشاهده کنید.

نمونه کد ویژگی یکی کردن خطوط جدول (collapse) در CSS | مداد سبز

ویژگی عرض و ارتفاع جدول (High & width) در CSS

همانطور که از اسم این ویژگی مشخص شما میتوانید از طریق آن ارتفاع و عرض جدول خود را با ان مشخص کنید. در تصویر زیر میتوانید نمونه ای از این ویژگی را مشاهده کنید.

ویژگی عرض و ارتفاع جدول (High & width) در CSS | مداد سبز

همچنین در تصویر زیر میتوانید نمونه کد ویژگی عرض و ارتفاع جدول در css را مشاهده کنید.

نمونه کد ویژگی عرض و ارتفاع جدول در css | مداد سبز

ویژگی تراز بندی محتوا درون جدول (text-align) در CSS

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

مطالعه مقاله
آموزش نصب فلاتر بر روی ویندوز

ویژگی تراز بندی محتوا درون جدول (text-align) در CSS | مداد سبز

همچنین در تصویر زیر میتوانید نمونه کد ویژگی درون جدول (text-align) در CSS را مشاهده کنید.

نمونه کد ویژگی درون جدول (text-align) در CSS | مداد سبز

ویژگی تنظیمات عمودی جدول (Vertical-align) در CSS

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

ویژگی تنظیمات عمودی جدول (Vertical-align) در CSS | مداد سبز

همچنین در تصویر زیر میتوانید نمونه کد ویژگی تنظیمات عمودی جدول (Vertical-align) در CSS را مشاهده کنید.

نمونه کد ویژگی تنظیمات عمودی جدول (Vertical-align) در CSS | مداد سبز

ویژگی پدینگ (Padding) جدول در CSS

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

ویژگی پدینگ (Padding) جدول در CSS | مداد سبز

در تصویر زیر میتوانید نمونه کد ویژگی padding در CSS را مشاهده کنید.

نمونه کد ویژگی padding در CSS | مداد سبز

ویژگی Hover برای جدول در CSS

از ویژگی هاور زمانی استفاده میشود که شما بخواهید وقتی موس بر روی هر یک از ستون ها رفت حالت و رنگ ان تغییر کند که در تصویر زیر نمونه آن را میتوانید ببینید.

ویژگی hover برای جدول در CSS | مداد سبز

در تصویر زیر میتوانید نمونه کد ویژگی hover را مشاهده کنید.

نمونه کد ویژگی hover در CSS | مداد سبز

ویژگی جدول های رنگی در CSS

از این ویژگی میتوان استفاده کرد تا سطر جدول ها هر کدام رنگ دلخواه خودمان را داشته باشد که میتوانید نمونه ان را ببینید.

ویژگی جدول های رنگی در CSS | مداد سبز

جدول ریسپانسیو (Responsive) در CSS

واکنش گرایی یا responsive بودن در تمام صفحات وب مهم است شما میتوانید با این ویژگی جدولی واکنش گرا طراحی کنید که در صورت تغییر اندازه صفحه اطلاعات بهم ریخته و نامنظم نباشد برای اینکار این ویژگی یک اسکرولر افقی را در پایین جدول اضافه میکند تا افراد بتوانند راحت تر محتوای دیگر جدول را مشاهده کنند.

جدول ریسپانسیو (Responsive) در CSS | مداد سبز

نتیجه گیری

در این مقاله سعی کردیم تا روش استایل دهی به جدول در css را به شما اموزش دهیم و اگر علاقه مند هستید تا اموزش های بیشتر زبان css را مشاهده کنید میتوانید به صفحه آموزش CSS مراجعه کنید. و یا اگر سوالی داشتید میتوانید در قسمت کامنت ها بپرسید هر چند با روش های گفته شده به راحتی میتوانید جدول های خود را استایل دهی کنید.

قبلی زبان دارت (Dart) چیست؟ | آموزش متغیر ها و داده ها + بازار کار دارت در سال 2022
بعدی زبان برنامه نویسی دلفی (Dlephi) چیست؟ | 12 حقیقت جالب درباره دلفی

دیدگاهتان را بنویسید لغو پاسخ

جستجو برای:
دسته‌ها
  • #C
  • ++C
  • CSS
  • HTML
  • PHP
  • SQL server
  • اندروید
  • برنامه نویسی
  • پایتون
  • جاوا
  • جاوا اسکریپت
  • دارت
  • دلفی
  • سوئیفت
  • فلاتر
  • متلب
  • وبلاگ
  • یادگیری ماشین
  • محبوب
  • جدید
  • دیدگاه ها

لوگو مدادسبز    مداد سبز

آکادمی مداد سبز از سال 1400 با همکاری اساتید با سابقه و کارشناسان مجرب آموزشی-مشاوره ای با هدف ارتقای کیفیت آموزش آنلاین در کشور جهت تربیت نیرو های متخصص، در حال فعالیت می باشد و در این راستا قصد دارد آموزش های آنلاین با کیفیت و مهارت محور را در زمینه های مختلف در اختیار دانشجویان قرار دهد.

دسترسی سریع
  • مداد سبز
  • داستان مداد سبز
  • تماس با مداد سبز
  • حریم خصوصی
  • شرایط بازگشت وجه
  • تدریس در مداد سبز

شبکه های اجتماعی

مجوز های مداد سبز

اینماد
logo-samandehi
تمامی حقوق سایت متعلق به پلتفرم آموزش آنلاین مداد سبز می باشد.
اشتراک گذاری در شبکه های اجتماعی
ارسال به ایمیل
https://medadsabz.com/?p=18431
ورود ×
کد تایید
لطفاً کد تأیید ارسال شده به را تایپ کنید
ثبت
ورود با گذرواژه یکبار مصرف
ارسال مجدد گذرواژه یکبار مصرف(00:180)
آیا حساب کاربری ندارید؟
ثبت نام

ارسال مجدد گذرواژه یکبار مصرف (00:180)
بازگشت به ورود
  • (+93) Afghanistan
  • (+355) Albania
  • (+213) Algeria
  • (+1) American Samoa
  • (+376) Andorra
  • (+244) Angola
  • (+1) Anguilla
  • (+1) Antigua
  • (+54) Argentina
  • (+374) Armenia
  • (+297) Aruba
  • (+61) Australia
  • (+43) Austria
  • (+994) Azerbaijan
  • (+973) Bahrain
  • (+880) Bangladesh
  • (+1) Barbados
  • (+375) Belarus
  • (+32) Belgium
  • (+501) Belize
  • (+229) Benin
  • (+1) Bermuda
  • (+975) Bhutan
  • (+591) Bolivia
  • (+599) Bonaire, Sint Eustatius and Saba
  • (+387) Bosnia and Herzegovina
  • (+267) Botswana
  • (+55) Brazil
  • (+246) British Indian Ocean Territory
  • (+1) British Virgin Islands
  • (+673) Brunei
  • (+359) Bulgaria
  • (+226) Burkina Faso
  • (+257) Burundi
  • (+855) Cambodia
  • (+237) Cameroon
  • (+1) Canada
  • (+238) Cape Verde
  • (+1) Cayman Islands
  • (+236) Central African Republic
  • (+235) Chad
  • (+56) Chile
  • (+86) China
  • (+57) Colombia
  • (+269) Comoros
  • (+682) Cook Islands
  • (+225) Côte d'Ivoire
  • (+506) Costa Rica
  • (+385) Croatia
  • (+53) Cuba
  • (+599) Curaçao
  • (+357) Cyprus
  • (+420) Czech Republic
  • (+243) Democratic Republic of the Congo
  • (+45) Denmark
  • (+253) Djibouti
  • (+1) Dominica
  • (+1) Dominican Republic
  • (+593) Ecuador
  • (+20) Egypt
  • (+503) El Salvador
  • (+240) Equatorial Guinea
  • (+291) Eritrea
  • (+372) Estonia
  • (+251) Ethiopia
  • (+500) Falkland Islands
  • (+298) Faroe Islands
  • (+691) Federated States of Micronesia
  • (+679) Fiji
  • (+358) Finland
  • (+33) France
  • (+594) French Guiana
  • (+689) French Polynesia
  • (+241) Gabon
  • (+995) Georgia
  • (+49) Germany
  • (+233) Ghana
  • (+350) Gibraltar
  • (+30) Greece
  • (+299) Greenland
  • (+1) Grenada
  • (+590) Guadeloupe
  • (+1) Guam
  • (+502) Guatemala
  • (+44) Guernsey
  • (+224) Guinea
  • (+245) Guinea-Bissau
  • (+592) Guyana
  • (+509) Haiti
  • (+504) Honduras
  • (+852) Hong Kong
  • (+36) Hungary
  • (+354) Iceland
  • (+91) India
  • (+62) Indonesia
  • (+98) Iran
  • (+964) Iraq
  • (+353) Ireland
  • (+44) Isle Of Man
  • (+972) Israel
  • (+39) Italy
  • (+1) Jamaica
  • (+81) Japan
  • (+44) Jersey
  • (+962) Jordan
  • (+7) Kazakhstan
  • (+254) Kenya
  • (+686) Kiribati
  • (+965) Kuwait
  • (+996) Kyrgyzstan
  • (+856) Laos
  • (+371) Latvia
  • (+961) Lebanon
  • (+266) Lesotho
  • (+231) Liberia
  • (+218) Libya
  • (+423) Liechtenstein
  • (+370) Lithuania
  • (+352) Luxembourg
  • (+853) Macau
  • (+389) Macedonia
  • (+261) Madagascar
  • (+265) Malawi
  • (+60) Malaysia
  • (+960) Maldives
  • (+223) Mali
  • (+356) Malta
  • (+692) Marshall Islands
  • (+596) Martinique
  • (+222) Mauritania
  • (+230) Mauritius
  • (+262) Mayotte
  • (+52) Mexico
  • (+373) Moldova
  • (+377) Monaco
  • (+976) Mongolia
  • (+382) Montenegro
  • (+1) Montserrat
  • (+212) Morocco
  • (+258) Mozambique
  • (+95) Myanmar
  • (+264) Namibia
  • (+674) Nauru
  • (+977) Nepal
  • (+31) Netherlands
  • (+687) New Caledonia
  • (+64) New Zealand
  • (+505) Nicaragua
  • (+227) Niger
  • (+234) Nigeria
  • (+683) Niue
  • (+672) Norfolk Island
  • (+850) North Korea
  • (+1) Northern Mariana Islands
  • (+47) Norway
  • (+968) Oman
  • (+92) Pakistan
  • (+680) Palau
  • (+970) Palestine
  • (+507) Panama
  • (+675) Papua New Guinea
  • (+595) Paraguay
  • (+51) Peru
  • (+63) Philippines
  • (+48) Poland
  • (+351) Portugal
  • (+1) Puerto Rico
  • (+974) Qatar
  • (+242) Republic of the Congo
  • (+40) Romania
  • (+262) Runion
  • (+7) Russia
  • (+250) Rwanda
  • (+290) Saint Helena
  • (+1) Saint Kitts and Nevis
  • (+508) Saint Pierre and Miquelon
  • (+1) Saint Vincent and the Grenadines
  • (+685) Samoa
  • (+378) San Marino
  • (+239) Sao Tome and Principe
  • (+966) Saudi Arabia
  • (+221) Senegal
  • (+381) Serbia
  • (+248) Seychelles
  • (+232) Sierra Leone
  • (+65) Singapore
  • (+1) Sint Maarten
  • (+421) Slovakia
  • (+386) Slovenia
  • (+677) Solomon Islands
  • (+252) Somalia
  • (+27) South Africa
  • (+82) South Korea
  • (+211) South Sudan
  • (+34) Spain
  • (+94) Sri Lanka
  • (+1) St. Lucia
  • (+249) Sudan
  • (+597) Suriname
  • (+268) Swaziland
  • (+46) Sweden
  • (+41) Switzerland
  • (+963) Syria
  • (+886) Taiwan
  • (+992) Tajikistan
  • (+255) Tanzania
  • (+66) Thailand
  • (+1) The Bahamas
  • (+220) The Gambia
  • (+670) Timor-Leste
  • (+228) Togo
  • (+690) Tokelau
  • (+676) Tonga
  • (+1) Trinidad and Tobago
  • (+216) Tunisia
  • (+90) Turkey
  • (+993) Turkmenistan
  • (+1) Turks and Caicos Islands
  • (+688) Tuvalu
  • (+1) U.S. Virgin Islands
  • (+256) Uganda
  • (+380) Ukraine
  • (+971) United Arab Emirates
  • (+44) United Kingdom
  • (+1) United States
  • (+598) Uruguay
  • (+998) Uzbekistan
  • (+678) Vanuatu
  • (+58) Venezuela
  • (+84) Vietnam
  • (+681) Wallis and Futuna
  • (+212) Western Sahara
  • (+967) Yemen
  • (+260) Zambia
  • (+263) Zimbabwe
مرورگر شما از HTML5 پشتیبانی نمی کند.