close
تبلیغات
پیاده‌سازی جدول در HTML
close
تبلیغات
ثبت لینک و بنر در اینجا
کسب درآمد اینترنتی
loading...
YourAds Here YourAds Here

مرجع مقالات رسمی طراحی سایت

بازدید : 4
چهارشنبه 8 آبان 1398 زمان : 11:36


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

طراحی سایت در مشهد

فراگیری پیشنهادی برای شما : فراگیری بدون نقص HTML و HTML5

پیاده‌سازی جدول در HTML
برای تولید جدول در HTML شما به چهار تگ اصلی نیاز دارید:
Table: او‌لین و مهم‌ترین تگ برای تولید جدول که محدوده پیاده‌سازی یک جدول را تمجید مینماید.
Tr: با استعمال از این تگ میتوانید ستون‌های جدول‌تان را تمجید نمائید. این تگ مخفف Table row میباشد.
Th: عنا وین هر مورد از ستون‌ها را مشخص و معلوم می نماید. این تگ مخفف Table heading میباشد.
Td: این تگ داده‌های مرتبط با هر مورد از سلول‌ها را وارد مینماید. این تگ مخفف Table Data میباشد.
ممکن میباشد با این تعاریف پاره ای حیران گردیده باشید ولی بایستی بیان‌کنم که با حل یک نمونه معمولی به طور کامل اختلال‌تان حل می‌گردد.

فکر کنید اینجانب یک جدول نیاز دارم که بتوانم در آن داده ها چندین نفر (اسم، اسم خانوادگی و سن) را وارد کنم. برای این فعالیت نیاز به سه تیتر دارم. همینطور از آنجایی که صرفا داده ها دو نفر را وارد میکنم پس به دو ستون نیز نیاز دارم. ولی یک ستون نیز برای قرار دادن عنوان ها می بایست بگذارم، به همین برهان تعداد ستون‌های اینجانب یا این که بهتر بیان‌کنم تعداد به کار گیری‌های اینجانب از تگ tr به سه گزینه میرسد.

یک گواهی html را مهیا نمایید و المان‌های اصلی html را وارد نمائید:


1
2
3
4
5
6
7
8
9


درحال حاضر در درون تگ body تگ table را قرار می دهیم تا محدوده جدول خودمان را انتخاب کنیم:


1
2
3
4
5


درحال حاضر در اولی گام بایستی ستون اولیه جدول خودمان را ساخت کنیم. قابل ذکر میباشد که بیان‌کنم هرمورد از تگ‌های tr، th و td جزوی از تگ table می باشند، به این ترتیب برای به کار گیری از آن ها می بایست تگ‌ها را دربین تگ table قرار دهید.

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


1
2
3
4
5

پس از اینکار تحت عنوان او‌لین ستون نیاز میباشد که عنا وین خویش را در آن در اختیار بگذاریم. برای قرار دادن عنوان ها نیاز میباشد که از تگ th به کارگیری کنیم. به کدهای پایین توجه نمائید:


1
2
3
4
5
6
7
Name: Family: Age:

بعداز اضافه کردن ستون عنوان ها درحال حاضر نیاز میباشد که داده‌های خویش را وارد کنیم. این را در لحاظ داشته باشید که برای قرار دادن خصوصیات هر آدم نیاز میباشد که یک ستون (tr) صحیح کنیم. به همین عامل یک توشه دیگر از تگ tr استعمال خوا‌هیم کرد. البته نکته اینجاست که‌این توشه دیگر بجای قرار دادن th از td استعمال میکنیم. پس ما به سه td احتیاج داریم. هرمورد از این tdها به طور تروتمیز در پایین تیتر خودشان قرار می گیرند. به نمونه پایین دقت نمائید:


1
2
3
4
5
6
7
8
9
10
11
12
13


Name: Family: Age:
Arastoo Abasi 150

به‌این فیس اینجانب توانستم یک جدول داشته باشم که دربردارنده عنا وین اسم،‌ اسم خانوادگی و سن میباشد، همینطور یک ستون دیگر نیز با داده ها دارای ربط را دارد. البته یک لحظه حوصله نمائید.
جداول نیاز به خط کشی -بوردر- ندارند؟ چرا‌که خیر، جدول سوای بوردر که جدول نمیشود. برای پیاده‌سازی این نصیب ما از خواص border به کار گیری می کنیم. این خواص وابسته به table میباشد. به نمونه پایین اعتنا نمایید:


1

اضافه کردنتیتر اصلی برای جدول
می‌قدرت یک متن منحصر را به جدول‌تان بیش ترنمایید که نشان‌دهنده تیتر آن باشد. به عنوان مثال بگوید که‌این جدول لیست پرسنلیار و همدم با ویژگی ها‌شان میباشد. برای اینکار کافی‌ست که از تگ caption در باطن table به کارگیریفرمائید. به نمونهذیلتوجهنمائید:


1
2
3
Monthly savings

تخصیص ستون و ردیف طولانی تر
با به کارگیری از این تکنیک می توانید برای هرمورد از سلول‌های‌تان ستون و یا این که ردیف‌های بیشتری تخصیص بدهید. به عنوان مثال بگویید که تیتر name به اندازه دو ستون جا بگیرد. یا این که بگویید که مقدار Arastoo به اندازه دو ردیف در کنار یکدیگر جا بگیرد. برای این فعالیت کافی‌ست که از خواص‌های rowspan برای تگ th و colspan برای td به کار گیری نمایید. به نمونه پایین اعتنا نمائید:


1
2
3
4
5
6
7
8
9
10
11
12
13


Name: Family: Age:
Arastoo Abasi 150

در انتها
بایستی باری دیگر اشاره کنم که جداول در صفحه ها اینترنت از المان‌های مهم به شمار می روند. با قرائت و تمرین کدها این مقاله می توانید به نیکی جداول متبوع خودتان را پیاده‌سازی فرمائید.

نظرات این مطلب

تعداد صفحات : 10

درباره ما
اطلاعات کاربری
نام کاربری :
رمز عبور :
  • فراموشی رمز عبور؟
  • آرشیو
    خبر نامه


    معرفی وبلاگ به یک دوست


    ایمیل شما :

    ایمیل دوست شما :



    چت باکس
    پیوندهای روزانه
    آمار سایت
  • کل مطالب : 103
  • کل نظرات : 0
  • افراد آنلاین : 1
  • تعداد اعضا : 0
  • بازدید امروز : 27
  • بازدید کننده امروز : 1
  • باردید دیروز : 0
  • بازدید کننده دیروز : 0
  • گوگل امروز : 0
  • گوگل دیروز : 0
  • بازدید هفته : 28
  • بازدید ماه : 92
  • بازدید سال : 392
  • بازدید کلی : 392
  • کدهای اختصاصی