0 اسپیناس وب اسپیناس وب

افتخار طراحی سایت بیش از ۱۷۰۰ کسب و کار ایرانی و خارجی

نمونه کارها

آموزش طراحی سایت(جلسه 12):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=”1
طول و ارتفاع جدول را مشخص ميکند width=”500px” height=”400px
رنگ پس زمينه را مشخص ميکند bgcolor=”green

20 table row
21 tableطراحی سایت division
td
tr

27

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

نکاتی درباره قالب اصلی سایت:
طول سايت نبايد طولاني شود؛ يعني نبايد scrollافقي داشته باشد. طراحی سایتطبق آمار، رزولوشن برای اکثر کاربران
بيشتر از 1024در 768است. پس ساختار کلي سايت بايد چيزی شبيه اين باشد:
تگ :td
– در تگ tdنميتوان heightداد. بايد از widthاستفاده کنيد.
– بهتر است بين
tdهای خالي ;  تايپ شود.
950px

150px
150px
Menu
محتوای صفحه

 

Footer

100px
Header

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

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

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

درگ کنید مشاهده بستن پخش
0%