فیلم آموزش کار با جدول (table) در html

از جداول در صفحات وب برای نمایش داده های جدولی (tabular) مانند نمایش نتایج یک آزمون، برنامه های زمان بندی شده، اطلاعات آماری، مشخصات افراد و … استفاده می کنیم.

عنصر اصلی ایجاد کننده یک جدول در صفحات وب، تگ کلیدی <table> است، البته این تگ به تنهایی کار خاصی انجام نمی دهد و نیاز به تگ های دیگری برای ایجاد سطر و ستون های جدول داریم.

آنچه در این فیلم آموزشی خواهید آموخت :

• ساختن جدول در صفحات وب با مثال کاربردی
• آشنایی با کاربرد جدول در صفحات html
• آشنایی با تگ های پایه جدول (table)

می توانید برای یادگیری ایجاد داده های جدولی بدون تگ table، فیلم آموزش نمایش عناصر بصورت جدولی را مشاهده کنید.

[hdplay id=33]

برای دانلود فیلم آموزشی و اسنیپت های آموزش مربوطه از لینک های زیر استفاده کنید :

[free_vip]

[video_download cat=’html’ url=’http://dl.onliner.ir/html-videos/tables-1.mp4′]دانلود فیلم آموزش کار با جدول (table) در html[/video_download]

[onliner_button type=”edu-demo” url=’http://dl.onliner.ir/html-snippets/tables-1.zip’]دانلود دمو[/onliner_button]
[/free_vip]

دسترسی سریع :

• آموزش قبلی : فیلم آموزش ایجاد تورفتگی (indent) در بین کدها
• آموزش بعدی : فیلم آموزش نکات کاربردی جداول در html
• لیست فیلم ها : فیلم های آموزش جامع HTML

متن فیلم آموزشی کار با جدول (table) در html

جدول در html

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

در html با سه تگ پایه (td-tr-table) جداول را پیاده سازی می کنیم.

[html]

<table>

</table>

[/html]

برای ایجاد سطر درون table از تگ tr استفاده می کنیم و برای ایجاد ستون از تگ td استفاده می کنیم.

[html]

<table>

<tr>

<td>یک</td>

<td>دو</td>

<td>سه</td>

</tr>

<tr>

<td>چهار</td>

<td>پنج</td>

<td>شش</td>

</tr>

<tr>

<td>هفت</td>

<td>هشت</td>

<td>نه</td>

</tr>

</table>

[/html]

 

برای کادربندی محتوا در جدول در html4 و Xhtml از صفت border استفاده می شد (border=”1″) اما حال در html5 از css استفاده می شود. چون بحث ما html است، روش کادربندی با html را آموزش می دهیم اما پیشنهاد می شود از این روش بعد از یادگیری Css، استفاده نکنید و برای کادربندی و … در جداول از css استفاده کنید.

صفات table :

• Border=”your border size” : برای تعیین اندازه کادر جدول از این صفت استفاده میشود.
• Width : شما می توانید به وسیله این صفت اندازه عرض جدول خود را مشخص کنید.
• Dir=”rtl or ltr” : با این صفت می توانید عناصر داخل جدولتان را از چپ به راست یا راست به چپ بنویسید. فقط توجه کنید این صفت فقط بر عناصر جدولتان اعمال میشود و کاری به کل صفحه ندارد.

[html]

<table border="1" width="30%" dir="ltr">

<tr>

<td>یک</td>

<td>دو</td>

<td>سه</td>

</tr>

<tr>

<td>چهار</td>

<td>پنج</td>

<td>شش</td>

</tr>

<tr>

<td>هفت</td>

<td>هشت</td>

<td>نه</td>

</tr>

</table>

[/html]

اکنون یک جدول با خصوصیات زیر داریم :

با بردر اندازه 1 پیکسل

اندازه 30 درصد صفحه

تراز چپ به راست

نکته : در گذشته در کدنویسی صفحات وب با html، برای تنظیم layout کلی صفحه از جدول استفاده میشد ولی در حال حاضر این روش منسوخ شده است.

دسترسی سریع :

• آموزش قبلی : فیلم آموزش ایجاد تورفتگی (indent) در بین کدها
• آموزش بعدی : فیلم آموزش نکات کاربردی جداول در html
• لیست فیلم ها : فیلم های آموزش جامع HTML