تگ Table در HTML

تگ Table در HTML برای اکران اطلاعات به طور جدول (سطر*ردیف ) به کارگیری میشود. تگ جدول در HTML ساخته شده از عنصر و یک یا این کهتعدادی عنصر مشخص و معلوممیشود)، هر سطر مشتمل بریک‌سری سلول میباشد (که با تگ ،، ، و نیز میباشند. طراحی سایت در مشهد کاربرد تگ Table در HTML کاربرد تگ Table در HTML در html از جداول برای مدیر طرح کاغذتحت عنواناستعمالمی گردد، مثلا برای قسمت سرصفحه، نوار پیمایش، محتوای مهم، قسمت پاورقی و غیره. البته برای مدیر طرح برگه سفارش می شود از تگ div روی جدول استعمالفرمائید.

جداول در معاشروزانه کاربردهای متعددیدارا‌هستند و بخش اعظمی از داده ها در فرمت سطر (Row) و ردیف (Column) مرتبط به هم اکران داده میگردند. اکران محتوا در جدول این قابلیت و امکان را میدهد که با سرعت بیشتری داده هاغامض را ارزیابی و به پیوندهادر بینآن ها پی موفقیت و در غایت به سودمتبوع رسید. فلسفه اساسیبه کار گیری جداول در صفحه هایاینترنت نیز از این قاعده جدا نیست و برای گروه بندی و اکران محتوایی که نیاز به سطر و ردیفدارا‌هستند، استعمالمیگردد.

به صورتنمونه برای داده ها آماری، اکران نمرات، مقایسه محصول ها، داده های تحلیلی و هر چیزی که به اصطلاح جدولی یا این که Tabular میباشد، می قدرت از تگ Table در HTML بهره مند شد. ولیبه جهت استحکام ساختار و راحتی شغلبازه ها از جدول در زمینه یپیاده سازی لایه ها و هیبت بندی ظواهرصفحه هایاینترنت نیز به کار گیریمیشد که امروزه به جهت معرفی گویش CSS سفارش میشود از کاربرد جدول به خصوص در پیاده سازیپوسته پروژه هایی که به حصولجایگاهعالی در موتورهای کاوش و اصول بهینه سازی (بهینه سازی) متکی میباشند اجتناب نمایید. ولی برای پیاده سازیپوسته های تازه، تگ های دیگری مانند تگ div موردعالی و پیشنهادشد‌ه‌است.

عمل با تگ Table در HTML

حالقدم به قدم پیش می‌رویم تا با آمورش تگ Table در HTML یک جدول مانند جدول ذیل را بسازید.

گاماولیه: ساخت‌و‌ساز سطرهای جدول با به کارگیری از تگ tr

در تگ Table در HTML تگ که از واژه و کلمه table row گرفته گردیده وظیفه تولید سطرهای جدول را دارااست. در نمونه بالا جدول شما دارنده ۴ سطر میباشد که کد HTML ما تا اینجا به اینصورت میباشد:

و میباشد. یک جدول دربردارنده سطرهایی میباشد (که با تگ

معلوم می‌گردد) و یک جدول دربرگیرنده داده ها سرتیتر میباشد (که با تگ معین میگردد). جداول بغرنج خیس نیز مشمول ارکان،

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

گام دوم: ساخت منزل‌ های تیتر با استعمال از تگ th

در تگ Table در HTML تگ که از کلمه و واژه table heading گرفته گردیده وظیفه ساخت منزل‌ های تیتر را داراست. در جدولی که شما دارید ۴ منزل تیتر در سطر نخستین وجود داراست (اسم – اسم خانوادگی – سن – شماره تماس). این منزل‌ ها را به راحتی می‌ قدرت به سطر اولیه اضافه کرد.

اعتنا نمائید در تگ th مرتبط با شماره تماس از صفت colspan مستعمل میباشد. این صفت انتخاب می‌ نماید که یک منزل فضای چندین ردیف را اشغال نماید. در اینجا به جهت اینکه سطرهایی با ۱ شماره تماس وجود دارا هستند مقدار این صفت را روی عدد ۱ تهیه نمایید.

گام سوم: ساخت‌و‌ساز منزل‌ های داده با به کار گیری از تگ td

در تگ Table در HTML تگ که از واژه table data گرفته گردیده وظیفه ساخت منزل‌ های داده را داراست. در جدول شما ۳ سطر برای داده‌ ها وجود داراست. در غایت کد شما به کد ذیل تبدیل می‌ خواهد شد:

تگ های جدول در HTML

اسم تگ توضیحات

یک جدول تمجید می نماید.

یک سطر نو در جدول تمجید می نماید.

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

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

محتوای بدنه جدول را دسته بندی می نماید.

محتوای سرآیند جدول را تیم بندی می نماید.

محتوای پانویس جدول را تیم بندی می نماید.

نمونه از تگ table در HTML

نمونه شماره ۱ تشکیل داد تگ Table در HTML: ساخت و ساز یک جدول در یک ورقه (سوای هیچ استایلی)

یک سلول سرآیند در جدول تعریف‌و‌تمجید می نماید.

یک سلول در جدول تمجید می نماید.

یک تیتر برای جدول تعریف و تمجید می نماید.

نمونه شماره ۲ : ایجاد کرد یک جدول با ردیف های معلوم + استایل از روش CSS

نمونه شماره ۳ : معلوم کردن کپشن(Caption) برای جدول

نمونه شماره ۴ : استعمال از تگ های thead و tbody و tfoot برای معین کردن هدر، بدنه مهم و فوتر جدول

نمونه شماره ۵ : ترکیب کردن سطرها با به کار گیری از صفت rowspan

نمونه شماره ۶ : ترکیب کردن ردیف ها با به کارگیری از صفت colspan

چه مرورگرها از تگ Table در HTML دفاع می نمایند؟

چه مرورگرها از تگ Table در HTML پناه می نمایند؟

پژوهش تگ در HTML 4.01 و HTML5

ویژگی های”align” ،”bgcolor” ،”border” ،”cellpadding” ،”cellspacing” ،”frame” ،”rules” ،”summary” و “width” در HTML5 دفاعنمی‌شود.

هواخواهی تگ Table در HTML از صفات و رویدادهای همگانی

تگ جدول از صفات همگانی (Global Attributes) و نیز از رویدادهای همگانی (Event Attributes) در HTML حمایت می نماید.

امرها CSS پیش فرض در تگ جدول

معمولا مرورگرها تگ table در html را به طور پیش فرض با امرها CSS پاییناکرانمیدهند:

table {

display: table;

border-collapse: separate;

border-spacing: 2px;

border-color: gray;

}

استایل دهی به جدول

تا اینجا شما ساختار جدول را ساخت‌و‌ساز کردید. برای اینکه خطوط جدول را رسمنمایید می‌ توانید از دستورها استایل تحتبه کار گیریفرمائید:

table, th, td {

border: 1px solid black;

border-collapse: collapse;

}

در‌اینامرآغاز ۳ تگ table و th و td گزینش شدند و در‌پیخصوصیت border و border-collapse را به آن هااجرافرمائید. این خصوصیات خطوط جدول را رسم می‌ نمایند. برای اینکه منزل‌ های جدول کناره‌ ای به خویش بگیرند تا متن‌ ها بدیهیخیسچشم شوند، می‌اقتدار به آحادمنزل‌ های جدول خصوصیت padding را ایفا کرد.

th, td {

padding: 10px;

}

با افزودن استایل‌ ها، اکنون دیگر بایستی دقیقا یک جدول مانند جدولی که در اولِیادگرفتن آوردیم، داشته باشید.