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

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

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

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

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

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

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

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

نمونه کد

<table  border="1px" >

    <tr><!-- شروع خط اول  -->

          <td>خط اول - ستون اول </td>          

          <td>خط اول - ستون دوم</td>  

         <td>خط اول - ستون سوم</td>       

   </tr><!-- پایان خط اول  -->

    <tr> <!-- شروع خط دوم -->

            <td>خط دوم - ستون اول </td>      

           <td>خط دوم- ستون دوم</td>        

            <td>خط دوم - ستون سوم</td>    

   </tr><!-- پایان خط دوم -->

 <tr> <!-- شروع خط سوم-->

            <td>خط سوم - ستون اول </td>      

           <td>خط سوم - ستون دوم</td> 

           <td>خط سوم - ستون سوم</td>

</tr><!-- پایان خط سوم-->

</table>

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

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

 

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

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

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

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

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

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

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

نمونه کد

<table  border="1px" >

    <tr><!--    - شروع خط مربوط به عناوین  -->

          <th>خط عنوان - نام </th>          

          <th>خط عنوان- نام خانوادگی</th>  

         <th>خط عنوان-سن</th>       

   </tr> <!--    - پایان خط مربوط به عناوین  -->

    <tr> <!-- شروع خط دوم -->

            <td>خط دوم - ستون اول </td>      

           <td>خط دوم- ستون دوم</td>        

            <td>خط دوم - ستون سوم</td>    

   </tr><!-- پایان خط دوم -->

 <tr> <!-- شروع خط سوم-->

            <td>خط سوم - ستون اول </td>      

           <td>خط سوم - ستون دوم</td> 

           <td>خط سوم - ستون سوم</td>

</tr><!-- پایان خط سوم-->

</table>

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

خط عنوان- نامخط عنوان- نام خانوادگی خط عنوان - سن
خط دوم - ستون اولخط دوم - ستون دومخط دوم - ستون سوم
خط سوم - ستون اولخط سوم - ستون دومخط سوم - ستون سوم

 

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

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

colspan: 

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

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

نمونه کد

<table  border="1px" >

    <tr><!-- شروع خط اول  -->

          <td>خط اول - ستون اول </td>          

          <td>خط اول - ستون دوم</td>  

         <td>خط اول - ستون سوم</td>       

   </tr><!-- پایان خط اول  -->

    <tr> <!-- شروع خط دوم -->

            <td>خط دوم - ستون اول </td>      

           <td>خط دوم- ستون دوم</td>        

            <td>خط دوم - ستون سوم</td>    

   </tr><!-- پایان خط دوم -->

 <tr> <!-- شروع خط سوم-->

            <td  colspan="3">خط سوم و یکپارچه کردن سه ستون در یک ستون </td>      

    

</tr><!-- پایان خط سوم-->

</table>

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

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

نوبت شما:

در این بخش به رسم همیشه، ادیتور آنلاین را در اختیار شما قرار می‌دهیم تا هر آنچه در این جلسه آموخته‌اید را بر روی آن پیاده کنید! پس همین حالا یک جدول با دو سطر و سه ستون ایجاد کنید. 

از سراسر وب

  دیدگاه
کاراکتر باقی مانده

بیشتر بخوانید