جداول در html

[Sina]

کاربرد جداول در 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 پیاده‌سازی کنید باید زمان و انرژی بیشتری صرف کنید.(توضیحات استاد کرامتی فر)

در کل با توجه به این نکات کلیدی :

1. حجم کمتر صفحه تولید شده
2. Page rank بالاتر در گوگل و سایر search engine ها
3. قالب انعطاف پذیرتر
4. برای قراردادن متن و تصویر در وب توصیه شده که از div استفاده شود
5. کنترل بیشتر بوسیله css
6. جدول صرفا برای ساختار tabی مناسب است
7. کنترل و حرکت توسط آژاکس

کار با جداول در 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>

خروجی در مرورگر​

[h=4]این جدول دارای خط یا بوردر نمی باشد[/h]

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>

[h=4]عنوان عمودی در جداول[/h]

نام:	سعید صبح خیز
شماره تلفن:	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: A B C D
This cell contains a list apples bananas pineapples	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>

منبع: learning.asarayan.com