آموزش طراحی سایت(جلسه ۱۲):Table جدول

Table جدول

جدول یکی از سنگینترین عناصر وبطراحی سایت است و سرعت لود شدن سایت را پایین میآورد. بنابراین تا میتوانیدکمتر استفاده کنید.طراحی سایت برای ترسیم جدول به دو تگ < >tr20و < >td21نیاز داریم که trها بیانگر تعداد سطرو tdها بیانگر تعداد ستونهای جدول هستند. ابتدای جدول با > <tableو انتهای آن با > </tableمشخصمیشود.

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

Cell1	Cell2	Cell3
Cell4	Cell5	Cell6

<table> <tr> <td>Cell1</td> <td>Cell2</td> <td>Cell3</td> </tr> <tr> <td>Cell4</td> <td>Cell5</td> <td>Cell6</td> </tr> </table>

صفات تگ :table

چینش ارتفاعی نوشته را در سلولها مشخص میکند	”valign=” middle top bottom
ضخامت خطهای جدول را مشخص میکند	”border=”۱
طول و ارتفاع جدول را مشخص میکند	”width=”۵۰۰px” height=”۴۰۰px
رنگ پس زمینه را مشخص میکند	”bgcolor=”green

۲۰ table row۲۱ tableطراحی سایت divisiontd
tr
۲۷

رنگ خط دور جدول را مشخص میکند	”bordercolor=”red
فاصله متن را از خط دور سلولها تعیین میکند	”cellspacing=”۱۰px
فاصله سلولهای جدول از یکدیگر را تعیین میکند	”cellpadding=”۵px
چینش جدول در صفحه را مشخص میکند	”align=”center right left

نکاتی درباره قالب اصلی سایت:طول سایت نباید طولانی شود؛ یعنی نباید scrollافقی داشته باشد. طراحی سایتطبق آمار، رزولوشن برای اکثر کاربران
بیشتر از ۱۰۲۴در ۷۶۸است. پس ساختار کلی سایت باید چیزی شبیه این باشد:تگ :td– در تگ tdنمیتوان heightداد. باید از widthاستفاده کنید.
– بهتر است بین tdهای خالی ;  تایپ شود.۹۵۰px

۱۵۰px
۱۵۰pxMenu	محتوای صفحه

Footer

۱۰۰pxHeader
۲۱برای ادغام ستونی، از صفت colspanاستفاده میشود.طراحی سایت مثلاً برای ادغام دو سلول از کد “colspan=”2استفاده کنید و به تعداد -۱ ،colspanعدد از tdها را حذف کنید. یعنی برای همین مثال، یک > <tdباید
حذف کنید و برای ادغام ۳ستون دو عدد از tdها را پاک میشود.
مثال)

<table border=“1” width=“200” height=“200”> <tr> <td colspan=“2”> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table>

نکته: در ادغام سطری به طراحی سایتجای colspanاز rowspanاستفاده کنی