بخش های اصلی

آموزش 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>

مبحث آموزشی

آموزش HTML 5

Learn HTML 5

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

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

تبلیغات

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

https://telegram.me/softskill_ir

آخرین مقالات

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

خبـرنــامه

Newsletters

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