آموزش HTML جلسه ششم جدول ها و فهرست ها در HTML جدول ها مثال های زیر را ببینید و خودتان تمرین کنید. جدولها این مثال به ما نشان می دهد که چگونه می توانیم یک جدول بکشیم. حاشیه جدول این مثال حاشیه های مختلف جدول را نشان می دهد. (مثالهای بیشتر، در انتهای این صفحه آمده است) جدول ها : * جداول بوسیله تگ <table> معرفی می شوند. * هر جدول به سطرها (بوسیله تگ <tr>) و هر سطر به سلول های داده تقسیم می شود (بوسیله تگ <td>) * حروف td بیانگر داده جدولی (table data) هستند که حاوی سلول داده است. * یک سلول داده می تواند حاوی متن ، عکس ، لیست ها ، پاراگراف ها ، فرم ها ، خط های افقی و جدول ها و… باشد. 01 <table border="1"> 02 <tr> 03 <td>row 1, cell 1</td> 04 <td>row 1, cell 2</td> 05 </tr> 06 <tr> 07 <td>row 2, cell 1</td> 08 <td>row 2, cell 2</td> 09 </tr> 10 </table> چگونگی نمایش در مرورگر : آموزش HTML جلسه ششم جدول ها و عنصر border : اگر شما برای جدول عنصر (border) حاشیه را تعیین نکرده اید، جدول شما بدون حاشیه نمایش داده خواهد شد. بعضی از مواقع این کار مفید است ولی بیشتر اوقات شما نیاز دارید تا حاشیه دیده شود. برای نمایش یک جدول به همراه حاشیه شما باید از عنصر border استفاده کنید : 1 <table border="1"> 2 <tr> 3 <td>Row 1, cell 1</td> 4 <td>Row 1, cell 2</td> 5 </tr> 6 </table> سر تیتر ها در جدول ها : سرتیترها در یک جدول با تگ <th> تعریف میشوند. 01 <table border="1"> 02 <tr> 03 <th>Heading</th> 04 <th>Another Heading</th> 05 </tr> 06 <tr> 07 <td>row 1, cell 1</td> 08 <td>row 1, cell 2</td> 09 </tr> 10 <tr> 11 <td>row 2, cell 1</td> 12 <td>row 2, cell 2</td> 13 </tr> 14 </table> چگونگی نمایش در مرورگر : آموزش HTML جلسه ششم سلول های خالی در جدول ها : سلول های جداول با محتوای خالی در بیشتر مرورگرها خوب نشان داده نمی شوند. 01 <table border="1"> 02 <tr> 03 <td>row 1, cell 1</td> 04 <td>row 1, cell 2</td> 05 </tr> 06 <tr> 07 <td>row 2, cell 1</td> 08 <td></td> 09 </tr> 10 </table> چگونگی نمایش در مرورگر : آموزش HTML جلسه ششم این کدها در مرورگر بدین صورت نشان داده می شوند.توجه کنید که حاشیه های اطراف سلول خالی جدول از بین رفته است(موزیلا فایر فاکس(Fire Fox) حاشیه را نشان می دهد.).برای جلوگیری از آن یک فاصله نا مقطوع(;nbsp&) به سلول داده خالی اضافه کنید تا حاشیه را مشخص سازید. 01 <table border="1"> 02 <tr> 03 <td>row 1, cell 1</td> 04 <td>row 1, cell 2</td> 05 </tr> 06 <tr> 07 <td>row 2, cell 1</td> 08 <td> </td> 09 </tr> 10 </table> چگونگی نمایش در مرورگر : آموزش HTML جلسه ششم نکات پایه – اطلاعات مفید : عناصر <thead>، <tbody>و <tfoot>به دلیل پشتیبانی بد مرورگر ها به ندرت مورد استفاده قرار می گیرند. انتظار می رود که در نسخه های بعدی XHTML این روند تغییر کند. مثال های بیشتر : جدول بدون حاشیه در این مثال یک جدول بدون حاشیه را می بینید. سرتیترهای جدول چگونگی نمایش سرتیترها را در جدول می بینید. سلول خالی این مثال طریق استفاده از “ ”، برای نمایش صحیح سلولهای خالی را نشان می دهد. عنوان جدول این مثال چگونگی عنوان دار کردن جدول را نشان می دهد. توسعه سلول جدول به بیش از یک سطر یا ستون در این مثال چگونگی ساخت سلولی که بیش از یک ستون یا سطر را می پوشاند را می بینید. جدول در جدول برای ساخت جدولی، درون یک جدول دیگر، به این مثال توجه کنید. حاشیه خالی سلول در این مثال، روش قرار دادن حاشیه خالی بین محتوای سلول و حاشیه ان را می آموزیم. فاصله سلولها برای تعیین فاصله بین سلولها به این مثال توجه کنید. زمینه جدول برای زمینه جدول می توان یک رنگ و یا یک عکس را انتخاب کرد. به این مثال توجه کنید. زمینه برای یک سلول همانند مثال قبل است با این تفاوت که این بار زمینه فقط برای یک سلول انتخاب می شود. محل نمایش محتوای یک سلول با استفاده از عنصر “align”، می توان محل نمایش محتوای یک سلول را تعیین کرد. برای این منظور به این مثال توجه کنید. تعین قاب دور جدول به کمک عنصر “frame”، میتوان نوع قاب دور جدول را تعیین کرد. نگاه کنید. تگ های جدول : آموزش HTML جلسه ششم فهرست ها HTML از فهرست های (لیست های) مرتب، نامرتب و تعریفی پشتیبانی میکند. مثال : لیست بدون ترتیب این مثال فهرستی که در آن ترتیب اهمیت ندارد را نمایش می دهد. لیست با ترتیب در این مثال شما فهرستی، دارای ترتیب می بینید. (مثالهای بیشتر، در انتهای این صفحه آمده است) فهرست های نامرتب : * یک فهرست نامرتب ، لیستی از اقلام است. * اقلام فهرست به وسیله گلوله نشان گذاری می شوند (معمولا یک دایره سیاه کوچک). * یک فهرست نامرتب با یک تگ <ul> آغاز می شوند. * هر کدام از اقلام فهرست با تگ <li> آغاز می شوند. 1 <ul> 2 <li>Coffee</li> 3 <li>Milk</li> 4 </ul> چگونگی نمایش در مرورگر : * Coffee * Milk داخل اقلام فهرست می توانید پاراگراف ها، پرش به خط بعد ، عکس ها، پیوند ها ، لیست های دیگر و … قرار دهید. فهرست های مرتب : * یک فهرست مرتب شده نیز لیستی از اقلام است. * اقلام فهرست بوسیله شماره نشان گذاری می شوند. * یک فهرست مرتب با تگ <ol> آغاز می شود. * هرکدام از اقلام فهرست با تگ <li> آغاز می شوند. 1 <ol> 2 <li>Coffee</li> 3 <li>Milk</li> 4 </ol> چگونگی نمایش در مرورگر : 1. Coffee 2. Milk داخل اقلام فهرست می توانید پاراگراف ها، پرش به خط بعد ، عکس ها، پیوند ها ، لیست های دیگر و … قرار دهید. فهرست های تعریفی : * یک فهرست تعریفی ، فهرستی از اقلام نیست. * این فهرست ، فهرستی از عبارات و توضیحات آن عبارات است. * یک فهرست تعریفی با برچسب<dl> آغاز می شود. * هر کدام از اقلام فهرست تعریفی با تگ <dt> آغاز می شود. * هر تعریف در فهرست تعریفی با تگ <dd> آغاز می شود 1 <dl> 2 <dt>Coffee</dt> 3 <dd>Black hot drink</dd> 4 <dt>Milk</dt> 5 <dd>White cold drink</dd> 6 </dl> چگونگی نمایش در مرورگر : CoffeeBlack hot drinkMilkWhite cold drinkداخل تعاریف یک فهرست تعریفی (تگ <dd>)شما می توانید پاراگراف ها، پرش به خط بعد ، عکس ها، پیوند ها ، فهرست های دیگر و … قرار دهید. مثال های بیشتر : نمایشهای گوناگون tفهرست های مرتب در این مثال صورتهای مختلف فهرست های مرتب را می بینید. نمایشهای گوناگون فهرست های دون ترتیب این مثال نمایشهای مختلف فهرست های بدون ترتیب را نشان می دهد. فهرست های تو در تو چگونگی ساخت فهرست های تو در تو را در این مثال می بینید. فهرست های تو در تو (2) این مثال نیز گونه های دیگری از فهرست های تو در تو را نشان می دهد. فهرست تعریفی این مثال روش ساخت فهرست ، که در آن مقدار و محتوای هر عنصر فهرست تعریف می شوند را نشان می دهد. تگ های فهرست : آموزش HTML جلسه ششم
