آموزش کامل کدنویسی Html - جلسه سوم |جدول های نامنظم|

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

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

حالا فرض کنید ما میخوایم قالبی شبیه شکل زیر درست کنیم که هیچ کدوم از ردیف هاش تو یک خط نیستن.

همون طور که می بینید عرض قسمت 1 و 2 اندازه هم نیست بنابراین نمیتونه از ترکیب بخش 3 تشکیل شده باشه.

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

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

حالا عرض ستونی که اضافه کردیم را بهش مقدار 1 میدیم و قاب اون را هم بر میداریم (یعنی مقدار صفر قرار میدهیم)، حالا ستون اضافی ما کاملا از بین رفت و دیگه دیده نمیشه!به همین راحتی.

فعلا بحث جدول بندی تموم شد حالا میخوام داخل جدول هامون را یکم پر کنیم تا شباهت بیشتری به یک قالب سایت بده.

1.یک هدر زیبا برای سایتمون طراحی می کنیم و اون را قرار میدیم.

   برای این کار بعد از طراحی هدر و آپلود آن، آن را در تگ <td></td> مربوطه قرار میدیم.

   برای قرار دادن عکس هم یا میتونید از منوی سمت راست دریم ویور گزینه Image را انتخاب کنید و لینک و            توضیحات را وارد کنید.(شکل زیر)

   راه دیگه اینه که خودمون به صورت دستی اون را وارد کنیم، کد قراردادن عکس به صورت زیر است.

2.حالا سراغ سلول هامون میریم تا اون ها را پر کنیم.

در جلسه قبل گفتم که تگ <td> دو خاصیت به نام های Bg color, Background داریم.

حالا با استفاده از این دو عنصر یکم سلول هامون را سر و سامون میدیم.حالا دیگه بستگی به خودتون داره میتونید از هر کدوم از خاصیت هایی که گفتیم استفاده کنید، اما من حالا به عنوان نمونه میخوام یه بک گراند به بالای یکی از سلول ها اضافه کنم.

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

و اون را به عنوان بک گراند تعریف میکنیم، به این شکل:

الان تقریبا کار تمومه اما بک گراندی که ساختیم وسط سلول قرار گرفته.باید یه دستور دیگه اضافه کنیم تا اون بالا یا پائین قرار بگیره.مانند شکل زیر:

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

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

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

موفق باشید

منبع http://ghalebgraph.ir/