امتیاز دهید:

گاهی اوقات نیاز داریم تا خانه های یک جدول را با یکدیگر ادغام کنیم. برای این منظور دو راه کار پیش رو داریم. اگر بخواهیم ردیف های یک جدول را با یکدیگر ادغام کنیم می بایست از دستور rowspan استفاده کنیم و اگر بخواهیم ستون های یک جدول را با یکدیگر ادغام کنیم بایستی از دستور colspan استفاده کنیم. برای روشن تر شدن این مسئله کدهای زیر را وارد ویرایشگر متن خود می کنیم:

<!DOCTYPE html>
<html>
    
    <head>
        <title>Netshahr</title>
    </head>
    
    <body>         <table border="1">             <tr>                 <td>1</td>                 <td>2</td>             </tr>             <tr>                 <td>Seperator</td>             </tr>             <tr>                 <td>3</td>                 <td>4</td>             </tr>         </table>     </body> </html>

فایل خود را در مرورگر باز می کنیم:

ادغام کردن خانه های یک جدول با یکدیگر 1

می بیینیم که در ردیف اول اعداد 1 و 2 قرار گرفته سپس در ردیف دوم عبارت Seperator به معنی "جدا کننده" قرار گرفته است و در نهایت در ردیف آخر اعداد 3 و 4 قرار گرفته اند. همانطور که در کد فوق مشخص است در ردیف وسط فقط یک تگ <td> قرار گرفته است. حال می خواهیم کاری کنیم تا این ردیف کل فضای ردیف وسط را تحت پوشش قرار دهد. برای این منظور کد فوق را به صورت زیر تکمیل می کنیم:

<!DOCTYPE html>
<html>
    
    <head>
        <title>Netshahr</title>
    </head>
    
    <body>         <table border="1">             <tr>                 <td>1</td>                 <td>2</td>             </tr>             <tr>                 <td colsapn="2">Seperator</td>             </tr>             <tr>                 <td>3</td>                 <td>4</td>             </tr>         </table>     </body> </html>

همانطور که در کد فوق می بینیم Attribute یی تحت عنوان colspan را داخل تنها تگ <td> در ردیف دوم قرار می دهیم. سپس یک علامت مساوی قرار داده و داخل علامت های "   " عددی در نظر می گیریم. در حقیقت از آنجا که این جدول دارای دو ستون است و ما می خواهیم تا کلمه Separator هر دو ستون را پوشش دهد، عدد 2 را برای colspan در نظر می گیریم:

دستور colspan در جداول اچ تی ام المی بینیم که دریف وسط هر دو ستون را با یکدیگر ادغام می کند.
حال فرض کنیم که می خواهیم کلیه خانه های ردیف اول را با یکدیگر ادغام کنیم. برای این منظور کد فوق را به صورت زیر بازنویسی می کنیم:

<!DOCTYPE html>
<html>
    
    <head>
        <title>Netshahr</title>
    </head>
    
    <body>         <table border="1">             <tr>                 <td rowspan="3">1</td>                 <td>2</td>             </tr>             <tr>                 <td>Seperator</td>             </tr>             <tr>                 <td>3</td>                 <td>4</td>             </tr>         </table>     </body> </html>

کاری که در کد فوق انجام داده ایم این است دستور rowspan را برای اولین تگ <th> در ردیف اول قرار داده ایم و از آنجا که در این جدول در هر ستون سه خانه داریم عدد 3 را برای آن در نظر می گیریم:

استفاده از دستور rowspan در اچ تی ام ال

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


نظرات
نظرات
  • پیغام :

    ممنونم عالی بود


    1394/10/14 10:12:24
  • پیغام :

    ممنونم عالی بو


    1394/10/14 10:10:29
  • SAREMI :

    عالی بود
    مرسی
    موفق باشید


    1394/10/13 12:46:55
  • ارزو :

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


    1394/09/30 05:47:06
  • sahand :

    سلام استاد گرامی
    کد دوم قسمت Separator اشتباهه به جای colspan نوشته اید colsapn ممنون می شوم اگر اصلاح بفرمایید
    باز هه ممنون


    1393/09/02 17:01:20
  • shaqayeq :

    mersi,komak kard:)


    1392/07/22 10:02:18
  • بهزاد مرادی :

    دوست گرامی سلام،
    ضمن تشکر از انتقاد شما، به استحضار می رساند این مسئله که شما می فرمایید جزو مباحث پی اچ پی است. خواهشمند است دوره PHP را دنبال نمایید تا در آموزش های بعد به این مسائل بپردازیم.


    با سپاس فراوان از توجه شما
    بهزاد مرادی


    1393/04/21 12:59:01
  • محمد :

    سلام و خسته نباشید!
    با تشکر از سایت مفیدتون، یه اسکالی بود که خواستم متذکر بشوم!
    http://upir.ir/934/Capture_8309c.jpg
    colsapn=colspan
    یه سوال دیگه ای هم داشتم!
    تو بعضی سایتا وقتی واردش میشی یه صفحه تبلیغاتی با کلیک بر روی صفحه خالی سایت،باز میشه!
    میخواستم بپرسم اگه امکانش هست آموزشش رو بذارید!
    و اینکه چجوری میشه فقط برای یک دفعه برای هر کاربر در وحله اول نمایش داده بشه!
    یا مثلا هر روز که وارد میشه فقط یک بار باشه!
    ممنون


    1393/04/20 11:40:43