درس ششم
نحوه ایجاد جداول در سند HTML
در html برای تعریف جدول از تگ <table> استفاده می شود.
در یک جدول سطرهایی وجود دارند که برای نشان دادن آن ها از تگ <tr> استفاده می کنند. هر سطر حاوی تعدادی سلول می باشد و سلول ها با تگ <td> نشان داده می شوند. در html برای نشان دادن داده های سلول دار td مخفف “table data” به کار برده می شود. در تگ <td> اطلاعاتی مانند متن، تصویر، لینک، فرم ها، لیست ها، جداول و … قرار می گیرند.
یک مثال از اضافه کردن جدول در html
<table>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
این کدهایی که در بالا آمده اند، در html به صورت زیر نشان داده می شوند:
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
خصوصیت Border
در صورتی که در html برای یک جدول از خصوصیت Border استفاده نشود، نمایش جدول به صورت بدون لبه خواهد بود. در برخی مواقع این مورد دارای کاربردهای زیادی می باشد. ولی در اکثر اوقات باید لبه ها نشان داده شوند. در صورتی که به نمایش لبه ها نیاز باشد، لازم است خصوصیت Border تنظیم شود.
در زیر مثالی از اضافه کردن یک جدول در html آورده شده است:
<table border="1" style="width:300px">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
عنوان جدول Header
در یک جدول برای نشان دادن اطلاعات سر تیتر از تگ <th> استفاده می شود. اکثر مرورگرها در عنصر <th> متن را به شکل برجسته (bold) و وسط چین نشان خواهند داد. به مثال زیر توجه کنید:
<table style="width:300px">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
استفاده از خصوصیت text-align در CSS، باعث می شود که در جدول بالا سرتیترها در سمت چپ تنظیم شوند.
th
{
text-align:left;
}
بهتر است برای تنظیم کردن لبه ها در جدول CSS ها را به کار ببریم.
استفاده از خصوصیت border در CSS کمک می کند که لبه های جدول تنظیم شوند. در این زمینه به مثال زیر توجه کنید:
<style>
table,th,td
{
border:1px solid black;
}
</style>
در صورتی که لبه ها تنظیم شوند، این لبه ها برای دور جدول و تمام سلول های جدول خواهد بود.
تبدیل کردن لبه های دو خطی به یک خطی در html
استفاده از خصوصیت border-collapse در CSS موحب می شود که لبه های دوخطی جدول به لبه های یک خطی تبدیل شوند.
مثال تبدیل کردن لبه های دو خطی به یک خطی
<style>
table,th,td
{
border:1px solid black;
border-collapse:collapse
}
</style>
تنظیم کردن فاصله محتوای سلول ها از لبه در html
با استفاده از خصوصیت padding درCSS می توانید فاصله محتویات یک سلول را از لبه هایش تنظیم کنید.
خصوصیت padding درCSS کمک می کند که بتوان فاصله محتویات یک سلول را از لبه های آن تنظیم کرد. در صورتی که این خصوصیت فعال یا تنظیم نشود، فاصله محتوا تا لبه ها صفر خواهد بود.
مثال تنظیم کردن فاصله محتوای سلول ها از لبه
th,td
{
padding:15px;
}
تنظیم کردن فاصله سلول ها از یکدیگر
استفاده از خصوصیت border-spacing در CSS موجب می شود که بتوان فاصله سلول ها را از یکدیگر تنظیم کرد.
به مثال زیر در این زمینه توجه کنید:
table
{
border-spacing:5px;
}
چند تگ مهم جدول در html
<table> تعریف جدول
<th> تعریف عنوان جدول (table header)
<tr> تعریف سطر جدول (table row)
<td> تعریف سلول جدول (table data)
<caption> تعریف تیتر جدول (table caption)
<colgroup> برای فرمت دهی یک یا تعدادی از ستون ها کاربرد دارد
<col> برای فرمت دهی یک یا تعدادی از ستون ها کاربرد دارد
<thead> عناوین ستون های یک جدول (header) را گروه بندی می کند
<tfoot> محتویات انتهای ستون های یک جدول (footer) را گروه بندی می کند
<tbody> محتویات بدنه یک جدول را گروه بندی می کند