این آموزش در تاریخ ۱۴۰۲/۰۶/۲۳ آپدیت شده است.
آموزش تگ table در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ table در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تگ Table در HTML
تگ table همونطور که از اسمشم مشخصه تگی است که با استفاده از آن میتوان یک جدول را در یک صفحه وب ایجاد کرد، حال یکسری تگ ها هستن که همگی درون تگ <table> مورد استفاده قرار میگیرند که این تگ ها عبارتند از :
- <tr> – برای ایجاد سطرهای جدول
- <th> – برای ایجاد ستون های جدول
- <td> – برای ایجاد سلول های جدول
- <caption> – برای ایجاد کپشن جدول
- <thead> – برای ایجاد هدر ثابت برای جدول
- <tbody> – برای ایجاد بدنه ثابت برای جدول
- <tfoot> – برای ایجاد فوتر ثابت برای جدول
- <colgroup> – برای انتخاب گروهی ستون های جدول
Free-Learn
مثال از تگ table در HTML
در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.
مثال شماره ۱ : ایجاد یک جدول در صفحه ( بدون هیچ استایلی )
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<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 برای جدول
|
1 2 3 4 5 6 |
<table> <caption>Www.Free-Learn.IR</caption> <tr> ... </tr> </table> |
مثال شماره ۴ : استفاده از تگ های thead و tbody و tfoot برای مشخص کردن ( هدر – بدنه اصلی – فوتر جدول )
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<table> <thead> <tr> ... </tr> </thead> <tbody> <tr> ... </tr> </tbody> <tfoot> <tr> ... </tr> </tfoot> </table> |
مثال شماره ۵ : ادغام کردن سطرها با استفاده از صفت rowspan
|
1 2 3 4 5 |
<tr> <td rowspan="2">A</td> <td>B</td> <td>C</td> </tr> |
مثال شماره ۶ : ادغام کردن ستون ها با استفاده از صفت colspan
|
1 2 3 |
<tr> <td colspan="2">سایت آموزشی فری لرن</td> </tr> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ table در HTML پشتیبانی میکنند یا خیر.
| نام مرورگر | Chrome | Firefox | Opera | Safari | Edge |
| پشتیبانی | بله | بله | بله | بله | بله |
Free-Learn
پشتیبانی از صفات و رویدادهای عمومی
تگ table از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.
Free-Learn
نکات و توضیحات
- سال ها قبل طراحان وب ، از جدول برای قالب بندی سایت استفاده میکردند ولی امروزه با وجود تگ DIV یا سیستم Grid یا سیستم فلکس باکس دیگه نباید اصلا از جدول استفاده نمایید.
- استفاده از جدول برای قالب بندی یک وبسایت کاری بسیار غیر حرفه ای و اشتباه می باشد و در سئو نیز تاثیر بسیار منفی دارد.
Free-Learn
دستورات CSS پیش فرض
معمولا مرورگرها تگ table را بصورت پیش فرض با دستورات CSS زیر نمایش میدهند.
|
1 2 3 4 5 6 |
table { display: table; border-collapse: separate; border-spacing: 2px; border-color: gray; } |
