آموزش تگ table در HTML

آموزش تگ table در HTML
دوست من سلام امیدوارم حالتون عالی و پر از انرژی باشید. توی این بخش از آموزش html و css قراره که با آموزش تگ table
در HTML به صورت کامل آشنا بشید.
تگ table در HTML
همان طور که از نام تگ table
پیداست. این تگ تگی است که با استفاده از آن میتوانیم یک جدول را در یک صفحه وبسایتمان ایجاد کنیم. یک سری از تگ ها هم هستند که همگی داخل این تگ <table> قرار میگیرند که این تگ ها به صورت زیر هستند.
- <tr> : این تگ برای ایجاد سطرهای جدول
- <th> : این تگ برای ایجاد ستون های جدول
- <td> : این تگ برای ایجاد سلول های جدول
- <caption> : این تگ برای ایجاد کپشن جدول
- <thead> : این تگ برای ایجاد هدر ثابت برای جدول
- <tbody> : این تگ برای ایجاد بدنه ثابت برای جدول
- <tfoot> : این تگ برای ایجاد فوتر ثابت برای جدول
- <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
قابلیت پشتیبانی از تمام صفات عمومی و رویدادهای عمومی در HTML دارد.
نکات و توضیحات ضروری
- چندین سال پیش طراحان سایت ، برای قالب بندی سایت از جداول استفاده میکردند. ولی امروزه به لطف وجود تگ div یا سیستم grid یا سیستم flex box دیگه نیازی به استفاده از جدول ها برای قالب بندی سایت های نیست.
- اکنون بخاطر دلایل ذکر شده در سطر بالا ستفاده از جدول برای قالب بندی یک وبسایت کاری کاملا غیر حرفه ای و اشتباه است و در سئو هم تاثیر منفی از خود به جای میگذارد.
دستوراتی که بصورت پیش فرض در CSS از آن استفاده میکنیم.
مرورگر های حال حاضر دنیا تگ table
را به صورت کد های css به شکل زیر نمایان میکنند که شما عزیزان می توانید بدون هیچ تغییر خاصی از این کد های آماده استفاده کنید.
table { display: table; border-collapse: separate; border-spacing: 2px; border-color: gray; }
شما عزیزان همچنین میتوانید برای ارتقاء دانش برنامه نویسی فرانت اند خود دوره آموزشی HTML CSS پروژه محور ما را مشاهده نمایید…
در صورتی که مشکلی دارید و قادر به حل آن نیستید می توانید با ما در تماس باشید
دیدگاهتان را بنویسید