آموزش HTML - جلسه نهم

سلام به همه دوستان عزیزی که آموزش‌های این وبلاگ رو دنبال می‌کنند و ممنونم از صبری که در ارائه این آموزش‌ها پیشه کردند؛ خصوصا در چندروز گذشته که من مشغول کارهای ثبت‌نام دانشگاهم بودم و نتونستم آنلاین بشم. در این جلسه از آموزش به بررسی یکی از مباحث کاربردی در ارائه‌ی محتوا در زبان HTML می پردازیم. در این جلسه با نحوه ایجاد جداول در صفحات وب آشنا شده و به بررسی خواص و صفات جداول در صفحات HTML می‌پردازیم. با ما همراه باشید.

جداول (Tables) در زبان HTML:

جداول در زبان HTML به وسیله‌ی تگ <table> تعریف می‌شوند. هر جدولی در HTML از تعدادی سطر و تعدادی سلول در آن سطر تقسیم شده است. بر خلاف نرم‌افزار‌های پردازشگر متن نظیر Microsoft Word که جداول از ستون و سطر (ردیف) تشکیل می‌شوند، در زبان HTML این قضیه صدق نمی‌کند و ما بایستی سطر‌هایی را که هرکدام شامل n ستون است تعریف کنیم. برای تعریف یک سطر در یک جدول از تگ <tr> استفاده می‌کنیم. برای تعریف سلول‌ها در یک سطر از جدول از تگ <td> استفاده می‌کنیم. بگذارید با یک مثال مسئله را روشن کنیم. فرض کنید ما به یک جدول با دوسطر که هرسطر آن سه سلول دارد نیاز داریم. این جدول به صورت زیر تعریف می‌شود:

<table border="1">
<caption>Caption of this table</caption>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
<td>row 1, cell 3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 2, cell 3</td>
</tr>
</tfoot>
</table>

خروجی کد بالا جدول زیر می‌باشد:

Caption of this table

Header 1	Header 2	Header 3
row 1, cell 1	row 1, cell 2	row 1, cell 3
row 2, cell 1	row 2, cell 2	row 2, cell 3

• از صفت border در تگ <table> جهت تعریف خط حاشیه به عرض 1pixel استفاده شده‌است. در صورتی که صفت border را از این جدول حدف کنیم، جدول ما بدون خط حاشیه نمایش داده می‌شود اما همچنان نظم خود را حفظ می‌کند.
• برای تعریف عنوان (header) یک ستون از جدول در بالای آن می‌توان از تگ <th> استفاده کرد. در تمامی مرورگرهای اینترنتی این تگ به صورت bold و وسط‌چین نمایش داده می‌شود.
• برای تعریف عنوان کلی یک جدول (caption) از تگ <caption> استفاده می‌کنیم. این عنوان را معمولا در بالای جدول و قبل از تعریف سطر‌های جدول تعریف می‌کنند.
• از صفت cellpadding در تگ table می‌توان فاصله محتوای داخل جدول با حاشیه آن را مشخص کرد. در واقع صفت cellpadding یک فرورفتگی از هر چهارجهت ایجاد می‌کند تا بین حاشیه هرسلول و محتوای آن فاصله ایجاد شود.
• از سه تگ <thead> ،<tbody> و <tfoot> می‌توانیم برای جداسازی قسمت‌های مختلف یک جدول استفاده کرد. این کار به پیمایش بهتر جداول در مرورگرهای اینترنتی کمک می‌کند. هم‌چنین اگر جدولی طولانی باشد با استفاده از این‌کار می‌توان کمک شایانی به پرینت صحیح جداول کرد. برای تعریف این سه تگ در جدول باید پس از تگ <caption> ابتدا تگ <thead> را برای مشخص کردن سربرگ جدول، تگ <tbody> را برای مشخص‌کردن بدنه جدول و در نهایت تگ <tfoot> را برای مشخص‌کردن پاورقی جدول تعریف کرد.

اگر این مطلب را می‌پسندید آن‌را در گوگل محبوب کنید: