۵) آموزش مقدمات HTML - جدول و جزء به جزء کردن صفحه

به نام خدا 

مروری بر درس های قبلی

بخش اول : ایجاد جدول

برای ایجاد یه جدول باید تگ های Table Row و Table Data رو بین تگ اصلی جدول یعنی Table قرار بدی!

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

افزودن حاشیه و رنگ کردن 

برای ایجاد نظم و خوشکل تر کردن جدول، اول ویژگی Border رو به تگ ِ Table، اضافه کن تا سلول ها، حاشیه دار بشن! 

و بعدش هم ویژگی Bordercolor رو برای رنگ حاشیه ها اضافه کن!

در قدم بعد، ویژگی ِ BackGroundcolor رو برای رنگ پس زمینه اضافه کن!  

 

معادل هگزادسیمال رنگ ها 

همانطور که می بینی اینبار برای تغییر رنگ از اسامی رنگ ها مثل Red و Blue، استفاده نشده!

بلکه از معادل هگزادسیمال ِ آنها استفاده شده، از طریق ِ برنامه هایی مثل Photoshop، میشه معادل هگزادسیمال رنگ های مختلف رو پیدا کرد!

 

تازه علاوه بر اون، می تونی به این سایت بری و بعد از انتخاب رنگ مورد نظرت، معادل ِ هگزادسیمالشو از جلوی Background کپی کنی!

برجسته سازی 

اگه میخوای جدولت برجسته بشه، ویژگی ِ Bordercolor رو بردار و به جاش از دو ویژگی ِ Bordercolordark  و Bordercolorlight استفاده کن! 

 Light ، بالا و سمت چپ ِ جدول رو رنگ می کنه و Dark، پایین و سمت راست جدول رو! 

رنگ روشن رو برای Light و رنگ تیره رو برای Dark انتخاب کن تا جدول برجسته نشون داده بشه!

در ضمن بهتره که رنگ ِ BackGround از لحاظ روشنی، بین Light و Dark باشه! 

اضافه کردن فاضای خالی برای سلول ها

خوب نگاه کن!  مرتضی چسبیده به حاشیه ی سلول!  بقیه هم جاشون تنگه! 

پس لازمه که دو تا ویژگی ِ دیگه به تگ Table اضافه کنی! 

CellPadding، بین محتویات سلول و حاشیه ی سلول فضای خالی ایجاد میکنه!

CellsPacing بین سلول ها فضای خالی ایجاد می کنه!

 

تغییر طول و عرض سلول

با قرار دادن ِ ویژگی های Width و Height در تگ ِ Table Dataمی تونی، عرض و طول سلول رو تغییر بدی!

  

توجه: همونطور که میبینی، سلول هایی که همردیف با سلول ِ علی هستند، به طور خودکار هم ارتفاع با سلول ِ علی شدن و سلولی که زیر سلول ِ علی هست، عرضش با عرض ِ سلول ِ علی یکی شده!

بخش دوم: جزء به جزء کردن صفحه با جدول

می تونی با تگ ِ Table، جدول های بزرگتری برای مرتب کردن یه صفحه ی وب ایجاد کنی!

می تونی به جای متن، توی سلولها با استفاده از تگ ِ Image ، تصویر بزاری!

  

انواع آدرس 

زیر آدرس ِ تصاویری که در جدول هست، خط قرمز کشیده شده!

جفتشون آدرس تصویر هستن ولی آدرس اولی، آدرس تصویری هست که توی کامپیوتر  ِ منه (قبلا از این آدرسا استفاده کرده بودیم!) 

آدرس دومی، آدرس تصویری هست که توی اینترنته!   

از جفتش میشه استفاده کرد، فکر کن و ببین فرق این دو نوع آدرس چیه!