ساخت جدولی زیبا در html

جلسه ی اول آموزش html

ساخت جدولی زیبا در html

در جلسه ی قبل به شما آموزش دادیم که چطور می توانید، جدول بسازید و این جلسه را، تحت عنوان ساخت جدولی زیبا در html را شروع می کنیم.

روش دیگر استفاده از css در html

گفته شد که برای استفاده از css در html سه روش داریم.

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

روش سوم به این گونه است که ما کد های css خود را درون یک فایل جدا می نویسیم سپس با استفاده از تگ link آن را به فایل html خود متصل می کنیم.

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

برای اینکه اتصال بین فایل css و فایل html خود را برقرار کنید، کد زیر را در بخش head سایت خود قرار دهید.

سپس تنها کاری که باید انجام دهید این است که به جای location آدرس دقیق فایل css خود را وارد کنید.(برای ساخت فایل css مانند ساخت فایل hml عمل کنید با این تفاوت که تنها پسوند فایل خود را css قرار دهید.)

اتصال به همین راحتی برقرار شد و حال می توانید کد ها css خود را دورن فایل css قرار دهید.

تغییر رنگ پس زمینه عناصر در css

برای این کار شما باید از دستور background استفاده کنید که به معنای پس زمینه است. سپس رنگی را که مد نظر دارید بنویسید(red,yellow و…)

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

فایل html

در بالا و در خط سوم شما تگ link را مشاهده می کنید که در بالا در مورد آن توضیح داده شد.

نام فایلی که من کد های css خود را درون آن قرار می دهم style.css است. همانطور که مشاهده می کنید نام این فایل در جلوی href نوشته شده است. در خط ششم هم می توانید تگ h2 را مشاهده کنید که قصد داریم در فایل css به آن استایل دهیم.

فایل css ما

موارد بالا در فایل css قرار گرفته اند.

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

و سپس ما استایل background را داده ایم که به معنای پس زمینه است. جلوی این دستور  مقدار آن را red که به معنای رنگ قرمز است قرار داده ایم.

خروجی به صورت زیر است.

این متن به صورتی نمایش داده می شود که پس زمینه ی قرمز دارد

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

تغییر پس زمینه ی جداول و ساخت جدولی زیبا در html

می رویم سراغ مبحث ساخت جدولی زیبا در html.

برای این کار از همان روش قبل استایل دهی استفاده می کنیم.

و از  دستور background برای تغییر پس زمینه بهره می گیریم.

به کد زیر توجه کنید.

فایل html

همانطور که مشاهده می کنید. ما یک جدول با 2 طبقه و سه ستون ساخته ایم.

فایل css

در بالا هم به مرورگر گفته ایم که کل پس زمینه ی تگ table را قرمز کن.

و خروجی ما.

جدول با پس زمینه ی قرمز

در بالا شما می توانید مشاهده کنید که پس زمینه ی جدول قرمز شده است

همانطور که می بینید تا هرجایی که تگ table قرار دارد رنگ پس زمینه ی آن قرمز است.

و اگر که شما قصد داشته باشید که تنها عناوین جدول پس زمینه ی قرمز داشته باشند کد html به همانند مثال بالا می باشد و کدهای css به صورت زیر تغییر دهید.

خروجی:

فقط رنگ عنوان تغییر کرد

رنگ پس زمینه ی th تغییر کرد

به همین ترتیب شما قادر خواهید بود پس زمینه ی هر قسمت از جداول خود را تغییر دهید و جداول زیبایی را خلق کنید.

تغییر رنگ ستون ها به صورت یکی در میان در جسله ی ساخت جدولی زیبا در html

شاید با خود فکر کنید که حتما این عمل کار بسیار سختی است ولی کاملا اشتباه می کنید. سخت که نیست بلکه بسیار هم آسان است.

برای اینکار به کد html خود چند طبقه اضافه می کنیم.

برای درک بهتر، تگ های موجود در کد بالا را برای شما توضیح می دهم.(البته نه تگ های ابتدایی)

تگ link: ما با استفاده از این تگ اتصال مابین فایل html و فایل css را برقرار می کنیم.

تگ table: طبقه و ستون جدول درون این تگ است.

تگ tr: طبقه را مشخص می کنید.

تگ th: ستون های عنوان را مشخص می کنید.

تگ td: ستون ها را مشخص می کند.

فایل css ما

در اول شما جلوی tr عبارت nth-child(even) را مشاهده می کنید که به این معناست که این استایل را برای تگ های زوج tr قرار بده.

و استایل دوم عکس آن عمل می کند. یعنی ستون های زوج به رنگ قرمز نمایش داده شود.

و خروجی به صورت زیر است.

تغییر رنگ یکی در میان

خروجی به این صورت است

در صورتی که قصد داشته باشید هر تگ دیگر را به این صورت به نمایش در بیاورید، کافی است که جای تگ tr تگ مورد نظر را قرار دهید.

به همین راحتی.

یکی کردن حاشیه های جدول

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

توض