جدول در HTML

جدول در HTML – آموزش برنامه نویسی وب درس 11

در این آموزش شما نحوه کار و نمایش با اطلاعات جدول بندی شده را با استفاد از جدول در HTML خواهید آموخت.

ساختن یک جدول در HTML

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

شما می‌توانید یک جدول را با استفاده از عنصر <table> ایجاد کنید. در درون عنصر <table> شما می‌توانید از عنصرهای <tr> برای ساخت ردیف‌ها استفاده کنید و برای ساخت ستون‌ها در دل ردیف‌ها نیز می‌توانید از <td> بهره بگیرید. همچنین می‌توانید یک سلول را به شکل عنوان برای گروه یا سلول‌های جدول مشخص کنید که برای این کار می‌توانید از عنصر <th> استفاده کنید.

مثالی که در ادامه می‌آید، یکی از ساختارهای پر استفاده جداول را نشان می‌دهد.

<table>
    <tr>
        <th>No.</th>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Peter Parker</td>
        <td>16</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Clark Kent</td>
        <td>34</td>
    </tr>
</table>

جدول‌ها به صورت پیش فرض هیچگونه حاشیه و قابی ندارند. شما می‌توانید از ویژگی border در CSS استفاده کنید تا بتوانید به جدول‌های خودتان حاشیه و قاب اضافه کنید. همچنین، سلول‌های جدول به صورت پیش فرض به اندازه‌ای بزرگ می‌شوند که بتوانند متناسب با محتویات درون خود شوند. برای اضافه کردن فضای بیشتر به اطراف محتواهای در درون سلول‌های جدول شما می‌توانید از ویژگی Padding در CSS استفاده کنید.

در ادامه ما یک حاشیه یک پیکسلی را به جدول اضافه می‌کنیم و سپس یک فضای اضافه به اندازه 10 پیکسل را با استفاده از ویژگی پدینگ (Padding) به اطراف محتویات می‌دهیم.

table, th, td {
    border: 1px solid black;
}
th, td {
    padding: 10px;

به صورت پیش فرض حاشیه‌هایی که در اطراف جدول و سلول‌های آن هستند از همدیگر جدا هستند. اما شما می‌توانید آن‌ها را با استفاده از ویژگی border-collapse در عنصر <table>‌ درهم ادغام کنید.

همچنین نوشته‌هایی که در عنصرهای <th> قرار دارند نیز نوشته‌ها را با فونت ضخیم نشان می‌دهند و به صورت پیش فرض آرایش نوشته‌ها به صورت وسط چین است. برای تغییر آرایش پیش فرض شما می‌توانید از ویژگی text-align در CSS استفاده کنید.

قوانین سبک‌هایی که در ادامه می‌آیند می‌توانند حاشیه‌های جدول را در هم ادغام کنند و آرایش نوشته‌های عنوان‌های جدول را چپ چین کنند.

table {
    border-collapse: collapse;
}
th {
    text-align: left;
}

برای درک بهتر می‌توانید به مقاله ما درباره جداول در CSS مراجعه کنید تا بتوانید مطالب بیشتری را درباره جدول در HTML بیاموزید.

نکته: بیشتر عنصرهای جدول <table> دارای ویژگی‌هایی مانند border، cellpadding، cellpacing، width، align و موارد دیگر هستند که از آن‌ها می‌تواند برای استایل دهی به ظاهر جداول استفاده کرد، از این روش در روزهای اولیه که HTML5 به بازار آمده بود استفاده می‌شد، اما بهتر است که از آن‌ها در خود HTML استفاده نکنید. در عوض می‌توانید از سبک‌های CSS برای جدول‌های در HTML استفاده کنید.

ادغام کردن چند ردیف و یا ستون جدول در هم

ادغام کردن به شما اجازه می‌دهد که ردیف‌ها و یا ستون‌های جدول را به چند ردیف و یا ستون امتداد دهید.

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

در اینجا بگذارید مثالی برای شما بزنم که بهتر بتوانید این مفهوم را بفهمید، من در اینجا از دستور colspan استفاده کرده ام.

<table>
    <tr>
        <th>Name</th>
        <th colspan="2">Phone</th>
    </tr>
    <tr>
        <td>John Carter</td>
        <td>5550192</td>
        <td>5550152</td>
    </tr>
</table>

به صورت مشابه شما می‌توانید از ویژگی rowspan استفاده کنید تا بتوانید یک و یا چند سلول در یک ردیف را با هم ادغام کنید. در اینجا بگذارید مثالی برای شما بزنم که بهتر بتوانید این مفهوم را بفهمید، من در اینجا از دستور rowspan استفاده کرده‌ام.

<table>
    <tr>
        <th>Name:</th>
        <td>John Carter</td>
    </tr>
    <tr>
        <th rowspan="2">Phone:</th>
        <td>55577854</td>
    </tr>
    <tr>
        <td>55577855</td>
    </tr>
</table>

اضافه کردن یک عنوان به جدول

شما می‌توانید یک عنوان (یا اسم) را با استفاده از عنصر <caption>‌ به جدول خودتان اضافه کنید.

عنصر <caption> می‌تواند به صورت مستقیم بعد از تگ <table> به کار گرفته شود. به صورت پیش فرض، عنوان یا کپشن، در بالای یک جدول ظاهر می‌شود، اما شما می‌توانید موقعیت آن را با استفاده از ویژگی caption-side در CSS تغییر دهید.

در مثال زیر من چگونگی استفاده از این عنصر در جدول را نشان داده‌ام:

<table>
    <caption>Users Info</caption>
    <tr>
        <th>No.</th>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Peter Parker</td>
        <td>16</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Clark Kent</td>
        <td>34</td>
    </tr>
</table>

تعریف کردن یک هدر، بدنه و فوتر برای جدول

HTML یک سری از تگ‌ها به نام‌های <thead>، <tbody> و <tfoot>‌ را ارائه کرده است که به شما کمک می‌کند که بتوانید ساختار جدول بسیار خوبی را ایجاد کنید با استفاده از headr، body و footer شما می‌توانید بخش‌های مختلف یک جدول را بسازید.

مثالی که در ادامه می‌آید استفاده از این سه عنصر برای ساخت یک جدول را نیشان می‌دهد:

<table>
    <thead>
        <tr>
            <th>Items</th>
            <th>Expenditure</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Stationary</td>
            <td>2,000</td>
        </tr>
        <tr>
            <td>Furniture</td>
            <td>10,000</td>
        </tr>        
    </tbody>
    <tfoot>
        <tr>
            <th>Total</th>
            <td>12,000</td>
        </tr>
    </tfoot>
</table>

نکته: در HTML5 عنصر <tfoot> می‌تواند در قبل و یا بعد از <tbody> و عنصرهای <tr> نمایش داده شود، اما همیشه بعد از هر کدام از عنصرهای <caption>، <colgroup> و <thead> ظاهر می‌شود.

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

No votes yet.
Please wait...

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

منو اصلی

question