آموزش طراحی وب سایت - قسمت ششم
آموزش طراحی وب سایت - قسمت ششم
در این جلسه ازآموزش طراحی وب سایت مبحث جدول با موضوعات زیر مطرح می شود : ، چگونگی ایجاد جدول در طراحی وب سایت ، افزودن کادر به جدول ، افزودن عنوان به جدول در وب سایت ، افزودن رنگ به جدول ، افزودن تصویر پس زمینه به جدول ، تراز کردن متن در جدول ، تنظیم اندازۀ جدول درطراحی وب سایت ، ادغام خانه های جدول ، تنظیم نمای ظاهری خانه های جدول ، جدول های تودرتو ، خلاصه جلسه ششم آموزش طراحی وب سایت
جلسه ششم :
مباحث مطرح شده در این جلسه از آموزش طراحی وب سایت :
جدول :
- چگونگی ایجاد جدول
- افزودن کادر به جدول
- افزودن عنوان به جدول در وب سایت
- افزودن رنگ به جدول
- افزودن تصویر پس زمینه به جدول
- تراز کردن متن در جدول
- تنظیم اندازه جدول در طراحی وب سایت
- ادغام خانه های جدول
- تنظیم نمای ظاهری خانه های جدول
- جدول های تودرتو
- خلاصه جلسه ششم آموزش طراحی وب سایت
جدول ها
جدول یکی از عناصر بسیار مفید در طراحی صفحات وب سایت است. جدول مجموعه ای از اطلاعات است که به صورت تعدادی سطر و ستون سازماندهی شده است. به عنوان مثال لیستی از قیمت ها، فاکتور فروش و یا لیست نمرات دانشجویان را می توان در جدول نمایش داد. جدول ها همچنین برای بخش بندی صفحات و دستیابی به صفحات زیباتر بسیار مناسب است. در این جلسه آموزش طراحی وب سایت با نحوۀ کار با جدول ها در HTML آشنا خواهیم شد.
چگونگی ایجاد جدول در طراحی وب سایت
برای ایجاد جدول در HTML از تگ TABLE استفاده می شود. این تگ با /TABLE پایان می یابد. در داخل این تگ برای ایجاد سطر از تگ TR و برای ایجاد هر خانه از جدول از تگ TH یا TD استفاده می شود. تگ TH برای خانه های عنوان و تگ TD برای خانه های عادی استفاده می شود.
مثال:
نکته: یکی از کاربردهای بسیار خوب جدول، در سازماندهی و طراحی زیباتر صفحات وب سایت است. به عنوان مثال شما می توانید با استفاده از جدول یک صفحه را به چند قسمت تقسیم کرده و در هر قسمت از یک پاراگراف، تصویر، ویدیو و یا هر عنصر دیگر استفاده نمایید. برای ایجاد تصویر در یک خانه از جدول، می توانید در داخل تگ TH یا TD از تگ IMG استفاده نمایید.
افزودن کادر به جدول
جدول ها در HTML در حالت معمول بدون کادر می باشند. در جدول مثال قبل، هیچ کاری جهت جداسازی سطرها و ستون های جدول، نمایش داده نمی شود. برای افزودن کادر به جدول باید از ویژگی BORDER=’’?’’ در تگ TABLE استفاده کرد. به جای ? ضخامت کادر برحسب پیکسل قرار می گیرد. حالت پیش فرض آن مقدار صفر است، که در این صورت جدول بدون کادر ظاهر خواهد شد.
نکته: برای تعیین رنگ کادر در جدول از ویژگی BORDERCOLOR=’’?’’ استفاده می شود. به جای ? عدد رنگ یا مقدار هگزادسیمال آن قرار می گیرد.
مثال:
افزودن عنوان به جدول در وب سایت
هر جدول می تواند دارای یک عنوان باشد، که این عنوان می تواند در بالا یا پایین جدول نمایش یابد. عنوان جدول، متن کوتاهی در مورد اطلاعات موجود در جدول است. برای افزودن عنوان به جدول، از تگ CAPTION بلافاصله در زیر تگ TABLE استفاده می شود. این تگ با /CAPTION پایان می یابد. اغلب مرورگرهای وب، عنوان را در وسط جدول و به طور پیش فرض در بالای جدول نمایش می دهند.
مثال :
نکته: برای نمایش عنوان در پایین جدول، از ویژگی ALIGN=’’bottom’’ در تگ CAPTION استفاده می شود.
افزودن رنگ به جدول
BGCOLOR=’’?’’با می توان رنگ زمینۀ جدول را تعیین کرد. به جای ? عدد رنگ و یا مقدار هگزادسیمال آن قرار داده می شود. این رنگ می تاند برای یک خانه از جدول، یک سطر، یک گروه از سطرها، یک گروه از ستون ها و یا کل جدول اعمال گردد. در هر حالت لازم است ویژگی موردنظر در همان تگ استفاده شود. به عنوان مثال اگر می خواهید فقط رنگ یک خانه از جدول را تعیین نمایید، از این ویژگی فقط در تگ TH یا TD متناظر با همان خانه استفاده نمایید.
مثال: تعیین رنگ سطر اول از جدول مثال های قبل به رنگ قرمز.
افزودن تصویر پس زمینه به جدول
BACKGROUND=’’?’’ می توان تصویر پس زمینۀ کل جدول و یا فقط یک خانه از آن را تعیین کرد. به جای ? باید مسیر و نام فایل تصویر پس زمینه را قرار داد. این ویژگی در تگ های TABLE ، TH و TD قابل استفاده است.
توجه: برای یافتن تصاویر پس زمینۀ مناسب، می توانید به سایت های اینترنتی زیر مراجعه نمایید.
× www.nepthys.com/textures
× www.imagine.metanet.com
مثال: ایجاد جدولی با تصویر پس زمینه به شکل آسمان ابری که این تصویر در فایل 1.jpg از پوشۀ حاوی همین صفحه قرار دارد.
تراز کردن متن در جدول
با استفاده از دو ویژگی ALIGN=’’?’’ و VALIGN=’’?’’ می توان داده های موجود در جدول را به ترتیب در جهت افقی و عمودی تراز کرد. مقدار ? در ویژگی ALIGN یکی از مقادیر right, center, left و مقدار ? در ویژگی ALIGN یکی از مقادیر bottom, middle, top می باشد. از این دو ویژگی می توان در تگ های TR ، TH و TD استفاده کرد.
تنظیم اندازۀ جدول درطراحی وب سایت
برای تنظیم اندازۀ جدول از دو ویژگی WIDTH=’’?’’ و HEIGHT=’’?’’ استفاده می شود. به جای ? عددی را برحسب پیکسل قرار دهید. این عدد حداکثر می توانند برابر 600 باشد. روش دیگر این است که به جای ? از درصد استفاده نمایید. مثلاً WIDTH=’’50%’’ باعث می شود تا طول جدول به نصف یعنی 300 کاهش یابد.
مثال: ایجاد جدولی با ابعاد 400 در 300 .
نکته: می توان از این دو ویژگی در تگ های TH و TD استفاده نمود. در این صورت می توان اندازۀ یک یا چند خانه از جدول را کوچکتر و یا بزرگتر از دیگر خانه ها تنظیم کرد. با تغییر اندازۀ یک خانه از جدول، مرورگر به طور خودکار اندازۀ دیگر خانه ها را به طور متناسب تغییر خواهد داد، بدون اینکه نیاز به تنظیم اندازۀ دیگر خانه ها داشته باشید.
ادغام خانه های جدول
می توان تعدادی از خانه های جدول را در راستای ستونی و یا در راستای سطری با یکدیگر ادغام نموده و خانه ای بزرگتر از ترکیب این چند خانه ایجاد نمود. این کار دقیقاً مشابه قابلیت Merge Cells در واژه پرداز WORD است. برای ادغام خانه های جدول در راستای ستونی از ویژگی COLSPAN=’’?’’ در تگ TH یا TD خانه موردنظر استفاده می شود. به جای ? تعداد خانه هایی از جدول که در راستای ستونی با هم ادغام می شوند قرار می گیرد. به طور مشابه از ویژگی ROWSPAN=’’?’’ در تگ TH یا TD خانۀ موردنظر، برای ادغام تعدادی خانه در راستای سطری استفاده می شود.
مثال :
ادغام کردن خانه های جدولی (سطری)
ادغام کردن خانه های جدولی (ستونی)
تنظیم نمای ظاهری خانه های جدول
با استفاده از دو ویژگی CELLSPACING و CELLPADDING در تگ TABLE می توان نمای ظاهری خانه های جدول را تغییر داد و جدول های زیباتری ایجاد نمود.
ویژگی CELLSPACING=’’?’’ برای تعیین میزان فاصله بین خانه های جدول استفاده می شود. به جای ? ، عددی جهت تعیین اندازۀ فاصله قرار می گیرد که مقدار پیش فرض آن دو است. این ویژگی اندازۀ حاشیه بین هر دو خانه از جدول را تغییر می دهد. ویژگی CELLSPACING=’’?’’ مقدار فضای خالی احاطه شده در دور ادامه موجود در خانه های جدول را تعیین می کند. به جای ? عددی جهت تعیین این مقدار فضای خالی، قرار می گیرد که مقدار پیش فرض آن یک است.
مثال :
جدول های تودرتو
می توان چند جدول را به صورت تودرتو نیز استفاده کرد و جدول پیچیده تری ایجاد کرد. مثلاً می توان کاری کرد که یک خانه از جدول، خود یک جدول باشد. برای این منظور می توان در داخل هر تگ TH یا TD به راحتی از تگ TABLE استفاده کرد. در ایجاد جدول های تودرتو باید دقت کرد که تگ های پایانی /TD/TR ، /TH و /TABLE در جای مناسب خود بسته شوند.
مثال: در جدول زیر، اولین خانه از جدول خود یک جدول شامل دو سطر و دو ستون است.
خلاصه ی جلسه ششم آموزش طراحی وب سایت
جدول مجموعه ای از اطلاعات است، که به صورت تعدادی سطر و ستون سازماندهی است. برای ایجاد جدول در HTML از تگ TABLE استفاده می شود. این تگ با /TABLE پایان می یابد. در داخل این تگ برای ایجاد سطر از تگ TR و برای ایجاد هر خانه از جدول از تگ TH یا TD استفاده می شود. تگ TH برای خانه های عنوان و تگ TD برای خانه های عادی استفاده می شود.
برای افزودن کادر به جدول باید از ویژگی BORDER=’’?’’ در تگ TABLE استفاده کرد. به جای ? ضخامت کادر برحسب پیکسل قرار می گیرد. حالت پیش فرض آن مقدار صفر است، که در این صورت جدول بدون کادر ظاهر خواهد شد.
برای افزودن عنوان به جدول، از تگ CAPTION بلافاصله در زیر تگ TABLE استفاده می شود. این تگ با /CAPTION پایان می یابد. اغلب مرورگرهای وب سایت، عنوان را در وسط جدول و به طور پیش فرض در بالای جدول نمایش می دهند.
با استفاده از ویژگی BGCOLOR=’’?’’ می توان رنگ زمینۀ جدول را تعیین کرد. به جای ? عدد رنگ و یا مقدار هگزادسیمال آن قرار داده می شود. این رنگ می تواند برای یک خانه از جدول، یک سطر، یک گروه از سطرها، یک گروه از ستون ها و یا کل جدول اعمال گردد.
با استفاده از ویژگی BACKGROUND=’’?’’ می توان تصویر پس زمینۀ کل جدول و یا فقط یک خانه از آن را تعیین کرد. به جای ? باید مسیر و نام فایل تصویر پس زمینه را قرار داد. این ویژگی در تگ های TABLE ، TH و TD قابل استفاده است.
با استفاده از دو ویژگی ALIGN=’’?’’ و VALIGN=’’?’’ می توان داده های موجود در جدول را به ترتیب در جهت افقی و عمودی تراز کرد. مقدار ? در ویژگی ALIGN یکی از مقادیر right, center, left و مقدار ? در ویژگی ALIGN یکی از مقادیر bottom, middle, top می باشد. از این دو ویژگی می توان در تگ های TR ، TH و TD استفاده کرد.
برای تنظیم اندازۀ جدول، از دو ویژگی WIDTH=’’?’’ و HEIGHT=’’?’’ استفاده می شود. به جای ? عددی را برحسب پیکسل قرار دهید. این عدد حداکثر می توانند برابر 600 باشد. روش دیگر این است که به جای ? از درصد استفاده نمایید. مثلاً WIDTH=’’50%’’ باعث می شود تا طول جدول به نصف یعنی 300 کاهش یابد.
می توان تعدادی از خانه های جدول را در راستای ستونی و یا در راستای سطری با یکدیگر ادغام نموده و خانه ای بزرگتر از ترکیب این چند خانه ایجاد نمود. برای ادغام خانه های جدول در راستای ستونی از ویژگی COLSPAN=’’?’’ در تگ TH یا TD خانه موردنظر استفاده می شود. به جای ? تعداد خانه هایی از جدول که در راستای ستونی با هم ادغام می شوند قرار می گیرد. به طور مشابه از ویژگی ROWSPAN=’’?’’ در تگ TH یا TD خانۀ موردنظر، برای ادغام تعدادی خانه در راستای سطری استفاده می شود.
با استفاده از دو ویژگی CELLSPACING و CELLPADDING در تگ TABLE می توان نمای ظاهری خانه های جدول را تنظیم کرد. ویژگی CELLSPACING=’’?’’ برای تعیین میزان فاصله بین خانه های جدول استفاده می شود. به جای ? ، عددی جهت تعیین اندازۀ فاصله قرار می گیرد که مقدار پیش فرض آن دو است. این ویژگی اندازۀ حاشیه بین هر دو خانه از جدول را تغییر می دهد. ویژگی CELLSPACING=’’?’’ مقدار فضای خالی احاطه شده در دور دادۀ موجود در خانه های جدول را تعیین می کند. به جای ? عددی جهت تعیین این مقدار فضای خالی، قرار می گیرد که مقدار پیش فرض آن یک است.
جدول را می توان به صورت تودرتو نیز استفاده کرد. مثلاً کاری کرد که یک خانه از جدول، خود یک جدول باشد. برای این منظور می توان در داخل هر تگ TH یا TD از تگ TABLE استفاده کرد.