جداول در HTML
جداول در HTML
کالری | نام میوه |
---|---|
44% | سیب |
23% | موز |
13% | پرتقال |
10% | دیگر موارد |
مثال - خودتان امتحان کنید
Tables
نحوه ایجاد جداول در سند HTML.
Table borders
چگونه لبه های جدول را تنظیم کنیم.
(مثال های بیشتر را می توانید در پایین صفحه ببینید.)
جداول در HTML
جداول به وسیله تگ <table> تعریف می شوند.
یک جدول حاوی سطرهایی می باشد (که با تگ <tr> مشخص می شوند) و هر سطر شامل تعدادی سلول است (که با تگ <td> مشخص می شوند)
td مخفف "table data" است و حاوی داده های سلول ها می باشد. تگ <td> می تواند حاوی متن، لینک، تصویر، لیست ها، فرم ها، جداول دیگر و غیره باشد.
<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
اگر شما خصوصیت Border را برای جدولی مشخص نکنید، جدول بدون لبه نمایش داده می شود. گاهی اوقات این مورد می تواند کاربردی باشد، اما بیشتر مواقع ما نیاز به نمایش لبه ها داریم.
برای نمایش لبه ها باید خصوصیت Border را تنظیم کنیم.
مثال (جداول در HTML)
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
خودتان امتحان کنید »
توجه داشته باشید که اگر بخواهید طبق استاندارهای HTML پیش بروید نباید از ویژگی border استفاده کنید. برای تنظیم لبه ها بهتر است از CSSها استفاده کنید. |
با استفاده از خصوصیت border در CSS می توانید لبه ها را تنظیم نمایید:
بیاد داشته باشید که لبه ها برای دور جدول و تمام سلول های جدول، تنظیم خواهد شد.
تبدیل لبه های دو خطی به یک خطی
با استفاده از خصوصیت border-collapse در CSS می توانید، لبه های دوخطی جدول را به لبه های یک خطی تبدیل کنید:
مثال (جداول در HTML)
table,th,td
{
border:1px solid black;
border-collapse:collapse
}
</style>
خودتان امتحان کنید »
تنظیم فاصله ی محتوای سلول ها از لبه
با استفاده از خصوصیت padding در CSS می توانید فاصله محتویات یک سلول را از لبه هایش تنظیم کنید.
اگر این خصوصیت را تنظیم نکنید، فاصله محتوی تا لبه، صفر در نظر گرفته می شود.
تنظیم فاصله سلول ها از یکدیگر
با استفاده از خصوصیت border-spacing در CSS می توانید فاصله سلول ها از یکدیگر را تنظیم کنید.
عنوان جدول (Header)
اطلاعات سرتیتر در یک جدول به وسیله تگ <th> تعریف می شود.
بیشتر مرورگرها متن را در عنصر <th> به صورت برجسته (bold) و وسط چین نمایش می دهند.
مثال (جداول در HTML)
<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، می توانیم سرتیترهای جدول بالا را در سمت چپ تنظیم کنیم:
مثال بیشتر - خودتان امتحان کنید
Tables without borders
چگونه جدولی بدون خطوط حاشیه (Border) ایجاد کنیم.
Table headers
نحوه ایجاد سرتیترهای جدول.
Table with a caption
نحوه اضافه کردن عنوان به یک جدول.
Table cells that span more than one row/column
چگونگی تعریف سلول های جدول که بیش از یک سطر یا بیش از یک ستون را شامل می شوند.
Tags inside a table
نحوه نمایش عناصر درون عناصر دیگر.
Cell padding
چگونه از cellpadding برای ایجاد فاصله بیشتر بین محتوای سلول با حاشیه سلول استفاده کنیم.
Cell spacing
چگونه از cellspacing برای افزایش فاصله بین سلول ها استفاده کنیم.
The frame attribute
چگونه از خصوصیت "frame" برای کنترل حاشیه های دور جدول استفاده کنیم.
تگ های جدول در HTML
Tag | توضیحات |
---|---|
<table> | تعریف جدول |
<th> | تعریف عنوان جدول (table header) |
<tr> | تعریف سطر جدول (table row) |
<td> | تعریف سلول جدول (table data) |
<caption> | تعریف تیتر جدول (table caption) |
<colgroup> | برای فرمت دهی یک یا تعدادی از ستون ها کاربرد دارد |
<col> | برای فرمت دهی یک یا تعدادی از ستون ها کاربرد دارد |
<thead> | عناوین ستون های یک جدول (header) را گروه بندی می کند |
<tbody> | محتویات بدنه یک جدول را گروه بندی می کند |
<tfoot> | محتویات انتهای ستون های یک جدول (footer) را گروه بندی می کند |
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 68686