مثال ـ جدولي ساده با دوسطر وچهار سلول داده
<table> <tr> <td>Cell A</td> <td>Cell B</td> </tr> <tr> <td>Cell C</td> <td>Cell D</td> </tr> </table>
تگ<td> سلول داده استاندارد را در جدول HTML تعريف ميكند .
جدولHTML داراي دو نوع سلول ميباشد .
متن در عنصر<td> معمولي و بصورت پيش فرض تراز سمت چپ است .
متن در عنصر<th> پررنگ و در وسط سلول قرار ميگيرد .يعني تراز پيش فرض center
Element | |||||
---|---|---|---|---|---|
<td> | Yes | Yes | Yes | Yes | Yes |
ويژگي | مقدار | شــرح |
---|---|---|
colspan | number | تعداد ستونهائيكه كه با يكي شوند مشخص ميكند. |
headers | header_id | يك يا چند سلول هدر رامشخص ميكند، كه سلول به آن مربوط است. |
rowspan | number | تعداد سطريكه بايد يكي شوند، مشخص ميكند. |
تگ<td> از ويژگي هاي جهانيHTML پيروي ميكند.
تگ فوق همچنين از ويژگي هاي رويدادي پيروي ميكند.
مثال ـ تراز محتوي عنصر<td> باCSS
<table style="width:100%"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td>style="text-align:right">$100</td> </tr> <tr> <td>February</td> style="text-align:right">$80</td> </tr> </table> تنظيمات پيش فرضDefault CSS Settings -
اغلب مرورگرها نمايش عنصر<dt> مطابق تنظيمات پيش فرضي زيرانجام ميدهند .
td { display: table-cell; vertical-align: inherit; }مثال ـ تنظيم رنگ زمينه سلول داده در جدول
<table> <tr> <th>Month</th> <th>Savings</th> </tr> <tr>style="background-color:#FF0000">January</td> style="background-color:#00FF00">$100</td> </tr> </table> مثال ـ تنظيم ارتفاع سلول داده در جدول باCSS
<table> <tr> <th>Month</th> <th>Savings</th> </tr> <tr>style="height:100px">January</td> style="height:100px">$100</td> </tr> </table> مثال ـ چگونه در سلول جدول هيچ كلمه را مشخص نكنيم.
<table> <tr> <th>Poem</th> </tr> <tr>style="white-space:nowrap">Never increase, beyond what is necessary, the number of entities required to explain anything</td> </tr> </table> مثال ـ تراز عمودي سلول داده جدول
<table style="width:50%;"> <tr> <th>Month</th> <th>Savings</th> </tr>style="height:100px"> style="vertical-align:bottom">January</td> style="vertical-align:bottom">$100</td> </tr> </table> مثال ـ تنظيم عرض سلول داده در جدول
<table style="width:100%"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr>style="width:70%">January</td> style="width:30%">$100</td> </tr> </table> مثال ـ ايجاد هدر براي جدول
<table> <tr> <th>Name</th> <th>Email</th> <th>Phone</th> </tr> <tr> <td>John Doe</td> <td>john.doe@example.com</td> <td>123-45-678</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>$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>مرجع كامل تگهايHTML
مرجع كامل ويژگيهايHTML
Previous >    <Next