راهنما:جدول/اچ‌تی‌ام‌ال و جداول

Source editor logo.svg

معرفی جدول‌ها
چرا و چگونه

ویرایش جدول‌ها
اصول اولیه

گسترش دادن جدول‌ها
اضافه کردن سطرها و ستون‌ها

چکیده
مرور آنچه آموخته‌اید



چگونگی افزودن توضیحات اچ‌تی‌ام‌ال

توضیحات با استفاده از <!-- و --> اچ‌تی‌ام‌ال افزوده می‌شوند. برای نمونه، شما می‌توانید توضیحی به یک سطر جدول مانند زیر اضافه کنید:

| row1cell1 || row1cell2 ||row1cell3 <!-- This is a comment -->

این توضیح کاری انجام نمی‌دهد، اما می‌تواند برای شرح چگونگی کارکرد جداول مفید باشد.

چگونگی افزودن خصیصه‌های اچ‌تی‌ام‌ال به محتوای ستون

کد زیر را در نظر بگیرید:

{| class="wikitable"
|+ Caption title
|-
! header1
! header2
! header3
|-
| row1cell1
| row1cell2
| row1cell3
|-
| row2cell1
| row2cell2
| row2cell3
|}

جدول زیر را تولید می‌کند:

Caption title
header1 header2 header3
row1cell1 row1cell2 row1cell3
row2cell1 row2cell2 row2cell3

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

ستون‌ها می‌توانند دارای محتوا باشند، مانند row1cell1 در جدول بالا. ویکی‌متن ستون‌ها عبارتند از: |، ||، !، !! و |+.

بنابراین خصیصه‌های اچ‌تی‌ام‌ال می‌توانند مانند زیر نوشته شوند:

| HTML | row1cell1
| HTML | row1cell2
| HTML | row1cell3

یا مانند این: | HTML | row1cell1 || HTML | row1cell2 || HTML | row1cell3

افزودن خصیصه به سطر عنوان ستون‌ها می‌تواند مانند زیر اضافه شوند:

! HTML | header1
! HTML | header2
! HTML | header3

یا مانند این: ! HTML | header1 !! HTML | header2 !! HTML | header3

افزودن خصیصه به عنوان جدول مانند روبرو انجام می‌شود: |+ HTML | Caption Title

برای نمونه، در زیر جدولی با پس‌زمینه به رنگ زرد تولید می‌سازیم. خصیصه اچ‌تی‌ام‌ال که رنگ پس‌زمینه را می‌ساید style="background: yellow" است. این خصیصه می‌تواند به چند ستون در یک جدول مانند زیر اضافه شود:

{| class="wikitable"
|+ Caption: some cells yellow.
|-
! header1
! header2
! header3
|-
| style="background: yellow" | row1cell1
| row1cell2
| style="background: yellow" | row1cell3
|-
| row2cell1
| style="background: yellow" | row2cell2
| row2cell3
|}

کد بالا جدول زیر را تولید می‌کند:

Caption: some cells yellow.
header1 header2 header3
row1cell1 row1cell2 row1cell3
row2cell1 row2cell2 row2cell3

همانطور که مشاهده می‌کنید، پس‌زمینه به رنگ زرد به چند ستون اضافه شده‌است.

چگونگی افزودن خصیصه‌های اچ‌تی‌ام‌ال به جداول و سطرها

جداول و سطرها از ویکی‌متن روبرو استفاده می‌کنند: {|، |- و |}. آنها به طور مستقیم محتوا نگه نمی‌دارند. بنابراین، آنها نباید بعد از هر خصیصه اچ‌تی‌ام‌ال نویسهٔ خط عمودی (|) داشته باشند. همچنین، کدهای اچ‌تی‌ام‌ال افزوده‌شده پس از |} تأثیری بر جدول ندارند.

کدهای اچ‌تی‌ام‌ال می‌توانند به ویکی‌متن جدول مانند روبرو اضافه شوند: {| class="wikitable" HTML

کدهای اچ‌تی‌ام‌ال می‌توانند به ویکی‌متن سطر مانند روبرو اضافه شوند: |- HTML

برای نمونه، برای زردکردن محتوای یک جدول کد زیر استفاده می‌شود:

{| class="wikitable" style="background: yellow"
|+ Caption: yellow contents.
|-
! header1
! header2
! header3
|-
| row1cell1
| row1cell2
| row1cell3
|-
| row2cell1
| row2cell2
| row2cell3
|}

که نتیجه‌اش زیر خواهد شد:

Caption: yellow contents.
header1 header2 header3
row1cell1 row1cell2 row1cell3
row2cell1 row2cell2 row2cell3