سبد (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) را گروه بندی می کند

دیدگاه‌ها  

+3 # 8learn.ir 1395-10-21 00:03
با سلام لطفا جمله زیر را اصلاح کنید
با استفاده از خصصیت border در CSS می توانید لبه ها را تنظیم نمایید:
"خصوصیت" شما : خصصیت
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # احسان عباسی 1395-10-21 09:40
سلام. ممنون از شما، اصلاح شد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # رضا مختارزاده 1395-10-20 21:21
سلام.چطوری مطالب را در html فارسی کنیم
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # احسان عباسی 1395-10-21 09:56
سلام اگه منظورتون راست چین کردن مطالب فارسی هست، می تونید از دستور direction استفاده کنید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # رضا مختارزاده 1395-10-21 15:25
منظورم اینه که فارسی تایپ می کنم علامت ؟ می ندازه
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # امیر پهلوان صادق 1396-10-23 08:24
برای صفحات با محتوای فارسی، یکی از دو کار زیر را انجام دهید:
1- اضافه کردن تگ meta: در قسمت head صفحه، یک تگ meta با ویژگی های زیر اضافه نمایید.
<meta http-equiv="Con tent-Type" content="text/h tml; charset=utf-8">
2- UTF-8: زمانی که می خواهید فایل HTML را در نات پد ذخیره کنید، گزینه encoding را با مقدار UTF-8 تنظیم نمایید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # shiva-yousefi 1395-09-01 16:29
سلام خسته نباشد.
آموزش جداول در HTML عالی بود.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # alireza makhmal 1395-01-31 14:33
عالییییی بود.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+5 # لیلا 1394-11-17 11:31
سلام خسته نباشید قبلا از راهنمایی که میکنید ممنونم
من یک جدول درست کردم حالا میخوام بعد جدول متن یا عکس یا...بزارم اما هر عنصری که قرار میدم میچسبه به جدول میخوام که بعد جدول قرار بگیره چی کار کنم لطفا راهنمایی کنید ممنون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+5 # مهرداد صلاحی 1394-11-17 21:02
با سلام و تشکر.
تگ tabel یک تگ بلاک‌لول هست، بدین معنی که با ایجاد این تگ در صفحه، قبل و بعد آن یه خط، فاصله ایجاد خواهد شد. در واقع شما نیازی به کار اضافه ندارید، ولی به هر دلیلی اگر این اتفاق نمی‌افته. کافیه بعد از جدول یک تگ div ایجاد کنید و استایل clear:both رو بهش بدید. بعد از تگ div سایر کدها رو بنویسید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # لیلا 1394-11-18 14:17
سلام وقت بخیر واقعا ازتون ممنونم مشکلم حل شد
خیلی کلافه شده بودم از این موضوع
فقط اگه میشه درباره این استایل توضیح بدید
ممنون که وقت میزارید
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+5 # مهرداد صلاحی 1394-11-18 21:48
با سلام و تشکر.
عناصر وقتی به صورت شناور در صفحه قرار بگیرن،‌باعث میشه که عنصر بعدی در ادامه‌ی اون بیاد. این خاصیت بعضی مواقع خوب و بعضی مواقع بد هست.

در اینجا جدول شناور هست (به هر دلیل) و به خاطر این وقتی شما هر تگی که ایجاد کنید، در ادامه میاد.
وقتی ما خاصیت clear رو برابر both قرار می‌دهیم. قبل و بعد عنصر شناور رو به نوعی ندید میگیره، و باعث میشه که عناصر بعد از اون تگ یک خط پایین‌تر بیان. در واقع عنصری که clear:both‌داره باعث میشه که تگ بعدی بلاک‌لول بشه.

این شاید تعریف دقیقی از این خاصیت نباشه، ولی مفهومش رو تا حدی می‌رسونه. برای اطلاعات بیشتر باید عناصر شناور و overflow در CSS رو مطالعه کنید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # zmgl 1394-05-28 13:14
باسلام
اگه میشه در جدول بالایی برای 5تای اخر میشه مثال بزنین.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # مهرداد صلاحی 1394-11-17 21:08
کد زیر یه سمپل ساده از ایجاد یک جدول در html هست. دقت کنید حتی نیاز به استفاده از تگ‌های thead, tbody و tfoot هم نیست. یعنی با تگ table و tr و td می‌شه جدول رو رسم کرد.
<table>
<thead>
<tr>
<td>Head 1</td>
<td>Head 2</td>
<td>Head 3</td>
<td>Head 4</td>
<td>Head 5</td>
</tr>
</thead>
<tbody>
<tr>
<td>Row 11</td>
<td>Row 12</td>
<td>Row 13</td>
<td>Row 14</td>
<td>Row 15</td>
</tr>
<tr>
<td>Row 21</td>
<td>Row 22</td>
<td>Row 23</td>
<td>Row 24</td>
<td>Row 25</td>
</tr>
<tr>
<td>Row 31</td>
<td>Row 32</td>
<td>Row 33</td>
<td>Row 34</td>
<td>Row 35</td>
</tr>
<tr>
<td>Row 41</td>
<td>Row 42</td>
<td>Row 43</td>
<td>Row 44</td>
<td>Row 45</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Footer 1</td>
<td>Footer 2</td>
<td>Footer 3</td>
<td>Footer 4</td>
<td>Footer 5</td>
</tr>
</tfoot>
</table>
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+14 # کسری کرمی 1393-11-08 10:45
سلام
در قسمت Tables without borders فراموش شده که تگ h4 را ببندید.
از بابت سایت خوب و جوابگویی سریع به سوالات هم از شما متشکرم.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
-9 # شقایق 1394-03-23 13:39
خواهش میکنم عزیزم
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+11 # امیر پهلوان صادق 1393-11-09 19:54
سلام، ممنون اصلاح شد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # Reza Bahrami 1393-10-08 22:25
"frame="border با frame="box چه تفاوتی داره چون توی مثال مربوط به frame کار کردشون مثل همه
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # امیر پهلوان صادق 1393-10-09 15:22
ویژگی frame با مقدار "border" یا "box" دقیقاً کاربردی یکسان دارند و با استفاده از آن می توان حاشیه چهار طرف جدول را نمایش داد.
توجه: ویژگی frame در HTML5 پشتیبانی نمی شود و بهتر است بجای آن از خصوصیت border در CSS استفاده کرد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

آموزش صوتی HTML

بستن
مدرس:
سوال و جواب:

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

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