ایجاد جدول در HTML

جلسه ششم را به کشیدن جدول در HTML اختصاص می دهیم و در آخر یک مثال کاربردی را انجام می دهیم.

جداول در HTML کاربردهای فراوانی دارند. برای ایجاد جدول در HTML از تگ <table> استفاده می کنیم. ردیف های جدول با استفاده از تگ <tr> و ستون های جدول با استفاده از تگ <td> ایجاد می شوند.

در مثال زیر نحوه کشیدن یک جدول با یک ردیف و سه ستون را می بینیم:

<table>
<tr>
<td> text </td>
<td> text </td>
<td> text </td>
</tr>
</table>

تگ <td> در جدول می تواند بعنوان ظرفی برای دیگر المان های HTML از جمله متن، عکس، لیست ها، دیگر جدول ها و … عمل کند و آن ها را در خود جای دهد.

خصوصیات border و colspan

می توان با استفاده از خصوصیت border به جدول حاشیه اضافه کرد:

<table border="2" >

یک سلول از جدول می تواند توسط خصوصیت colspan دو ستون یا بیشتر را محصور کند:

<table border="2">
<tr>
<td> Red </td>
<td> Blue </td>
<td> Green </td>
</tr>
<tr>
<td><br></td>
<td colspan="2"><br></td>
</tr>
</table>

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

استفاده از تگ <br> باعث می شود، یک سلول خالی از متن در جدول، با حاشیه نمایش داده شود؛ و همانطور که مشاهده می کنید خصوصیت colspan می تواند ۲ یا چند ستون را با هم یکی کند.

برای یکی کردن دو یا چند ردیفِ جدول از خصوصیت rowspan استفاده می شود. که نتیجه استفاده از این خصوصیت را در تصویر دوم مشاهده می کنیم:

<table border="2">
<tr>
<td rowspan="2"> Red </td>
<td> Blue </td>
<td> Green </td>
</tr>
<tr>
<td><br></td>
<td><br></td>
</tr>
</table>

همانطور که در درس های قبل نیز گفتیم برای تغییر مکان یک المان بصورت افقی از خاصیت align استفاده می شود. که از این خصوصیت برای تغییر مکان table نیز استفاده می شود. همچنین به منظور رنگ دادن به زمینه هر سلول از جدول خاصیت bgcolor در تگ آغازین td بکار برده می شود. به کد زیر و نتیجه آن در تصویر سوم دقت کنید:

<html>
<head>
<title>table1</title>
</head>
<body>
<table border="2" align="center">
<tr>
<td bgcolor="yellow">yellow</td>
<td bgcolor="blue">blue</td>
</tr>
<tr>
<td bgcolor="red">red</td>
<td bgcolor="green">green</td>
</tr>
<tr>
<td bgcolor="orange">orange</td>
<td bgcolor="purple">purple</td>
</tr>
</table>
</body>
</html>

نتیجه را در تصویر زیر مشاهده می کنید:

مثال: طراحی جدول برنامه ریزی

برای رسم یک جدول برنامه ریزی از تگ table استفاده می کنیم. تگ <th> برای نشان دادن عنوانِ ستون های جدول بکار می رود (table headers). به کد زیر دقت کنید:

<h1> My Coding Schedule </h1>
<table border="1" cellspacing="0">
<tr>
<th>Day</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
</tr>
<tr>
<td>8-8:30</td>
<td class="selected">Learn</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>9-10</td>
<td></td>
<td class="selected">Practice</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>1-1:30</td>
<td></td>
<td></td>
<td class="selected">Play</td>
<td></td>
<td></td>
</tr>
<tr>
<td>3:45-5</td>
<td></td>
<td></td>
<td></td>
<td class="selected">Code</td>
<td></td>
</tr>
<tr>
<td>6-6:15</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="selected">Discuss</td>
</tr>
</table>

در اینجا تگ های خالی td نشان دهنده سلول های خالی جدول هستند. و برای ایجاد ساختار اصلی جدول وجود آن ها ضروری می باشد. جدولی که کد بالا به ما می دهد در تصویر زیر مشاهده می شود:

اگر دقت کنید، خصوصیت cellspacing را در تگ آغازین table مشاهده می کنید، که احتمالا با آن آشنا نیستید. این خصوصیت فاصله بین خطوط سلول های جدول را تعیین می کند. در صورتی که از این خاصیت استفاده نکنیم مرورگر این فاصله را بطور پیش فرض برابر ۲ قرار می دهد، اگر آن را نوشته و برابر با صفر قرار دهیم دیواره سلول های مجاور بر هم مماس شده و شکلی مانند تصویر بالا را به وجود می آورد. در مثال زیر ما این خصوصیت را برابر ۱۰ قرا داده ایم. نتیجه را مشاهده کنید: