گروه مقاله : HTML 4

تاريخ انتشار : 1394/02/21 - 10:45

كد :422

جداول در HTML

Number	First Name	Last Name	Points
1	Eve	Jackson	94
2	John	Doe	80
3	Adam	Johnson	67
4	Jill	Smith	50

جداول توسط تگ <table> تعریف می شوند.

یک جدول حاوی سطرهایی می باشد که با تگ <tr> مشخص می شوند و هر سطر شامل تعدادی سلول است که با تگ <td> مشخص می شوند.

td مخفف "table data" است و حاوی داده های سلول ها می باشد. تگ <td> می تواند حاوی متن، لینک، تصویر، لیست ها، فرم ها، جداول دیگر و غیره باشد.

مثال :

<!DOCTYPE html>

<html>

<body>

<tr>

<td>Smith</td>

</tr>

<tr>

<td>Jackson</td>

</tr>

<tr>

</tr>

</table>

</body>

</html>

نتیجه :

Jill	Smith	50
Eve	Jackson	94
John	Doe	80

جدول با خصوصیت border

اگر برای جدول خصوصیت border را مشخص نکنید، جدول بدون لبه نمایش داده می شود(مانند مثال بالا).

با استفاده از خصوصیت border می توانیم به جدول لبه اضافه کنیم.

مثال :

<tr>

<td>Smith</td>

</tr>

<tr>

<td>Jackson</td>

</tr>

</table>

نتیجه :

Jill	Smith	50
Eve	Jackson	94
John	Doe	80

نکته : توجه داشته باشید که اگر بخواهید طبق استاندارهای HTML پیش بروید نباید از ویژگی border استفاده کنید.

برای تنظیم لبه ها بهتر است از CSSها استفاده کنید.

با استفاده از خاصیت border در CSS می توانید لبه ها را تنظیم نمایید:

table, th, td {

border: 1px solid black;

}

نکته : به یاد داشته باشید که لبه ها را هم برای برای دور جدول و هم برای تمام سلول های جدول تنظیم کنید.

تبدیل لبه های دو خطی به یک خطی

برای تبدیل لبه های دو خطی به یک خطی در CSS از خصوصیت border-collapse استفاده کنید :

table, th, td {

border: 1px solid black;

border-collapse: collapse;

}

نتیجه :

Jill	Smith	50
Eve	Jackson	94
John	Doe	80

تنظیم فاصله ی محتوای سلول ها از لبه (Cell Padding)

خصوصیت padding در CSS فاصله محتویات یک سلول را از لبه هایش تنظیم می کند.

اگر این خصوصیت را تنظیم نکنید، فاصله محتوی تا لبه، صفر در نظر گرفته می شود.

table, th, td {

border: 1px solid black;

border-collapse: collapse;

}

th, td {

padding: 15px;

}

Jill	Smith	50
Eve	Jackson	94
John	Doe	80

عنوان ها در جدول (Headings)

عنوان ها در جدول به وسیله تگ <th> تعریف می شوند.

اکثر مرورگرها به صورت پیش فرض متن داخل <th>( عنوان های جدول) را به صورت bold و وسط چین نمایش می دهند.

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Points</th>

</tr>

<tr>

<td>Jackson</td>

</tr>

</table>

Firstname	Lastname	Points
Jill	Smith	50
Eve	Jackson	94
John	Doe	80

برای چپ چین کردن عنوان از خصوصیت text-align در CSS استفاده کنید :

th {

text-align: left;

}

Firstname	Lastname	Points
Jill	Smith	50
Eve	Jackson	94
John	Doe	80

تنظیم فاصله سلول ها از یکدیگر

برای تنظیم فاصله بین سلول های جدول از خصوصیت border-spacing در CSS استفاده کنید :

table {

border-spacing: 5px;

}

نکته : اگر لبه های جدول به صورت دو تایی باشد خصوصیت border-spacing تاثیری روی آن نخواهد داشت.

چگونگی تعریف سلول های جدول که بیش از یک ستون را شامل می شوند

برای این کار باید از خصوصیت colspan در CSS استفاده کنید :

<tr>

<th colspan="2">Telephone</th>

</tr>

<tr>

<td>Bill Gates</td>

</tr>

</table>

Name	Telephone
Bill Gates	555 77 854	555 77 855

چگونگی تعریف سلول های جدول که بیش از یک سطر را شامل می شوند

برای این کار از خصوصیت rowspan استفاده کنید :

<tr>

<td>Bill Gates</td>

<tr/>

<tr>

<th rowspan="2">Telephone:</th>

<tr/>

<tr>

<tr/>

Name:	Bill Gates
Telephone:	555 77 854
Telephone:	555 77 855

اضافه کردن عنوان به یک جدول

برای اضافه کردن عنوان به جدول از تگ <caption> استفاده کنید :

<caption>Monthly savings</caption>

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

<tr>

<td>January</td>

</tr>

<tr>

<td>February</td>

</tr>

</table>

Monthly savings
Month	Savings
January	$100
February	$50

تگ <caption> بلافاصله بعد از تگ <table> می آید.

تگ های جدول در HTML

تگ	توضیحات
<table>	تعریف جدول
<th>	تعریف عنوان جدول
<tr>	تعریف سطر جدول
<td>	تعریف سلول جدول
<caption>	تعریف تیتر جدول
<colgroup>	برای فرمت دهی یک یا تعدادی از ستون ها کاربرد دارد
<col>	برای فرمت دهی یک یا تعدادی از ستون ها کاربرد دارد
<thead>	عناوین ستون های یک جدول را گروه بندی می کند
<tbody>	محتویات بدنه یک جدول را گروه بندی می کند
<tfoot>	محتویات انتهای ستون های یک جدول را گروه بندی می کند