‎‎جداول اچ تي ام الHTML Tables -‎

Previous >    <Next  

‎مطالب مربوط به جدول در هشت بخش متوالي ارائه ميگردد .اولين بخش آنرا در همين صفحه ملاحظه ‎ميكنيد .بقيه آن مطابق جدول زير ارائه خواهد شد.

‎
‎‎عنوان بخش ‎‎لينك بخش
‎‎مرزهاي جدولHTML Table Borders -‎ ‎HTML Table Borders
‎‎اندازه در جدولHTML Table Sizes -‎ ‎HTML Table Sizes
‎‎تيترهاي جدولHTML Table Headers -‎ ‎HTML Table Headers
‎‎تنظيم فواصل جدولHTML Table Padding & Spacing -‎ ‎HTML Table Padding & Spacing
‎‎تجميع سطر وستونHTML Table Colspan & Rowspan -‎ ‎HTML Table Colspan & Rowspan
‎‎استايل بندي جدولHTML Table Styling -‎ ‎HTML Table Styling
‎‎گروه بندي ستونيHTML Table Colgroup -‎ ‎HTML Table Colgroup

‎امكانات جداول درHTML به توسعه دهندگان وب اجازه ميدهد كه بتوانند اطلاعات را درجداولي داراي ‎سطر وستون تنظيم نمايند.

‎‎مثال ـ تنظيم اطلاعات در جدول

HTML Table

Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy

--(go to editor for change code and run)

‎‎تعريف جدولDefine an HTML Table -‎

‎يك جدول درHTML شامل عناصر داخلي سطر وستون ميباشد .عنصر سطر در جدول وعنصر ستون در سطر ‎جدول. ‎جدول درHTML با تگ‎<table>‎ تعريف آن شروع ميشود وبا ‎</table>‎‎پايان مي يابد .

‎‎مثال ـ يك جدول سادهHTML

‎ 
<table style="width:100%">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>

--(go to editor for change code and run)

‎‎سلولهاي جدولTable Cells -‎

‎‎هر سلول جدول با‎</td>‎ و ‎<td>‎ تعريف ميشود .

‎

‎‎نكته ـtd مخففtable data است.

‎‎هرچيزي بين‎<td>‎ و‎</td>‎ قرار گيرد، محتوي آن سلول ميباشد.

‎‎مثال ـ سلول جدول

‎ 
<table style="width:100%">
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
</table>

--(go to editor for change code and run)

‎

‎نكته ـ يك سلول جدولHTML ،ميتواند شامل انواع عناصر باشد .مثل متن،تصوير، لسيت ها، پيوند ‎جدول ديگري وغيره.

‎‎سطر يا رديف جدولTable Rows -‎

‎‎هر سطر جدول با تگ‎<tr>‎ شروع وبا‎</tr> ‎ پايان مي يابد .

‎

‎‎نكته ـ‎tr‎ مخففtable row است

‎‎مثال ـ دو سطر را در جدول تعريف ميكند

‎ 
<table style="width:100%">
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
  <tr>
    <td>16</td>
    <td>14</td>
    <td>10</td>
  </tr>
</table>

--(go to editor for change code and run)

‎‎شما ميتوانيد هر تعداد رديف داشته باشيد .مطمئن شويد كه سلولها در هر رديف يكسان باشد.

‎

‎توجه ـ مواقعي وجود دارد كه يك رديف مي تواند سلولهاي كمتر يا بيشتري از ديگر رديف ها داشته ‎باشد .در فصل بعدي در مورد آن بحث ميشود.

‎‎عنوان ستون جدولTable Headers -‎

‎بعضي مواقع لازم است كه ستون هاي جدول داراي عنوان باشند .براي تعريف عنوان از ‎<th>‎‎استفاده ميشود. ‎البته از همان‎<td>‎ ميتوان استفاده نمود . اماويژگيهاي پيش فرضth به آن ‎بيشتر نزديك است.

‎

‎th‎ـ مخفف Table Header است.

‎‎مثال ـ تعريف عنوان ستوان

‎ 
<table style="width:100%">
  <tr>
    <th>Person 1</th>
    <th>Person 2</th>
    <th>Person 3</th>
  </tr>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
  <tr>
    <td>16</td>
    <td>14</td>
    <td>10</td>
  </tr>
</table>

--(go to editor for change code and run)

‎پيش فرض متن داخل‎<th>‎ پررنگ و در وسط نمايش داده ميشود .اما ميتوان آنها را ‎باCSS تغيير داد .

‎‎تگهاي جدولHTML Table Tags -‎

‎‎نام تگ ‎‎شرح
‎<table> ‎‎جدولي را معرفي ميكند.
‎<th> ‎‎سلولي در هدر جدول معرفي ميكند.
‎<tr> ‎‎سطري را براي جدول تعريف ميكند.
‎‎<td>‎‎‎ ‎‎يك سلول از جدول را معرفي ميكند.
‎<caption> ‎‎عنوان براي جدول تعريف مي نمايد.
‎<colgroup> ‎‎يك گروه يك يا چندستوني از جدول را براي فرم دهي معرفي ميكند.
‎<col> ‎‎ويژگي ستونهائي را كه در عنصر‎<colgroup>‎ هستند، معرفي مي نمايد .
‎<thead> ‎‎گروبندي محتوي هدر جدول
‎<tbody> ‎‎گروه بندي محتوي بدنه در جدول را معرفي ميكند.
‎<tfoot> ‎‎گروه بندي محتوي پاياني جدول را معرفي مي نمايد.
Previous >    <Next