جداول در 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) را گروه بندی می کند |
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 70528
دیدگاه‌ها
سلام و خسته نباشید و ممنون از مطالب آموزشی خوبتون
در یک جدول، خصوصیت padding رو در هر سلول که قرار میدم محتوای داخل جدول به لبه بالای جدول میچسبه
ممنون میشم راهنماییم کنید.
سلام
برای استایل دهی به جدول، بجای اینکه داخل سلولها، استایل دهی کنید، بپیشنهاد می شه در بخش head صفحه اقدام به این کار بکنید.
بعنوان مثال برای تنظیم Padding از کد زیر در بخش head استفاده کنید:
th, td
{
padding:15px;
}
با سلام لطفا جمله زیر را اصلاح کنید
با استفاده از خصصیت border در CSS می توانید لبه ها را تنظیم نمایید:
"خصوصیت" شما : خصصیت
سلام. ممنون از شما، اصلاح شد.
سلام.چطوری مطالب را در html فارسی کنیم
سلام اگه منظورتون راست چین کردن مطالب فارسی هست، می تونید از دستور direction استفاده کنید.
منظورم اینه که فارسی تایپ می کنم علامت ؟ می ندازه
برای صفحات با محتوای فارسی، یکی از دو کار زیر را انجام دهید:
1- اضافه کردن تگ meta: در قسمت head صفحه، یک تگ meta با ویژگی های زیر اضافه نمایید.
<meta http-equiv="Con tent-Type" content="text/h tml; charset=utf-8">
2- UTF-8: زمانی که می خواهید فایل HTML را در نات پد ذخیره کنید، گزینه encoding را با مقدار UTF-8 تنظیم نمایید.
سلام خسته نباشد.
آموزش جداول در HTML عالی بود.
عالییییی بود.
سلام خسته نباشید قبلا از راهنمایی که میکنید ممنونم
من یک جدول درست کردم حالا میخوام بعد جدول متن یا عکس یا...بزارم اما هر عنصری که قرار میدم میچسبه به جدول میخوام که بعد جدول قرار بگیره چی کار کنم لطفا راهنمایی کنید ممنون
با سلام و تشکر.
تگ tabel یک تگ بلاک‌لول هست، بدین معنی که با ایجاد این تگ در صفحه، قبل و بعد آن یه خط، فاصله ایجاد خواهد شد. در واقع شما نیازی به کار اضافه ندارید، ولی به هر دلیلی اگر این اتفاق نمی‌افته. کافیه بعد از جدول یک تگ div ایجاد کنید و استایل clear:both رو بهش بدید. بعد از تگ div سایر کدها رو بنویسید.
سلام وقت بخیر واقعا ازتون ممنونم مشکلم حل شد
خیلی کلافه شده بودم از این موضوع
فقط اگه میشه درباره این استایل توضیح بدید
ممنون که وقت میزارید
با سلام و تشکر.
عناصر وقتی به صورت شناور در صفحه قرار بگیرن،باعث میشه که عنصر بعدی در ادامه‌ی اون بیاد. این خاصیت بعضی مواقع خوب و بعضی مواقع بد هست.
در اینجا جدول شناور هست (به هر دلیل) و به خاطر این وقتی شما هر تگی که ایجاد کنید، در ادامه میاد.
وقتی ما خاصیت clear رو برابر both قرار می‌دهیم. قبل و بعد عنصر شناور رو به نوعی ندید میگیره، و باعث میشه که عناصر بعد از اون تگ یک خط پایین‌تر بیان. در واقع عنصری که clear:bothداره باعث میشه که تگ بعدی بلاک‌لول بشه.
این شاید تعریف دقیقی از این خاصیت نباشه، ولی مفهومش رو تا حدی می‌رسونه. برای اطلاعات بیشتر باید عناصر شناور و overflow در CSS رو مطالعه کنید.
باسلام
اگه میشه در جدول بالایی برای 5تای اخر میشه مثال بزنین.
کد زیر یه سمپل ساده از ایجاد یک جدول در 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>
سلام
در قسمت Tables without borders فراموش شده که تگ h4 را ببندید.
از بابت سایت خوب و جوابگویی سریع به سوالات هم از شما متشکرم.
خواهش میکنم عزیزم
سلام، ممنون اصلاح شد.
"frame="border با frame="box چه تفاوتی داره چون توی مثال مربوط به frame کار کردشون مثل همه
ویژگی frame با مقدار "border" یا "box" دقیقاً کاربردی یکسان دارند و با استفاده از آن می توان حاشیه چهار طرف جدول را نمایش داد.
توجه: ویژگی frame در HTML5 پشتیبانی نمی شود و بهتر است بجای آن از خصوصیت border در CSS استفاده کرد.