آموزش زبان HTML (جلسه ۴۸)

آشنایی با روش ادغام کردن خانه های یک جدول در اچ تی ام ال (HTML)

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

<!DOCTYPE html>
<html>
     
    <head>
        <title>asrefonon</title>
    </head>
    <br>    <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

می بیینیم که در ردیف اول اعداد ۱ و ۲ قرار گرفته سپس در ردیف دوم عبارت Seperator به معنی “جدا کننده” قرار گرفته است و در نهایت در ردیف آخر اعداد ۳ و ۴ قرار گرفته اند. همانطور که در کد فوق مشخص است در ردیف وسط فقط یک تگ <td> قرار گرفته است. حال می خواهیم کاری کنیم تا این ردیف کل فضای ردیف وسط را تحت پوشش قرار دهد. برای این منظور کد فوق را به صورت زیر تکمیل می کنیم:

<!DOCTYPE html>
<html>
     
    <head>
        <title>asrefonon</title>
    </head>
    <br>    <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 هر دو ستون را پوشش دهد، عدد ۲ را برای colspan در نظر می گیریم:

دستور_colspan_در_جداول_اچ_تی_ام_ال

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

<!DOCTYPE html>
<html>
     
    <head>
        <title>asrefonon</title>
    </head>
    <br>    <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> در ردیف اول قرار داده ایم و از آنجا که در این جدول در هر ستون سه خانه داریم عدد ۳ را برای آن در نظر می گیریم:

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

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

221

اسماعیلی هستم مدیر عصر فنون. فارغ التحصیل مقطع کارشناسی ارشد رشته مهندسی فناوری اطلاعات (IT)