جدول ها در html

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

جدول از زمان های خیلی دور در طراحی سایت کاربرد فراوانی داشته و آن دوران برای ستون بندی سایت از جدول استفاده می کردند که آن زمان مرسوم بود ولی با گذشت سال های سال از آن دوران همچنان جدول در فضای اینترنت مشاهده می شود ولی این بار نه برای طراحی سایت بلکه بیشتر برای راهنمایی یا توضیحات در مورد یک مطلب خاص! در این مطلب قصد داریم شما را با جدول در html آشنا کنیم.

آموزش ساخت جدول

به عنوان مثال جدول زیر را مشاهده کنید:

سه ستون و سه ردیف دارد.

ردیف اول که به عنوان سربرگ جدول انتخاب شده است.

ردیف های دوم و سوم به عنوان داده های جدول شناخته می شوند.

ردیف	کلاس	دانش آموز
1	الف	رضا
2	ب	علی

حالا می خواهیم همچین جدولی را با html بسازیم.

کد:

<table></table>

جدول را ساختیم اما درون آن خالی است! برای ایجاد ردیف از تگ tr استفاده می کنیم.

کد:

<table>
  <tr></tr>
</table>

یک ردیف ساخته ایم ولی همچنان بدون ستون است و داده ای ندارد! برای این کار اگر ردیف به عنوان سربرگ انتخاب شده از تگ th و در غیر این صورت از تگ td استفاده می کنیم.

کد:

<table>
  <tr>
    <th>ردیف</th>
    <th>کلاس</th>
    <th>دانش آموز</th>
  </tr>
</table>

حالا ردیف های دوم و سوم که شامل داده های جدول است را اضافه می کنیم. برای این کار ابتدا توسط تگ tr یک ردیف می سازیم و برای اضافه کردن ستون یا سلول به جدول از تگ td استفاده می کنیم.

کد:

<table>
  <tr>
    <th>ردیف</th>
    <th>کلاس</th>
    <th>دانش آموز</th>
  </tr>
  <tr>
    <td>1</td>
    <td>الف</td>
    <td>رضا</td>
  </tr>
  <tr>
    <td>2</td>
    <td>ب</td>
    <td>علی</td>
  </tr>
</table>

به همین راحتی یک جدول ساختیم!

برای زیبایی جدول می توان از css استفاده کرد.

کد CSS:

table {
  direction: rtl;
}

th, td {
  border: 1px solid #333;
  padding: 5px;
  text-align: center;
}

لازم به ذکر است برای جدول خود می توانید هدر، بدنه و فوتر تعیین کنید.

برای ایجاد هدر از تگ thead، برای ایجاد بدنه از تگ tbody، و برای ایجاد فوتر از تگ tfoot استفاده می کنیم.

کد:

<table>
  <thead>
    <tr>
      <th>ردیف</th>
      <th>کلاس</th>
      <th>دانش آموز</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>الف</td>
      <td>رضا</td>
    </tr>
    <tr>
      <td>2</td>
      <td>ب</td>
      <td>علی</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">مجموع دانش آموز</td>
      <td>2</td>
    </tr>
  </tfoot>
</table>

صفت colspan برای ادغام ستون ها و صفت rowspan برای ادغام سطرها به کار می روند. به عنوان مثال در کد بالا از آن جا که جدول ما سه ستونه است و در ردیف آخر فقط نیاز به دو ستون داریم بنابراین مقدار صفت colspan را 2 گذاشتیم یعنی دو ستون با هم ادغام شود.

خلاصه ای بر جدول ها

ایجاد جدول: تگ table

ایجاد هدر: تگ thead

ایجاد بدنه: تگ tbody

ایجاد فوتر: تگ tfoot

ایجاد ردیف: تگ tr

ایجاد سربرگ: تگ th

ایجاد سلول: تگ td

ادغام ستون ها: صفت colspan

ادغام ردیف ها: صفت rowspan

سازگاری با مرورگرها

تگ table با مرورگرهای زیر سازگار است:

• گوگل کروم
• فایرفاکس
• اج
• اپرا
• سافاری
• گوگل کروم اندروید
• فایرفاکس اندروید
• اپرا اندروید
• سافاری iOS