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طراحی سایت division
td
tr

۲۷

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

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

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

 

Footer

۱۰۰px
Header

۲۱
برای ادغام ستونی، از صفت 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استفاده کنی

بارگذاری نوشته های مرتبط بیشتر
بارگذاری بیشتر در طراحی وب

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

نه − پنج =

بررسی کنید

۸ راه افزایش ترافیک بازدیدکنندگان با شبکه های اجتماعی

۸ راه افزایش ترافیک بازدیدکنندگان با شبکه های اجتماعی امروز در طراحی سایت اسپیناس در خصوص …