کاربرد جداول در HTML بسیار کم شده است و طراحان وب سایت بیشتر از تگ Div استفاده می کنند تا HTML . چند دلیل هم برای عدم استفاده از جداول در HTML وجود دارد که خلاصه بار به آنها اشاره ای میکنم .
div کد کمتر و بهینهتری (<div> </div>) نسبت به یک table (که معادل <table><tr><td></td></tr></table>) ایجاد میکند. که این هم باعث کاهش حجم صفحه تولیدی میشود و هم باعث لود شدن سریعتر صفحه .
نکته دیگری که وجود دارد آن است که crawler ها که وظیفه جستجوی و ذخیره کردن صفحات را برای موتورهای جستجو ( مثل گوگل ) بازی می کنند. چون بصورت معنایی صفحات را crawl می کنند بنابراین اگر صفحه شما بهتر و معنایی تر ایجاد شده باشد ، از Page rank بالاتری هم برخوردار خواهد بود.
نکته دیگری که یک div را در قالب بندی دردرجه بالاتری قرار می دهد، انعطاف پذیری آن در CSS هاست. به این معنی که شما می توانید یک قالب چندین منظوره ایجاد کنید و بعد با تغییر مکان div ها که با css انجام میدهید . کل قالب صفحه تغییر شکل پیدا میکند.
حالا با این همه برتری div نسبت به table ممکن است برای شما این سوال ایجاد شود که table برای چه مواردی باید استفاده شود. طراحان HTML همانطور که div را برای قالب بندی وقرار دادن متن و تصویر پیادهسازی کردند. table را هم برای ایجاد صفحات به شکل Tab و ایجاد جداول (لیست های موجود در صفحه) بوجود آوردند. در اکثر مواقع توصیه میشود که برای پیادهسازی Tab ها از table استفاده کنید. همانطور که مسلما خود شما هم متوجه شدید با استفاده از یک table براحتی میتوان یک tab را پیادهسازی کرد. درصورتی که اگر بخواهید همان tab را با div پیادهسازی کنید باید زمان و انرژی بیشتری صرف کنید.(توضیحات استاد کرامتی فر)
در کل با توجه به این نکات کلیدی :
- حجم کمتر صفحه تولید شده
- Page rank بالاتر در گوگل و سایر search engine ها
- قالب انعطاف پذیرتر
- برای قراردادن متن و تصویر در وب توصیه شده که از div استفاده شود
- کنترل بیشتر بوسیله css
- جدول صرفا برای ساختار tabی مناسب است
- کنترل و حرکت توسط آژاکس
کار با جداول در HTML
جدول بوسیله تگ table در html نشانه گذاری می شود . هر جدول تشکیل شده است از تعدادی سطر و ستون . برای ایجاد سطر از تگ <tr> و برای ایجاد ستون از تگ <td> استفاده می شود .
ساختار شکلی تگ table به شکل زیر می باشد
<
p
></
p
>
<
p
style
=
"text-align: left;"
dir
=
"ltr"
><
table
border
=
'1'
>
<
tr
>
<
td
>سطر اول / سلول اول</
td
>
<
td
>سطر اول / سلول دوم</
td
>
</
tr
>
<
tr
>
<
td
>سطر دوم / سلول اول</
td
>
<
td
>سطر دوم / سلول دوم</
td
>
</
tr
>
</
table
></
p
>
<
p
style
=
"text-align: left;"
dir
=
"ltr"
></
p
>
خروجی در مرورگر به شکل زیر می باشد
سطر اول / سلول اول | سطر اول / سلول دوم |
سطر دوم / سلول اول | سطر دوم / سلول دوم |
سرتیترها در جداول
در بیشتر جدول هایی که ایجاد می شود ، بالای سطرها دارای یک عنوان می باشد که به صورت ضخیبم تر نمایش داده می شود
برای ایجاد سر تیتر یا عنوان در تگ table از تگ th استفاده می شود که در ادامه توضیح میدهم
<
p
></
p
>
<
p
style
=
"text-align: left;"
dir
=
"ltr"
><
table
border
=
'1'
>
<
tr
>
<
th
>عنوان اول</
th
>
<
th
>عنوان دوم</
th
>
</
tr
>
<
tr
>
<
td
>سطر اول / سلول اول</
td
>
<
td
>سطر اول / سلول دوم</
td
>
</
tr
>
<
tr
>
<
td
>سطر دوم / سلول اول</
td
>
<
td
>سطر دوم / سلول دوم</
td
>
</
tr
>
</
table
></
p
>
<
p
style
=
"text-align: left;"
dir
=
"ltr"
></
p
>
خروجی در مرورگر
عنوان اول | عنوان دوم |
---|---|
سطر اول / سلول اول | سطر اول / سلول دوم |
سطر دوم / سلول اول | سطر دوم / سلول دوم |
جداول بدون کادر
گاهی نیاز دارید جدول هایی بکشید که از لحاظ نظم دارای قواعد خاصی در صفحه باشد ولی بدون دارای کادری نباشد که مشخص بشود متن در جدول قرار گرفته است . برای درک بهتر به مثال زیر توجه کنید
<
p
></
p
>
<
p
style
=
"text-align: left;"
dir
=
"ltr"
><
h4
>این جدول دارای خط یا بوردر نمی باشد</
h4
>
<
table
>
<
tr
>
<
td
>100</
td
>
<
td
>200</
td
>
<
td
>300</
td
>
</
tr
>
<
tr
>
<
td
>400</
td
>
<
td
>500</
td
>
<
td
>600</
td
>
</
tr
>
</
table
></
p
>
<
p
style
=
"text-align: left;"
dir
=
"ltr"
></
p
>
خروجی در مرورگر
این جدول دارای خط یا بوردر نمی باشد
100 | 200 | 300 |
400 | 500 | 600 |
ایجاد عنوان به صورت عمودی
در مثال بالا طریقه ایجاد جداولی که دارای یک عنوان در بالای صفحه هستند را توضیح دادم . در این بخش می خواهم عنوان صفحه را در قسمت عمودی صفحه یا جدول قرار بدهم
<
p
></
p
>
<
p
style
=
"text-align: left;"
dir
=
"ltr"
><
h4
>عنوان عمودی در جداول</
h4
>
<
table
border
=
'1'
>
<
tr
>
<
th
>نام:</
th
>
<
td
>سعید صبح خیز</
td
>
</
tr
>
<
tr
>
<
th
>شماره تلفن:</
th
>
<
td
>555 77 854</
td
>
</
tr
>
<
tr
>
<
th
>شماره همراه:</
th
>
<
td
>555 77 855</
td
>
</
tr
>
</
table
></
p
>
<
p
style
=
"text-align: left;"
dir
=
"ltr"
></
p
>
عنوان عمودی در جداول
نام: | سعید صبح خیز |
---|---|
شماره تلفن: | 555 77 854 |
شماره همراه: | 555 77 855 |
ایجاد دو سلول در یک سطر
در بعضی مواقع نیاز دارید که در یک سطر چند سلول به صورت عمودی داشته باشید . به ثمال زیر توجه کنید
<
p
></
p
>
<
p
style
=
"text-align: left;"
dir
=
"ltr"
><
table
border
=
'1'
>
<
tr
>
<
th
>نام خانوادگی:</
th
>
<
td
>صبح خیز</
td
>
</
tr
>
<
tr
>
<
th
rowspan
=
'2'
>تلفن :</
th
>
<
td
>88931847</
td
>
</
tr
>
<
tr
>
<
td
>88931848</
td
>
</
tr
>
</
table
></
p
>
<
p
style
=
"text-align: left;"
dir
=
"ltr"
></
p
>
خروجی در مرورگر
نام خانوادگی: | صبح خیز |
---|---|
تلفن : | 88931847 |
88931848 |
قرار دادن متن .لیست و تصویر در سطر و سلول جدول
<
table
border
=
'1'
>
<
tr
>
<
td
>
<
p
>This is a paragraph</
p
>
<
p
>This is another paragraph</
p
>
</
td
>
<
td
>This cell contains a table:
<
table
border
=
'1'
>
<
tr
>
<
td
>A</
td
>
<
td
>B</
td
>
</
tr
>
<
tr
>
<
td
>C</
td
>
<
td
>D</
td
>
</
tr
>
</
table
>
</
td
>
</
tr
>
<
tr
>
<
td
>This cell contains a list
<
ul
>
<
li
>apples</
li
>
<
li
>bananas</
li
>
<
li
>pineapples</
li
>
</
ul
>
</
td
>
<
td
>HELLO</
td
>
</
tr
>
</
table
>
خروجی در مرورگر
This is a paragraph This is another paragraph |
This cell contains a table:
|
||||
This cell contains a list
|
HELLO |
ایجاد فاصله متن از سطر و ستون <
table
border
=
'1'
cellpadding
=
'10'
>
<
tr
>
<
td
>First</
td
>
<
td
>Row</
td
>
</
tr
>
<
tr
>
<
td
>Second</
td
>
<
td
>Row</
td
>
</
tr
>
</
table
>
<
table
border
=
'1'
cellspacing
=
'10'
>
<
tr
>
<
td
>First</
td
>
<
td
>Row</
td
>
</
tr
>
<
tr
>
<
td
>Second</
td
>
<
td
>Row</
td
>
</
tr
>
</
table
>