نوشته های برچسب خورده: قرار دادن قاب در جدول

در قسمت قبل با جدول ها در 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;”>

تیتر های جدول

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

<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> مربوط به تیتر ها یا همان عناوین جدول است و بهتر است که در خط اول جدول قرار گیرد. ولی ما می توانیم عنوان های مختلف را برای هر سطر و به صورت جداگانه استفاده کنیم. بدین ترتیب هر ستون جدول می تواند یک هدر مخصوص داشته باشد.

خاصیت 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>

عددی که در مقابل colspan قرار می گیرد نشان دهنده تعداد ستون هایی است که می خواهیم در سطر مورد نظر یکی شوند.