در سلسله آموزشهای قبل آنلاینر به رنگ ها در html پرداختیم.
در این مقاله قصد معرفی کدنویسی بصورت tablebase را داریم.
برای تعیین موقعیت مطالب و محتوا در سایت احتیاج با عاملی برای نگهداری هر عامل در مکان خودش است. عامل هایی که این وظیفه را بر عهده دارند از جمله DIV و TABLE میباشند. که در این آموزش سعی بر معرفی TABLE را داریم.
در زیر یک جدول با 2 سطر و 2 ستون ایجاد شده است.
[html]
<html>
<head>
</head>
<body>
<table>
<tr>
<td> 1 </td>
<td> 2 </td>
</tr>
<tr>
<td> 3 </td>
<td> 4 </td>
</tr>
</table>
</body>
</html>
[/html]
همانطور که مشاهده میکنید برای ایجاد جدول از تگ TABLE استفاده میکنیم. تگ TR برای ایجاد سطر و برای ایجاد یک ستون از تگ TD استفاده می کنیم. بصورت پیش فرض جداول دارای کادر هستند و اگر در صفحه وبتان از جدول برای تعیین موقعیت عناصر وبتان استفاده میکنید این کادر ها نمای جالبی از خود نشان نمیدهند. بنا بر این باید با استفاده از صفات جدول کادر های جدول را حذف کنید تا هیچ نشانی از جدول در صفحه وب شما نباشد. با این کار جدول دیده نمیشود ولی عوامل داخل سلول های خود را به خوبی در مکان مناسب نگهداری میکند.
مزایا:
تنها حسن جدول و استفاده از آن اینست که مرز های آن قطعی هستند یعنی هیچ کدام از مطالب داخل آن از مرز ها بیرون نخواهند زد.
معایب:
اولین عیب استفاده از جدول در صفحه وب اینست که کل جدول بصورت یکباره لود میشود بدین معنی که اگر در یکی از سلول های جدول عکسی درج شده باشد تا این عکس بصورت کامل لود نشود هیچ نشانی از جدول در صفحه وب دیده نخواهد شد.
از دیگر معایب استفاده از جدول کاهش سرعت لود سایت است که این عیب را میتوان در قالب های پیشفرض بلاگفا و پرشین بلاگ به خوبی حس کرد. این کاهش سرعت زمانی به خوبی آشکار میشود که بخواهیم از جداول تو در تو استفاده کنیم.
و عیب دیگر استفاده از جداول پیچیده بودن آن است که همین عامل نه تنها باعث کاهش سرعت لود سایت میشود بلکه در رفع عیب سایت نیز مشکلاتی به وجود خواهد آورد. به عنوان مثال اگر تگی از سلول های جدول را بصورت اشتباه نبسته باشید رفع عیب آن مسلما وقت زیادی از شما خواهد گرفت.
در زیر مثالی از یک جدول آمده است:
| Row1, Cell 1 | Row1, Cell 2 | Free Column | ||
| Row2, Cell 1 | Row2, Cell 2 | |||
| Cell 1 | Cell 2 | Cell 3 | Cell 4 | |
| Free Row | ||||
[html]</pre>
<table dir="ltr" width="300" border="1" height="100" cellspacing="0">
<tr>
<td colspan="2">Row1, Cell 1</td>
<td colspan="2">Row1, Cell 2</td>
<td rowspan="3">Free Column</td>
</tr>
<tr>
<td colspan="2">Row2, Cell 1</td>
<td colspan="2">Row2, Cell 2</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td colspan="5">Free Row</td>
</tr>
</table>
<pre>[/html]
در آموزش بعد به طراحی بدون جداول (table less) و مزایا آن میپردازیم.
با آنلاینر همراه شوید …
