سبد (0)

جداول در HTML

جداول در HTML

کالری نام میوه
44% سیب
23% موز
13% پرتقال
10% دیگر موارد

مثال - خودتان امتحان کنید

Wiki

Tables
نحوه ایجاد جداول در سند HTML.

Table borders
چگونه لبه های جدول را تنظیم کنیم.

(مثال های بیشتر را می توانید در پایین صفحه ببینید.)

جداول در HTML

Wiki

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

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

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

<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

Wiki

اگر شما خصوصیت 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>

خودتان امتحان کنید »
Note توجه داشته باشید که اگر بخواهید طبق استاندارهای HTML پیش بروید نباید از ویژگی border استفاده کنید.
برای تنظیم لبه ها بهتر است از CSSها استفاده کنید.

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

مثال (جداول در HTML)

<style>
table,th,td
{
border:1px solid black;
}
</style>

خودتان امتحان کنید »

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

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

Wiki

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

مثال (جداول در HTML)

<style>
table,th,td
{
border:1px solid black;
border-collapse:collapse
}
</style>

خودتان امتحان کنید »

تنظیم فاصله ی محتوای سلول ها از لبه

Wiki

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

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

مثال (جداول در HTML)

th,td
{
padding:15px;
}

خودتان امتحان کنید »

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

Wiki

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

مثال (جداول در HTML)

table
{
border-spacing:5px;
}

خودتان امتحان کنید »

عنوان جدول (Header)

Wiki

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

بیشتر مرورگرها متن را در عنصر <th> به صورت برجسته (bold) و وسط چین نمایش می دهند.

مثال (جداول در HTML)

<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، می توانیم سرتیترهای جدول بالا را در سمت چپ تنظیم کنیم:

مثال (جداول در HTML)

th
{
text-align:left;
}

خودتان امتحان کنید »

مثال بیشتر - خودتان امتحان کنید

Wiki

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) را گروه بندی می کند
نوشته شده توسط امیر پهلوان صادق
بازدید: 70876

در میان شش هزار مطلب آموزشی منتشر شده در بیاموز، جستجو نمایید ...

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین - بانک ملت معرفی بیاموز در شبکه سه