آموزش تگ table در HTML

31 مرداد 1401
ارسال شده توسط
آموزش html css

آموزش تگ table در HTML

دوست من سلام امیدوارم حالتون عالی و پر از انرژی باشید. توی این بخش از آموزش html و css قراره که با آموزش تگ table در HTML به صورت کامل آشنا بشید.

تگ table در HTML

همان طور که از نام تگ table پیداست. این تگ تگی است که با استفاده از آن میتوانیم یک جدول را در یک صفحه وبسایتمان ایجاد کنیم. یک سری از تگ ها هم هستند که همگی داخل این تگ <table>  قرار میگیرند که این تگ ها به صورت زیر هستند.

  1. <tr> : این تگ برای ایجاد سطرهای جدول
  2. <th> : این تگ برای ایجاد ستون های جدول
  3. <td> : این تگ برای ایجاد سلول های جدول
  4. <caption> : این تگ برای ایجاد کپشن جدول
  5. <thead> : این تگ برای ایجاد هدر ثابت برای جدول
  6. <tbody> : این تگ برای ایجاد بدنه ثابت برای جدول
  7. <tfoot> : این تگ برای ایجاد فوتر ثابت برای جدول
  8. <colgroup> : این تگ برای انتخاب گروهی ستون های جدول

مثل های تگ table در HTML

و حالا در ادامه به مشاهده شش مثال از این تگ table میپردازیم تا بیشتر و بهتر با این تگ آشنا شوید.

اولین مثال : ایجاد یک جدول در صفحه ( فاقد استایل )

<body>
  <table>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td>D</td>
      <td>E</td>
      <td>F</td>
    </tr>
  </table>
</body>

دومین مثال : ایجاد یک جدول با ستون های مشخص + استایل داده شده از طریق کد های CSS

<table>
 <tr>
  <th>نام</th>
  <th>فامیلی</th>
 </tr>
  
 <tr>
  <td>میلاد</td>
  <td>علیزاده</td>
 </tr>
  
 <tr>
  <td>ساسان</td>
  <td>درویش پور</td>
 </tr>
  
 <tr>
  <td>علی</td>
  <td>نریمانی</td>
 </tr> 
</table>

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

<table>
  <caption>WWW.WPPUSH.IR</caption>
    <tr>
       ...
    </tr>
</table>

راستی اگر دنبال آموزش html css پروژه محور هستید می توانید از دوره ی آموزش وردپرس پوش استفاده کنید. جهت مشاهده ی 28 ساعت ویدیو آموزشی با پشتیبانی مادام العمر روی این لینک کلیک کنید

شماره چهار : برای مشخص کردن انواع قسمت های جدول مثل هدر ، بدنه و فوتر میتوانیم به ترتیب از تگ های thead و tbody و tfoot استفاده کنیم.

<table>
 
  <thead>
   <tr>
    ...
   </tr>
  </thead> 
  <tbody>
   <tr>
    ...
   </tr>
  </tbody>
 
  <tfoot>
   <tr>
    ...
   </tr>
  </tfoot>
 
</table>

مثال پنجم: استفاده از صفت rowspan برای همگام سازی سطرها در جداول

<tr>
 <td rowspan="2">A</td>
 <td>B</td>
 <td>C</td>
</tr>

آخرین مثال : استفاده از صفت colspan برای همگام سازی سطرها در جداول

 <tr>
   <td colspan="2">سایت آموزشی wppush</td>
 </tr>

پشتیبانی مرورگرها از تگ table

در جدول زیر میتوانید مرورگرهای اینترنتی که از تگ table در HTML پشتیبانی میکنند را مشاهده نمایید و بدانید که آیا از مروگر مورد استفاده شما هم پشتیبانی میکنند یا خیر…

پشتیبانی مرورگر هار از تگ table

پشتیبانی تگ table از صفات و رویدادهای عمومی

تگ table قابلیت پشتیبانی از تمام صفات عمومی و رویدادهای عمومی در HTML دارد.

نکات و توضیحات ضروری

  • چندین سال پیش طراحان سایت ، برای قالب بندی سایت از جداول استفاده میکردند. ولی امروزه به لطف وجود تگ div یا سیستم grid یا سیستم flex box دیگه نیازی به استفاده از جدول ها برای قالب بندی سایت های نیست.
  • اکنون بخاطر دلایل ذکر شده در سطر بالا ستفاده از جدول برای قالب بندی یک وبسایت کاری کاملا غیر حرفه ای و اشتباه است و در سئو هم تاثیر منفی از خود به جای میگذارد.

دستوراتی که بصورت پیش فرض در CSS از آن استفاده میکنیم.

مرورگر های حال حاضر دنیا تگ table را به صورت کد های css به شکل زیر نمایان میکنند که شما عزیزان می توانید بدون هیچ تغییر خاصی از این کد های آماده استفاده کنید.

table {
  display: table;
  border-collapse: separate;
  border-spacing: 2px;
  border-color: gray;
}

شما عزیزان همچنین میتوانید برای ارتقاء دانش برنامه نویسی فرانت اند خود دوره آموزشی HTML CSS پروژه محور ما را مشاهده نمایید…

برای امتیاز به این نوشته کلیک کنید!
[کل: 0 میانگین: 0]

در صورتی که مشکلی دارید و قادر به حل آن نیستید می توانید با ما در تماس باشید

فرم درخواست پشتیبانی (فرم زیر پست ها)

برچسب ها:

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