آموزش HTML - بخش یازدهم : تغییر در جدول‌ها

آموزش HTML - بخش یازدهم : تغییر در جدول‌ها

در قسمت قبل از مجموعه آموزش‌های HTML به زبان ساده، با نحوه‌ی قرار دادن جداول آشنا شدیم. در این شماره قصد داریم تا جدول‌ها را با تغییرات بیشتری همراه کنیم.

تغییر در جداول

جداول در اچ تی ام ال قابلیت‌ها و ویژگی‌های بسیاری دارند. همانطور  که گفتیم یکی از خاصیت‌های مهم آن‌ها امکان ایجاد لایه‌بندی و استخوان‌بندی صفحه است. اما جدول‌هایی که ما در بخش پیش ایجاد کرده‌ایم، چندان  ظاهر جذابی نداشتند. به همین خاطر ما در این جلسه قصد داریم تا تغییرات بیشتری را بر روی ظاهر جداولمان ایجاد نماییم. برای مثال شما می‌توانید قاب دور تا دور جدول را به دلخواه خود تغییر دهید.

ما در این قسمت به دو مورد از قابلیت‌های مهم در جداول اشاره خواهیم کرد: هدر و قاب.

اضافه‌کردن قاب:

برای قرار دادن قاب دور جدول‌ها تنها کافیست که اتریبیوت border را به تگ <table> اضافه نمایید. در مثال زیر ما یک قاب یک پیکسلی به دور جدول کشیده‌ایم. این قاب به تمامی بخش‌های جدول ما و در بین تمامی سلول‌ها و سطر‌ها کشیده خواهد شد.

<table border="1px" >
<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>
دوره اموزشی06.PNG

نکته: شما می‌توانید از طریق اضافه کردن اتریبیوت استایل به جدول خود نیز قاب را ایجاد نمایید. ";table style ="border:1px

حالا  که بیشتر با نحوه‌ی استفاده از قاب در جداول آشنا شدیم، بد نیست اگر  چند جدول با حاشیه‌های مختلف ایجاد نمایید.

سرفصل در جدول:

شما در اچ تی ام ال می‌توانید جدول‌های منظم‌تر و دقیق‌تری ترسیم کنید. در واقع یک جدول تنها شامل یک سطر و ستون‌ نمی‌شود و باید دارای سرفصل‌هایی نیز باشد. مثلا ما می‌خواهیم جدولی درست کنیم که در آن نام و نام خانوادگی افراد و سن آن‌ها یادداشت شود. در این جدول،  عناوینی همچون «نام»،‌«نام خانوادگی» و «سن» عناوین یا همان سرفصل‌های جدول شما هستند و مشخصات افراد که در زیر آن‌ها قرار می‌گیرد داده‌های جدول. حالا بیایید همین مثال را به زبان اچ تی ام ال پیاده‌سازی کنیم.

جدول در اچ تی ام ال شامل دو بخش است: 

عنوان جدول: عناوین را در اولین سطر جدول می‌نویسند و متن داخل آن‌ها با تگ  <th> نوشته می‌شود . 

داده‌های جدول: داده‌های جدول مشابه قبل در سطرهای بعدی و ستون‌های بعدی نوشته می‌شود. 

نمونه کد

 

 

<table border="1px" >
<tr><!-- - شروع خط مربوط به عناوین -->
<th>خط عنوان - نام </th>
<th>خط عنوان- نام خانوادگی</th>
<th>خط عنوان-سن</th>
</tr> <!-- - پایان خط مربوط به عناوین -->
<tr> <!-- شروع خط دوم -->
<td>خط دوم - ستون اول </td>
<td>خط دوم- ستون دوم</td>
<td>خط دوم - ستون سوم</td>
</tr><!-- پایان خط دوم -->
<tr> <!-- شروع خط سوم-->
<td>خط سوم - ستون اول </td>
<td>خط سوم - ستون دوم</td>
<td>خط سوم - ستون سوم</td>
</tr><!-- پایان خط سوم-->
</table>
دوره اموزشی07.PNG

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

 نکته: راه حل دیگر برای گروه‌بندی و نوشتن جداول استفاده از در صورت استفاده از <tbody> و <thead>  است. با استفاده از این تگ کلیات جدول شما دارای یک تگ جدید می‌شود؛ ولی ما در این آموزش صرفا جدول‌هایمان را بدون استفاده از این تگ‌ها می‌نویسیم. البته در هر حالت نتیجه جدول شما یکسان خواهد بود.

colspan: 

جدولی را با سه سطر که هر سطر شامل سه ستون می‌شود در نظر بگیرید. شاید زمانی پیش خودتان فکر کنید اگر بخواهم تمامی ستون‌های یک سطر را یکسان کنم، چگونه باید این کار را انجام دهم. این کار از طریق اتریبیوت colspan انجام می‌شود.

برای بزرگ کردن یکی از ستون‌های جدول به اندازه چند ستون ( یا همان ترکیب چند ستون در یک ستون) از اتریبوت"تعداد ستون‌های مورد نظر برای یکی شدن" = colspan استفاده می‌شود. به مثال زیر دقت کنید تا بهتر منظورمان را متوجه شوید.  

 

 

<table border="1px" >
<tr><!-- شروع خط اول -->
<td>خط اول - ستون اول </td>
<td>خط اول - ستون دوم</td>
<td>خط اول - ستون سوم</td>
</tr><!-- پایان خط اول -->
<tr> <!-- شروع خط دوم -->
<td>خط دوم - ستون اول </td>
<td>خط دوم- ستون دوم</td>
<td>خط دوم - ستون سوم</td>
</tr><!-- پایان خط دوم -->
<tr> <!-- شروع خط سوم-->
<td colspan="3">خط سوم و یکپارچه کردن سه ستون در یک ستون </td>
</tr><!-- پایان خط سوم-->
</table>
دوره اموزشی08.PNG

 

کد خبر: 169 | 12:30، 1395-04-13 نسخه چاپی ارسال به