طراحی سایت در تهران، سیدخندان به سمت رسالت شرق، خیابان کابلی (دبستان)، نبش کوچه آگاهی، پلاک ۴ ، واحد ۱۵
۰۹۱۲۰۱۹۹۳۸۶   ۰۲۱۸۸۴۷۱۵۲۱

آموزش HTML – بخش هفتم

آموزش HTML | آموزش HTML5

در بخش هفتم از آموزش HTML به آموزش طراحی جدول با تعداد سطر و ستون دلخواه می پردازیم.

طراحی جدول در HTML

با استفاده از تگ <table>  المان جداول را به صفحه می افزاییم. درون این تگ برای ایجاد تعداد سطر دلخواه از تگ <tr>  استفاده می کنیم. در جداول، هر ردیف یا ستون دارای عنوان است. عناوین را با تگ <th>  مشخص می کنیم که متن این سلول ها، به صورت برجسته شده نمایش داده می شوند و به صورت پیش فرض در وسط سلول قرار می گیرند. داده های سلول ها را با استفاده از تگ <td>  مشخص می کنیم. بدیهی است که تگ های <th>  و <td>  درون تگ <tr>  قرار می گیرند.

درون سلول های <td>  می توان متن، عکس، لیست و در کل هر المانی را قرار داد.



آموزش HTML – بخش هفتم | آموزش HTML 5 | آموزش طراحی سایت |

در مثال بالا و در جدول اول، ردیف اول را عنوان و در جدول دوم، ستون اول را عنوان برای ردیف ها قرار دادیم.

افزودن حاشیه به سلول ها

در مثال بالا دیدیم که بین سلول ها هیچ حاشیه ای وجود نداشت و سلول ها مانند جداول در word و یا اکسل، مجزا نیستند. برای افزودن حاشیه باید از CSS استفاده کنیم. به این ترتیب که در تگ <head>  تگ <style>  را ایجاد می کنیم. حال باید المان جدول و عناصر آن یعنی <td>  ها و <th>  ها را انتخاب کنیم. اگر تنها تگ <table>  را انتخاب کنیم یک حاشیه اطراف کل جدول ایجاد می کنیم و سلول ها همچنان بدون حاشیه باقی می مانند. بدین ترتیب هر المان را که انتخاب کنیم، اطراف آن، حاشیه ایجاد می شود.

وقتی می خواهیم چند المان را انتخاب کنیم باید انتخاب کننده ها را از هم جدا کنیم. برای جدا کردن انتخاب کننده ها بین آنها علامت ” , ” را قرار می دهیم.



آموزش HTML – بخش هفتم | آموزش HTML 5 | آموزش طراحی سایت |

رفع از هم پاشیدگی حاشیه ها

در مثال بالا دیدیم که فاصله ای کوچک بین حاشیه هر سلول با سلول های دیگر ایجاد خواهد شد و حاشیه یک خط نخواهد بود. می توان با استفاده از ویژگی  border-collapse و تنظیم مقدار collapse برای آن، این فاصله و از هم پاشیدگی حاشیه ها را از بین برد و حاشیه سلول ها را به یک خط تبدیل کرد.

آموزش HTML – بخش هفتم | آموزش HTML 5 | آموزش طراحی سایت |

تنظیمات فاصله درونی

در جلسه پنجم آموزش HTML با ویژگی های حاشیه ( border ) و فاصله درونی ( padding ) و فاصله خارجی ( margin ) آشنا شدیم. برای فاصله درونی المان های <th>  و <td>  ابتدا این تگ ها را به روش گفته شده انتخاب می کنیم و بعد ویژگی padding را برای آنها تنظیم می کنیم و مقدار دلخواه را با واحد px به آن می دهیم.

آموزش HTML – بخش هفتم | آموزش HTML 5 | آموزش طراحی سایت |

تراز کردن محتوای سلول ها

با استفاده از ویژگی text-align می توان محتوای سلول ها را در سمت چپ، وسط و یا در سمت راست سلول قرار داد. توجه کنید که برای تنظیم ویژگی text-align عناوین جداول، باید عرضی را برای جدول در تگ <table>  تعیین کنید.

آموزش HTML – بخش هفتم | آموزش HTML 5 | آموزش طراحی سایت |

تنظیم فاصله بین سلول ها

در مثال دوم دیدیم که در حالت عادی بین خانه های جدول فاصله ای قرار دارد. می توانیم این فاصله را با استفاده از ویژگی border-spacing به دلخواه تغییر داد. توجه کنید که برای اعمال border-spacing باید border-collapse را حذف کنید. در غیر این صورت نمی توان بین خانه های جدول، فاصله ایجاد کرد.

آموزش HTML – بخش هفتم | آموزش HTML 5 | آموزش طراحی سایت |

