بخش های اصلی

آموزش HTML 5

آموزش HTML - جدول‌ها (Tables)

جدول HTML امکان مرتب سازی اطلاعاتی مانند متن، تصاویر، لینک ها، فرم ها، فیلد های فرم، جدول های دیگر و ... را فراهم می کند.

ایجاد جدول HTML

در HTML ، جدول ها با تگ <table> تعریف می شوند.

جدول توسط تگ <tr> که مخفف table row (سطر جدول) است، سطربندی شده و هر سطر توسط تگ <td> که مخفف table data است به سلول های داده تقسیم می شود.

یک تگ <td> می تواند حاوی متن، لینک ها، عکس ها، لیست ها، فرم ها، جداول دیگر و ... باشد.

مثال

<table border="1">
    <thead>
        <tr>
            <th>No.</th>
            <th>Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>John Carter</td>
            <td>johncarter@mail.com</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Peter Parker</td>
            <td>peterparker@mail.com</td>
        </tr>
        <tr>
            <td>3</td>
            <td>John Rambo</td>
            <td>johnrambo@mail.com</td>
        </tr>
    </tbody>
</table>

نکته: مرورگرهایی که دارای style sheet های تعبیه شدهِ داخلی هستند، متن را داخل عنصر <th>، بصورت bold و وسط چین (centered) نمایش می دهند با این وجود می توانید با استفاده از CSS، style sheet پیش فرض مرورگر را تغییر دهید.

Callpadding و Cellspacing جدول

خصیصه های Callpadding و Cellspacing  برای تنظیم فاصله های (white space) داخل جدول استفاده می شوند.

  • Callpadding فاصله (white space) میان حاشیه سلول را با محتوایش تنظیم می کند.
  • Cellspacing  فاصله (white space) میان سلول های جدول را تنظیم می کند.

مثال

<table border="1" cellpadding="10" cellspacing="5">
    <thead>
        <tr>
            <th>No.</th>
            <th>Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>John Carter</td>
            <td>johncarter@mail.com</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Peter Parker</td>
            <td>peterparker@mail.com</td>
        </tr>
        <tr>
            <td>3</td>
            <td>John Rambo</td>
            <td>johnrambo@mail.com</td>
        </tr>
    </tbody>
</table>

ادغام (Spanning) چند سطر (Rows) و سلول (cells)

ادغام (spanning) به شما این امکان را می دهد تا ستون ها و سطر های همجوار را با هم ادغام کنید.

معمولاً، زمانیکه یک سلول در جدول ایجاد می کنیم، نمی تواند از فضای سلول های بالایی و پایینی اش رد شود. با این حال می توانید با استفاده از خصیصه collspan برای ادغام چند ستون و از خصیصه rowspan برای ادغام چند سطر در جدول استفاده کنید. در ادامه مثالی از این مورد مشاهده می کنید:

مثال

<table border="1">
    <tr>
        <th rowspan="4">Users Info</th>
    </tr>
    <tr>
        <td>1</td>
        <td>John Carter</td>
        <td>johncarter@mail.com</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Peter Parker</td>
        <td>peterparker@mail.com</td>
    </tr>
    <tr>
        <td>3</td>
        <td>John Rambo</td>
        <td>johnrambo@mail.com</td>
    </tr>
</table>
در صورتی که سوال و یا نظری دارید، از بخش نظرات با ما در میان بگذارید.

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

آموزش HTML 5

Learn HTML 5

سرفصل ها

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

تبلیغات

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد