تگ جدولHTML <table> Tag -
Previous > <Nextمثال ـ ايجاد جدول با دوستون و دو سطر
<table> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table>
تعريف وكاربردDefinition and Usage -
تگ<table> يك جدولHTML تعريف ميكند.
يك جدولHTML ازيك عنصر <table> ويك ياچند ازعناصر <tr> , <th> , <td>تشكيل ميشود .
عنصر<tr> سطر جدول را تعريف ميكند ، عنصر <th> عنوان ستون و عنصر <td>يك سلول جدول را تعريف ميكند
يك جدولHTML همچنين ميتواند شامل عناصر<caption> , <colgroup> , <thead> , <tfoot> و<tbody>باشد .
پشتيباني مرورگرBrowser Support -
| Element | 
| 
| 
| 
| 
|
|---|---|---|---|---|---|
| <table> | Yes | Yes | Yes | Yes | Yes |
ويژگي هاي جهانيGlobal Attributes -
تگ<table> از ويژگي هاي جهانيHTML پيروي ميكند.
ويژگي هاي رويداديEvent Attributes -
تگ فوق همچنين از ويژگي هاي رويدادي پيروي ميكند.
مثالهاي بيشتر
مثال ـ نحوي اضافه كردن حاشيه هاي جمع شده در جدول باCSS حاشيه هاي دوخطي بيك خط تبديل . ميشود.
<html> <head> <style>table, th, td { border: 1px solid black; border-collapse: collapse; } </style></head> <body> <table> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </table> </body> </html>
مثال ـ تنظيم تراز جدول بسمت راست
<table style="float:right"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </table>
تراز سمت راست جدول بدين معني است كه جدول در سمت راست قرارگرفته وفضاي سمت چپ آن عناصر ديگر قرار ميگيرند .بااجراي مثال آنرامشاهده ميكنيد.
مثال ـ قرار دادن جدول در وسط
<html> <head> <style>table, th, td { border: 1px solid black; } table.center { margin-left: auto; margin-right: auto; } </style></head> <body> <table class="center"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </table>
باتراز فرمت فوق براي جدول فضاي سمت چپ وراست جدول خالي مي ماند .در صورت تراز شناوري چپ يا راست جدول فضا ي چپ يا راست ممكن است خالي نماند .مشابه مثال قبل تر
مثال ـ تنظيم رنگ زمينه براي جدول باCSS
<table style="background-color:#00FF00"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </table>
مثال ـ اضافه كردن لايه ياpadding در جدول باCSS
html> <head> <style>table, th, td { border: 1px solid black; } th, td { padding: 10px; } </style></head> <body> <table> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </table> </body> </html>
نكته ـ يك نوار به ضخمات اعلام شده به اطرا ف عنصر اضافه ميشود.
مثال ـ تنظيم عرض جدول باCSS
<table style="width:400px"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </table>
مثال ـ ايجاد عنوان ستونهاي جدول
<table> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$50</td> </tr> </table>
مثال ـ ايجاد جدول با عنوان ياcaption آن
<table> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </table>
مثال ـ ايجاد سلول جدول با بيشتر يك سطر يا يك ستون
<table> <tr> <th>Name</th> <th>Email</th> <th colspan="2">Phone</th> </tr> <tr> <td>John Doe</td> <td>john.doe@example.com</td> <td>123-45-678</td> <td>212-00-546</td> </tr> </table>
تنظيمات پيش فرضDefault CSS Settings -
اغلب مرورگرها نمايش عنصر<table> مطابق تنظيمات پيش فرضي زيرانجام ميدهند.
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
}
مرجع كامل تگهايHTML
مرجع كامل ويژگيهايHTML
Previous > <Next