آموزش HTML – قسمت ششم

قبل از شروع این قسمت چند نکته قابل ذکر و مهم رو یاد آوری میکنم:
اول اینکه یکی از بهترین راهها برای یادگیری بهتر تمرینه.پس قسمت های قبلی رو فراموش نکنید و سعی کنید اونها رو مرور کنید.
دوم اینک
ای خودآموز برای استفاده شما دوستان نوشته میشه پس نظرات و پیشنهادات
خودتون رو برای هر چه بهترشدن این خودآموز با ما در میان بزارید.
سوم اینکه
در قسمتهای آینده در نظر دارم به صورت Work Shop و یا به قول خودمون به
صورت عملی آموزش ساختن یک وب سایت رو از ابتدا شروع کنم.
این
کار مستلزم این است که یک سری پیش نیاز رو یاد بگیرید پس همچنان با
استفاده از notepad به نوشت کدهای html بپردازید که بسیار مهمه و با ما
همراه باشید.
Table ها
همیشه
برای ساختن هر سازه ای احتیاج به یک استخوانبندی وجود دارد. این موضوع
در مورد یک صفحه وب نیز صادق است و برای ساختن یک صفحه وب ( با توجه به
ایده ما برای طراحی ظاهر آن صفحه ) احتیاج به یک ساختار کلی است که در
اکثر موارد از دید کاربران و باز دیدکنندگان صفحات وب مخفی می ماند.
این
ساختار کلی در اکثریت موارد به وسیله table ها و در طراحی مدرن به وسیله
تگ های div (که کاربرد بسیار زیادی در طراحی و ساخت صفحات وب دارد) صورت
می گیرد.
در اینجا به table ها می پردازیم و در قسمتهای آینده به صورت مفصل به تگهای div خواهیم پرداخت.
Table ها به وسیله تگ به مرورگرها معرفی میشوند و دارای ستون وسطر هستند.
ستون
ها به وسیله تگهای مشخص
میشوند.لازم به ذکر است که تگهای و نوشته شده اند در آن سلول نمایش داده میشوند و در صورتی که
هیچ عنصری در بین این تگها نباشد سلول به صورت خالی نمایش داده می شود.
عناصر کوچکتر تشکیل دهنده هر جدول را سلول می نامیم.در مثال بالا جدول دارای چهار سلول است.
Table های تو در تو
یکی
دیگر از خصوصیات این جداول قابلیت تو در تو قرار گرفتن این جداول است به
این معنی که یک جدول می تواند در داخل سلول یک جدول دیگر قرار گیرد و زیر
مجموعه جدول بالاتر از خود باشد .به مثالی در این مورد توجه کنید :

و سترها به وسیله تگهای
به تنهایی کاربردی ندارند و لزوما باید همراه تگ در کدها قرار بگیرند. در زیر نمونه ای از یک table با یک ستون و یک سطر می بینید. به نحوه باز شدن وبسته شدن تگها توجه کنید ( قانون تگهای باز و بسته – قسمت اول آموزش html ) این table می تواند تعداد دلخواهی ستون وسطر داشته باشد و محدودیت از این نظر وجود ندارد. برای اینکه بتوانیم کنترل بیشتری بر روی ظاهر این جدول ها داشته باشیم می توانیم از خصوصیت های این جدول ها استفاده کنیم. طول و عرض table ها دو خصوصیت width و height این توانایی را به ما میدهد که طول و ارتفاع این جدولها را تععین کنیم. این طول و عرض می توانند به صورت وابسته و یا ثابت باشند.در حالت وابسته طول و عرض با درصدی از عرض کل صفحه مشخص می شود و در اندازه گذاری ثابت مقداربه صورت ثابت به جدولها و سلولها داده می شود. این جدول دارای دو ستون و یک سطر با ارتفاع و عرض ۲۰۰ پیکسل است. صوصیت Border مرز بین این سطر ها وستونها با استفاده از خطوط (border ) مشخص میشود که میتوان با استفاده از این خصوصیت آن را کنترل کرد. مقدار خصوصیت border نشان دهنده ضخامت آن است ) واحد پیکسل ( و در صورتی که مقدار آن صفر باشد ( border=”۰” ) هیچ border نمایش داده نمیشود . Align و یا چینش در سطرها و ستون ها هر سطر و یا ستون در یک جدول می تواند چینش مختص به خود را داشته باشد یعنی عناصر داخل آن سطر و یا ستون از چینش آن سطر و یا ستون پیروی میکنند. به طور مثال : ستون اول – سطر اول ستون دوم – سطر اول ستون اول – سطر دوم ستون دوم – سطر دوم در این مثال جدول از دو سطر و دو ستون تشکیل شده است که در مثال مشخص شده است. کلیه سطر ها وستون ها از چینشی که به تگ table در ابتدای مثال داده شده است پیروی میکنند و چینش همه سطرها و ستونها center است . میتوان به هر یک از سطرها و ستونها نیز به تنهایی چینش و align داد به مثال زیر توجه کنید: ستون اول – سطر اول ستون دوم – سطر اول ستون اول – سطر دوم ستون دوم – سطر دوم در مثالها ملاحضه میکنید که نوشته هایی که در بین تگهای

ستون اول – سطر اول	ستون اول – سطر اول ستون دوم – سطر اول ستون اول – سطر دوم ستون دوم – سطر دوم
ستون اول – سطر دوم	ستون دوم – سطر دوم

در
این مثال ملاحظه می کنید که یک جدول با ۲ سطر و ستون داخل یکی از سلولهای
جدول بالاتری خود با ۲ سطر و ستون قرار گرفته این قابلیت کمک بسیاری به
طراحان صفحات وب در چینش این صفحات می کند.
Background color ( رنگ پس زمینه )
هر جدول و یا هر سلول و یا هر سطر و یا ستون می تواند دارای رنگ پس زمینه مختص به خود باشد.به مثال زیر توجه کنید:

ستون اول – سطر اول	ستون دوم – سطر اول
ستون اول – سطر دوم	ستون دوم – سطر دوم

ملاحضه
مینمایید که رنگ پس زمینه جدول به رنگ قرمز است ولی رنگ سلول ستون اول –
سطر اول به رننگ آبی است و چون خودش دارای رنگ پس زمینه است از رنگ پس
زمینه کل جدول پیروی نمی کند.
Table ها دارای خصوصیات بسیاری هستند که در طول تمرین با آنها آشنا خواهید شد و آنها را تجربه می کنید.
برای آشنایی بیشتر با خصوصیات جدولها و کاربردهای بسیار آن در طراحی صفحات وب با ما باشید.
فایل Pdf این خود آموز به همراه مثالهای آن در یک فایل قرار گرفته و برای راحتی شما دوستان در اختیارتان گذاشته شده است.