تبلیغات
طراحی وب برای همه - جدول
به این وبلاگ خوش آمدید
بازدیدهای امروز:
بازدیدهای دیروز:
كل بازدیدها:
كل مطالب:
كل نظرات:
ایجاد صفحه: - ثانیه

  

فقط خدا
جدول

HTML Tables

======================


 نام نام خانوادگی
 آبراهام لینکلن
 آلبرت اینشتین
 لئوناردو داوینچی
هر جدول با تگ <table> شروع و با <table/> خاتمه می یابد.

برای ایجاد ردیف از <tr> , تگ پایانی <tr/> استفاده می کنیم.


برای ایجاد ستون یا به عبارت دیگر داده های جدول از <td> و تگ پایانی <td/> استفاده می کنیم.


در این تمرین می آموزیم چگونه یک جدول بسازیم.

جدول خصوصیتی به نام border (حاشیه) دارد که ما می توانیم با مقدار دادن عددی به آن آنرا تنظیم کنیم

در این تمرین با این خصوصیت بیشتر اشنا می شویم.


جدول
=====
همانطور که قبلا گفته شد جدول با تگ <table> مشخص می شود.
یک جدول به ردیف های مختلفی تقسیم می شود.(با تگ <tr>)
و هر ردیف نیرز به ستون های دیگری تقسیم می شود.(با تگ <td>)
td مخفف table data یا همان داده هی جدول می باشد.
این داده های جدول می تواند طیف وسیعی از اطلاعات را شامل شوند مانند :عکس ،متن ،لیست ،پاراگراف،فرم ها ،خطوط افقی ،جداول دیگر و ...
مثال زیر را در نظر بگیرید:

<table border="1">
<tr>
<td>سطر 1,ستون 1</td>
<td>سطر 1, ستنون 2</td>
</tr>
<tr>
<td>سطر 2, ستونl 1</td>
<td>سطر 2, ستون2</td>
</tr>
</table>

سطر 1, ستون 2 سطر 1, ستون 1
سطر 2, ستون 2 سطر 2, ستون1



جدول و خصوصیت Border
===================

اگر شما جدولی بدون مقدار دهی به خصوصیت border درست کنید ،جدول بدون حاشیه خواخد بود.
خب این کار بعضی وقت ها مورد استفاده قرار می گیرد ولی اغلب اوقات جدول را با حشیه درست می کنند تا نمای بهتری داشته باشد.

<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>

سر فصل ها در جدول
=============
تا الان سر فلصل ها را با تگ های <h> نمایش می دادیم ولی خب حالا در جدول از تگ <th> استفاده می کنیم.
مانند مثال زیر:

<table border=1>
<tr>
<th> سر فصل </th>
<th> سر فصل دوم </th>
</tr>
<tr>
<td> سلول اول </td>
<td> سلول دوم </td>
</tr>
<tr>
<td>سلول سوم</td>
<td>سلول چهارم</td>
</tr>
</table>
سر فصل سر فصل دوم
سلول اول سلول دوم
سلول سوم سلول چهارم


خانه های خالی
=============
خانه های بدون محتوا در بعضی مرورگر ها نمایش داده نمی شوند.


<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td></td>
</tr>
</table>


row 1, cell 1 row 1, cell 2
row 2, cell 1
نکته : اینجور خانه ها بدون حاشیه نمایش داده می شوند(البته مرور گر موزیلا فایر فاکس حاشیه دار نمایش میدهد)
برای یکدست شدن این امر در تمام مرورگر ها محتوای ستون خالی را برابر  (&nbsp;) مخفف non-breaking space
قرار می دهیم.با این حرکت خانه ی خالی در تمامی مرورگر ها با حاشیه نمایش داده خواهد شد.

نکته
=========
تگ های <thead>,<tbody> and <tfoot> نیز کاربرد دارند ولی پیش بینی میشود در نسخه های آینده html دیگر از آنها استفاده نشود.

تمرین بیشتر
============
این تمرین نمایش می دهد چگونه یک جدول بدون حاشیه است.

این تمرین نمایش می دهد چگونه سر فصل ها رو در جدول نمایش بدهیم(همون تمرین ابتدای آموزش است)

این تمرین نشان می دهد چگونه از  "&nbsp;" برای کنترل فضای خالی استفاده می کنیم.

این تمرین نشان می دهد چگونه با استفاده از تگ <caption> یک عنوان برای جدول درست کنیم.

این تمرین نشان می دهد چگونه با استفاده از خاصیت  colspan و rowspan ظرفیت یک ستون یا سطر رو بیشتر کنیم.(منظور اینکه خانه هایه دیگری در انها درست کنیم)

این تمرین چگونگی استفاده از بعضی عناصر را در کنار عناصر دیگر در جدول نشان می دهد.

این تمرین نشان می دهد چگونه می توان با استفاده از خصوصیت cellpadding فضای خالی بیشتری بین خانه و حاشیه اطرافش ایجاد نمود.

این تمرین ، نشان می دهد چگونه از خصوصیت cellspacing برای ایجاد فاصله بین خانه های جدول استفاده می شود.

این تمرین، نشان می دهد چگونه می توان رنگ پس زمینه یا عکس پس زمینه برای جدول درست کرد.


این تمرین، نشان می دهد چگونه می توان یک عکس و یا رنگ را برای یک خانه جدول به صورت پس زمینه در آورد.


این تمرین نشان می دهد چگونه با استفاده از خصوصیت align می توان متن را در خانه های جدول بر اساس جهت منظم کرد.


این تمرین نشان می دهد چگونه می توان یک جدول را چهرچوب بندی کرد.

این تمرین نشام می دهد چگونه با استفاده از خصوصیات border و frame یک جدول را زیبا تر نمود.

توجه اینجا frame به عنوان یک خصوصیت برای جدول استفاده می شود.
ولی در آینده با عنصری به همین عنوان یعنی frame اشنا می شویم .که متفاوت است.


Table Tags

Tag Description
<table> مشخصه جدول
<th> مشخصه سر فصل در جدول
<tr> مشخصه سطر
<td> مشخصه ستون
<caption> مشخصه عنوان
<colgroup> Defines groups of table columns
<col> Defines the attribute values for one or more columns in a table
<thead> Defines a table head
<tbody> Defines a table body
<tfoot> Defines a table footer



نوشته شده توسط بنده خدا در سه شنبه 4 اسفند 1388 و ساعت 12:10 ب.ظ [+] | نظرات ()