جداول
مثال جدول HTML
Company | Contact | Country |
---|---|---|
Alfreds Futterkiste | Maria Anders | Germany |
Centro comercial Moctezuma | Francisco Chang | Mexico |
Ernst Handel | Roland Mendel | Austria |
Island Trading | Helen Bennett | UK |
Laughing Bacchus Winecellars | Yoshi Tannamuri | Canada |
Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |
محتویات
- ۱ مثال جدول HTML
- ۲ تعریف یک جدول HTML
- ۳ جدول HTML - اضافه کردن یک کادر
- ۴ جدول HTML - کادرهای پنهان شده (به انگلیسی: Collapsed)
- ۵ جدول HTML - اضافه کردن حاشیه درونی سلول
- ۶ جدول HTML - عنوانهای چپ-چین
- ۷ جدول HTML - اضافه کردن فاصله گذاری کادر
- ۸ جدول HTML - سلولهایی که به اندازه چند ستون گسترده میشوند
- ۹ جدول HTML - سلولهایی که به اندازه چند ردیف گسترده میشوند
- ۱۰ جدول HTML - اضافه کردن زیرنویس
- ۱۱ استایل خاص برای یک جدول
- ۱۲ خلاصه بخش
- ۱۳ تمرین های HTML
- ۱۴ تگ های جدول HTML
- ۱۵ منابع آموزشی
تعریف یک جدول HTML
جدول HTML با تگ <table>
تعریف میشود.[۱]
هر ردیف جدول با تگ <tr>
مشخص میشود. عنوان جدول با تگ <th>
مشخص میشود. بطور پیش فرض، عنوانهای جدول bold و وسط-چین هستند. یک داده / سلول جدول با تگ <td>
مشخص میشود.
مثال
1 <table style="width:100%">
2 <tr>
3 <th>Firstname</th>
4 <th>Lastname</th>
5 <th>Age</th>
6 </tr>
7 <tr>
8 <td>Jill</td>
9 <td>Smith</td>
10 <td>50</td>
11 </tr>
12 <tr>
13 <td>Eve</td>
14 <td>Jackson</td>
15 <td>94</td>
16 </tr>
17 </table>
<td>
ظرفهای داده جدول هستند.
میتوان همهٔ انواع عنصرهای HTML را در آنها قرار داد؛ متن، تصویرها، لیستها، جدولهای دیگر و غیره.جدول HTML - اضافه کردن یک کادر
اگر برای جدول کادر تعیین نکرده باشید، بدون کادر نمایش داده خواهد شد.
کادر را میتوان با ویژگی border
در CSS تنظیم کرد:
مثال
1 table, th, td {
2 border: 1px solid black;
3 }
جدول HTML - کادرهای پنهان شده (به انگلیسی: Collapsed)
اگر میخواهید کادرها پنهان شوند و به یک کادر تبدیل شوند، خصوصیت border-collapse
را اضافه کنید:
مثال
1 table, th, td {
2 border: 1px solid black;
3 border-collapse: collapse;
4 }
جدول HTML - اضافه کردن حاشیه درونی سلول
حاشیه درونی سلول، فضای بین محتوای سلول و کادرهای آن را مشخص میکند.
اگر حاشیه درونی را مشخص نکنید، سلولهای جدول بدون حاشیه درونی نمایش داده میشوند.
برای تنظیم، از خصوصیت padding
در CSS در استفاده کنید:
مثال
1 th, td {
2 padding: 15px;
3 }
جدول HTML - عنوانهای چپ-چین
بطور پیش فرض، عنوانهای جدول bold و وسط-چین هستند.
برای چپ-چین کردن عنوانهای جدول، از خصوصیت text-align
در CSS استفاده میشود:
مثال
1 th {
2 text-align: left;
3 }
جدول HTML - اضافه کردن فاصله گذاری کادر
فاصله گذاری کادر فاصله بین سلولها را مشخص میکند.
برای تنظیم فاصله گذاری کادر برای یک جدول، از خصوصیت border-spacing
در CSS استفاده میشود:
مثال
1 table {
2 border-spacing: 5px;
3 }
border-spacing
هیچ اثری ندارد.جدول HTML - سلولهایی که به اندازه چند ستون گسترده میشوند
برای گسترده شدن یک ستون به اندازه بیش از یک ستون، از ویژگی colspan
استفاده کنید:
مثال
1 <table style="width:100%">
2 <tr>
3 <th>Name</th>
4 <th colspan="2">Telephone</th>
5 </tr>
6 <tr>
7 <td>Bill Gates</td>
8 <td>55577854</td>
9 <td>55577855</td>
10 </tr>
11 </table>
جدول HTML - سلولهایی که به اندازه چند ردیف گسترده میشوند
برای گسترده شدن یک سلول به اندازه بیش از یک ردیف، از ویژگی rowspan
استفاده میشود:
مثال
1 <table style="width:100%">
2 <tr>
3 <th>Name:</th>
4 <td>Bill Gates</td>
5 </tr>
6 <tr>
7 <th rowspan="2">Telephone:</th>
8 <td>55577854</td>
9 </tr>
10 <tr>
11 <td>55577855</td>
12 </tr>
13 </table>
جدول HTML - اضافه کردن زیرنویس
برای اضافه کردن زیرنویس به جدول از تگ <caption>
استفاده می شود:
مثال
1 <table style="width:100%">
2 <caption>Monthly savings</caption>
3 <tr>
4 <th>Month</th>
5 <th>Savings</th>
6 </tr>
7 <tr>
8 <td>January</td>
9 <td>$100</td>
10 </tr>
11 <tr>
12 <td>February</td>
13 <td>$50</td>
14 </tr>
15 </table>
<caption>
باید بلافاصله بعد از تگ <table>
اضافه شود.استایل خاص برای یک جدول
بمنظور تعریف استایل خاص برای یک جدول، ویژگی id
را برای جدول اضافه کنید:
مثال
1 <table id="t01">
2 <tr>
3 <th>Firstname</th>
4 <th>Lastname</th>
5 <th>Age</th>
6 </tr>
7 <tr>
8 <td>Eve</td>
9 <td>Jackson</td>
10 <td>94</td>
11 </tr>
12 </table>
حال میتوانید یک استایل خاص برای این جدول تعریف کنید:
1 table#t01 {
2 width: 100%;
3 background-color: #f1f1c1;
4 }
استایلهای بیشتری اضافه کنید:
1 table#t01 tr:nth-child(even) {
2 background-color: #eee;
3 }
4 table#t01 tr:nth-child(odd) {
5 background-color: #fff;
6 }
7 table#t01 th {
8 color: white;
9 background-color: black;
10 }
خلاصه بخش
- از عنصر
<table>
در HTML برای تعریف جدول استفاده میشود
- از عنصر
<tr>
در HTML برای تعریف ردیف جدول استفاده میشود
- از عنصر
<td>
در HTML برای تعریف دادهٔ جدول استفاده میشود
- از عنصر
<th>
در HTML برای تعریف عنوان جدول استفاده میشود
- از عنصر
<caption>
در HTML برای تعریف زیرنویس جدول استفاده می شود
- از خصوصیت
border
در CSS برای مشخص کردن کادر استفاده میشود
- از خصوصیت
border-collapse
در CSS برای collapse کردن کادرهای سلول استفاده میشود
- از خصوصیت
padding
در CSS برای اضافه کردن حاشیه درونی به سلولها استفاده میشود
- از خصوصیت
text-align
در CSS برای محل قرار گرفتن متن استفاده میشود
- از خصوصیت
border-spacing
در CSS برای تنظیم فاصله گذاری بین سلولها استفاده میشود
- از ویژگی
colspan
برای گستردن یک سلول به اندازه چند ستون استفاده میشود
- از ویژگی
rowspan
برای گستردن یک سلول به اندازه چند ردیف استفاده میشود
- از ویژگی
id
برای تعریف یک جدول بصورت منحصر بفرد استفاده کنید
تمرین های HTML
تگ های جدول HTML
تگ | تعریف |
---|---|
<table> | یک جدول تعریف میکند |
<th> | عنوان سلول را در یک جدول مشخص میکند |
<tr> | یک ردیف در جدول تعریف میکند |
<td> | یک سلول در جدول تعریف میکند |
<caption> | زیرنوس یک جدول را مشخص میکند |
<colgroup> | گروهی از یک با چند ستون در جدول برای قالب بندی مشخص میکند |
<col> | خصوصیتهای ستون را برای هر ستون داخل عنصر <colgroup> مشخص میکند |
<thead> | محتوای عنوان را در جدول گروهبندی میکند |
<tbody> | محتوای بدنه را در جدول گروهبندی میکند |
<tfoot> | محتوای پاورقی را در جدول گروهبندی میکند |
منابع آموزشی