آموزش HTML - بخش یازدهم: تغییر در جدول‌ها

یک‌شنبه ۲۲ شهریور ۱۳۹۴ - ۲۰:۱۰
مطالعه 5 دقیقه
در قسمت قبل از مجموعه آموزش‌های HTML به زبان ساده، با نحوه‌ی قرار دادن جداول آشنا شدیم. در این شماره قصد داریم تا جدول‌ها را با تغییرات بیشتری همراه کنیم. با ما همراه شوید.
تبلیغات

در ادامه‌ی بحث‌های جلسه‌ی دهم آموزش HTML، در این قسمت با ایجاد تغییر در جداول آشنا خواهیم شد، با زومیت همراه باشید.

تغییر در جداول

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

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

اضافه‌کردن قاب:

برای قرار دادن قاب دور جدول‌ها تنها کافی است که اتریبیوت border را به تگ  اضافه کنید. در مثال زیر ما یک قاب یک پیکسلی به دور جدول کشیده‌ایم. این قاب به تمامی بخش‌های جدول ما و در بین تمامی سلول‌ها و سطر‌ها کشیده خواهد شد.

نمونه کد

border="1px" >

          خط اول - ستون اول           

          خط اول - ستون دوم  

         خط اول - ستون سوم       

            خط دوم - ستون اول       

           خط دوم- ستون دوم        

            خط دوم - ستون سوم    

            خط سوم - ستون اول       

           خط سوم - ستون دوم 

           خط سوم - ستون سوم

نتیجه‌ای که مرورگر نمایش خواهد داد

نکته: شما می‌توانید ازطریق اضافه کردن اتریبیوت استایل به جدول خود نیز قاب را ایجاد کنید. ";table style ="border:1px

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

سرفصل در جدول:

شما در اچ تی ام ال می‌توانید جدول‌های منظم‌تر و دقیق‌تری ترسیم کنید. درواقع یک جدول تنها شامل یک سطر و ستون‌ نمی‌شود و باید دارای سرفصل‌هایی نیز باشد. مثلا ما می‌خواهیم جدولی درست کنیم که در آن نام و نام خانوادگی افراد و سن آن‌ها یادداشت شود. در این جدول،  عناوینی همچون «نام»،‌«نام خانوادگی» و «سن» عناوین یا همان سرفصل‌های جدول شما هستند و مشخصات افراد که در زیر آن‌ها قرار می‌گیرد داده‌های جدول. حالا بیایید همین مثال را به زبان اچ تی ام ال پیاده‌سازی کنیم.

جدول در اچ تی ام ال شامل دو بخش است: 

عنوان جدول: عناوین را در اولین سطر جدول می‌نویسند و متن داخل آن‌ها با تگ   نوشته می‌شود . 

داده‌های جدول: داده‌های جدول مشابه قبل در سطرهای بعدی و ستون‌های بعدی نوشته می‌شود. 

نمونه کد

border="1px" >

          خط عنوان - نام           

          خط عنوان- نام خانوادگی  

         خط عنوان-سن       

 

            خط دوم - ستون اول       

           خط دوم- ستون دوم        

            خط دوم - ستون سوم    

            خط سوم - ستون اول       

           خط سوم - ستون دوم 

           خط سوم - ستون سوم

نتیجه‌ای که مرورگر نمایش خواهد داد

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

 نکته: راه‌حل دیگر برای گروه‌بندی و نوشتن جداول استفاده از در صورت استفاده از  و   است. با استفاده از این تگ کلیات جدول شما دارای یک تگ جدید می‌شود؛ ولی ما در این آموزش صرفا جدول‌هایمان را بدون استفاده از این تگ‌ها می‌نویسیم. البته در هر حالت نتیجه جدول شما یکسان خواهد بود.

colspan: 

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

برای بزرگ کردن یکی از ستون‌های جدول به اندازه چند ستون ( یا همان ترکیب چند ستون در یک ستون) از اتریبوت "تعداد ستون‌های مدنظر برای یکی شدن" = colspan استفاده می‌شود. به مثال زیر دقت کنید تا بهتر منظورمان را متوجه شوید.  

نمونه کد

border="1px" >

          خط اول - ستون اول           

          خط اول - ستون دوم  

         خط اول - ستون سوم       

            خط دوم - ستون اول       

           خط دوم- ستون دوم        

            خط دوم - ستون سوم    

            خط سوم و یکپارچه کردن سه ستون در یک ستون       

    

نتیجه‌ای که مرورگر نمایش خواهد داد

تبلیغات
داغ‌ترین مطالب روز

نظرات

تبلیغات