close
تبلیغات در اینترنت

آموزش ساخت جدول با اچ تی ام ال و سی اس اس

محل تبلیغات شما

امروز چهارشنبه 21 آذر 1397 شما در سه سوت آموزش هستید.

برای در خواست آموزش اینجا کلیک کنید.

رایتم مرجع وبمستر ایرانی کانال تلگرام سه سوت آموزش محل تبلیغات شما محل تبلیغات شما

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

 

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

 

طراحی جدول با استفاده از css

حاشیه جدول در css

برای اختصاص دادن حاشیه به جدول در css باید از مشخصه border استفاده کنیم . برای اینکه کد css طولانی نشه از این درس سعی میکنیم تمام مشخصه های تکراری رو یکی کنیم و در یک سطر استفاده کنیم.
table , th , td { border : 1px solid #000;}

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

table , th , td {
Border-width:1px ;
Border-style:solid;
Border-color:#000;
}

از طرفی بجای اینکه برای هرکدوم از انتخابگرهای table ، td و th این مقادیر رو جداگانه اختصاص بدیم ، چون تمام مقادیر یکسان هستند ، با استفاده از کاما “,” انتخابگرها رو جدا کردیم.
مشخصه ی border-style میتونه مقادیر متفاوتی رو دریافت کنه ، به عنوان مثال dotted ، dashed ، groove ، double و همچنین مقدار none برای عدم نمایش حاشیه.


اگر به مثال ۱ توجه کرده باشید میبینید که حاشیه ی جدول دوتاست ، یکی مربوط به حاشیه خود جدول (table) و یکی هم مربوط به سلولها (td) . برای اینکه هردوی این حاشیه ها رو باهم یکی کنیم از مشخصه ی border-collapse استفاده میکنیم که دو مقدار رو میتونه دریافت کنه : collapse و separate

 

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

حالا بیایید دوباره به مثال یک نگاه کنیم و ببینیم چه تغییری کرده :

 

 

همونطور که ملاحظه میکنید فقط یکی از دو حاشیه قابل مشاهده است و دیگری حذف شده.

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

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

table { width : 50%;}
th { height : 50px;}

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

 

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

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

td{text-align:right;}
td{height:50px; vertical-align:bottom;}

 

در صورتی که شما از تصویر هم میخواهید درون سلولهای جدول استفاده کنید مقادیر baseline و text-top و text-bottom رو هم امتحان کنید و نتیجه رو بررسی کنید.



 

ایجاد فاصله داخلی (حاشیه داخلی)
برای اینکه بین محتوای سلولهای جدول و حاشیه (border) یک فضایی رو بتونید ایجاد کنید تا جدول بهم ریخته بنظر نرسه میتونید از مشخصه padding استفاده کنید. این مشخصه نه تنها در جدول بلکه در تمام انتخابگرها در css میتونه استفاده بشه و فاصله ی محتوا رو از حاشیه تعیین میکنه.

td{padding:15px;}

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

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

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

th{background-color:#09f;}

 


ما یک جدول کامل رو ایجاد کردیم ، به بعضی ردیفها یک کلاس اضافه کردیم و رنگ اونها رو تغییر دادیم تا سطرهای جدول از هم تفکیک بشوند. حتما کدهای html و css رو در مثال ۴ بررسی کنید و حالتها و مقادیر متفاوت رو امتحان کنید و نتیجه رو بررسی کنید.
برای اضافه کردن توضیحات به جدول و یا زیر نویسی که پایین جدول در کتابها میبینید میتونید از تگ <caption> استفاده کنید که تگ html هست ولی با استفاده از css میتونید اون رو کنترل کنید.



با عضویت در خبرنامه سه سوت آموزش نیازی به مراجعه به سایت ما نخواهید داشت!

ایمیل خود را بدون www وارد کنید!

اشترک در گوگل اشترک در گوگل پلاس اشترک در استامبل آپن ديگ اشترک در کلوب اشترک در فيس نما اشترک در تويتر اشترک در فيسبوک

نام
ایمیل (منتشر نمی‌شود) (لازم)
وبسایت
:) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) :S
نظر خصوصی
مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
کد امنیتیرفرش کد امنیتی