زوپیرنت

در ادامه ی آموزش HTML که پایه ی طراحی سایت هست به بخش جدول سازی Table و خصوصیات پیشرفته ی آن می پردازیم.

Table

برای ساختن هر سایت بر پایه ای HTML از ساختار اصلی Table برای جدول سازی و قسمت کردن و مرتب کردن سایت استفاده می شده است . در حال حاضر Div بیشتر در این امر مشارکت دارد که بعد ها به آن می پردازیم ولی هنوز نیز Table کاربرد دارد.پس باید طریقه ی کد نوشتن Table و ساختن جداول را با Table بدانیم.برای درست کردن یک Table به این صورت عمل می کنیم:

<table>

</table>

Table row

بعد از اینکه ساختار کل Table را پیاده سازی کردیم باید شروع به درست کردن اجزای Table کنیم.یکی از تگ های مهم برای ساخت جزئیات Table تگ tr یا همون ردیف هست که به ازای هر تگ یک ردیف در جدول ساخته خواهد شد.تگ tr

<table>
 <tr>
 </tr>
</table>

Table data

بعد از درست کردن ردیف باید جدول داده درست کنید.به صورتی که حالت ستون مانند قرار خواهند گرفت در هر ردیف.تگ : td

<table>
 <tr>
 <td>zoopirnet</td>
 <td>HTML</td>
 </tr>
</table>

Table heading

این تگ برای قرار دادن عنوان درون جدول هست.عنوان ها ضخیم هستند و تراز بندی آن ها در وسط می باشد.تگ th

<table border="1">
 <tr>
 <th>Version</th>
 <th>Published year</th>
 </tr>
 <tr>
 <td>HTML+</td>
 <td>1993</td>
 </tr>
</table>

Heading در HTML

Captions

این تگ برای قرار دادن عنوان بیرون جدول هست.تگ:Caption

< table border="1">
 <caption>HTML History</caption>
 <tr>
 <th>Version</th>
 <th>Published year</th>
 </tr>
 <tr>
 <td>HTML+</td>
 <td>1993</td>
 </tr>
</table>

Caption در HTML

بعضی خصوصیات Table 

Border : حاشیه ی جدول که اگر بطور پیش فرض ۰ است و نمایش داده نمیشود مثلا ما در مثال بالا Border را مساوی ۱ قرار دادیم که نمایش داده شود.

bgcolor : برای استفاده ی رنگ در پیش زمینه هست.بطور مثال : bgcolor=”#00FF00″

cellpadding : برای قرار دادن حاشیه خالی بین سلول هاست.بطور مثال : cellpadding=”10″

cellspacing : برای تعیین فاصله بین سلول هاست.بطور مثال : cellspacing=”10″

align : برای تراز بندی جداول بکار می رود.بطور مثال : align=”right”

width : برای تعیین عرض جداول و سلول ها بکار میرود. بطور مثال :width=”400″