می توانید border-spacing را به <td>  و <th>  هم اعمال کنید. ( این کار را انجام داده و نتیجه را مشاهده کنید. )

ادغام چند خانه از جدول

همانطور که در نرم افزار word و excel  می توانیم خانه ها را در هم ادغام کنیم، در زبان HTML می توان خانه های یک ردیف از جدول را با استفاده از خصیصه colspan در هم ادغام کرد.

فرض کنید که جدول ما ۴ ستون و ۴ ردیف دارد و می خواهیم در ردیف اول، خانه های دوم و سوم و چهارم را در هم ادغام کنیم. برای این کار باید در اولین تگ <tr>  تگ های سوم و چهارم <th>  را حذف کرده و در دومین تگ <th>  ، خصیصه colspan را بنویسیم و مقدار آن را ۳ بدهیم تا ۳ خانه را در هم ادغام کند ( به عبارتی عرض خانه دوم را به اندازه ۳ خانه بسط می دهد ). اگر بخواهیم دو خانه را ادغام کنیم، باید مقدار خصیصه را ۲ بدهیم و به همین ترتیب می توان تعداد خانه های دلخواه هر ردیف را در هم ادغام کرد.

آموزش HTML – بخش هفتم | آموزش HTML 5 | آموزش طراحی سایت |

برای ادغام خانه های یک ستون از خصیصه rowspan استفاده می کنیم.

فرض کنید که یک جدول ۴*۴  داریم و می خواهیم خانه های دوم و سوم از ستون اول را در هم ادغام کنیم. برای این کار باید در ردیف دوم و در اولین خانه ( یعنی اولین <th>  ) خصیصه rowspan را نوشته و مقدار آن را تعداد خانه هایی که می خواهیم ادغام کنیم بدهیم. مثلا اگر بخواهیم دو خانه را در هم ادغام کنیم مقدار آن را ۲ می دهیم. بعد از این کار باید خانه ی سوم از ستون اول ( یعنی اولین <th>  در سومین <tr>  ) را از بین ببریم. چون این خانه قرار است در خانه دوم ادغام شود. ( برای تمرین این خانه را از بین نبرید و نتیجه را مشاهده کنید. ) اگر بخواهیم ۳ خانه از ستون اول را در هم ادغام کنیم باید اولین <th>  در ردیف چهارم را هم از بین ببریم و مقدار rowspan را ۳ بدهیم.

آموزش HTML – بخش هفتم | آموزش HTML 5 | آموزش طراحی سایت |

توجه داشته باشید که برای ادغام کردن خانه های هر ردیف از colspan و برای ادغام کردن خانه های هر ستون از rowspan استفاده می کنیم.

همچنین دقت کنید که هر کدام از این خصیصه ها را در هر خانه ای بنویسیم، شمارش از آن خانه شروع می شود. مثلا در یک ستون ۴ خانه ای rowspan را در خانه دوم می نویسیم و مقدار آن را ۳ می دهیم، در ستون اول از خانه دوم شمارش شروع شده و خانه های دوم و سوم و چهارم ( تعداد ۳ خانه ) در هم ادغام می شوند.

خانه هایی که قرار است ادغام شوند، باید حذف شوند. اگر می خواهیم در یک ردیف ( مثلا ردیف اول ) خانه هایی را ادغام کنیم باید در اولین تگ <tr>  ، خانه های ادغامی  را حذف کنیم و اگر می خواهیم خانه های یک ستون ( مثلا ستون اول ) را ادغام کنیم، باید اولین تگ از هر تگ <tr>  را حذف کرد. برای درک بیشتر این نکات، خانه ای مختلفی از سطر ها و ستون ها را در هم ادغام کنید و نتیجه را مشاهده کنید. با حل چند مثال این نکات را به خوبی درک خواهید کرد.

عناوین جداول

عنوان دلخواه برای جداول را در تگ <caption>  می نویسیم. این تگ را بلافاصله بعد از تگ <table>  می نویسیم.

آموزش HTML – بخش هفتم | آموزش HTML 5 | آموزش طراحی سایت |

سبک دهی به جداول

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

آموزش HTML – بخش هفتم | آموزش HTML 5 | آموزش طراحی سایت |

در پایان لازم به ذکر است که شما دوستان و همراهان گرامی می توانید سوالات خود در زمینه مطالب گفته شده در این جلسه را در قسمت نظرات مطرح نمایید و در کمترین زمان پاسخ خود را از کارشناسان سایت سازان دریافت نمایید. همچنین نظرات و پیشنهادات شما عزیزان موجب دلگرمی ما و ارائه هر چه بهتر مطالب خواهد شد.

 

نوشته های مرتبط

دیدگاه ‏خود را بنویسید