به نام خدا
با عرض سلام و وقت بیخر خدمت بازدید کنندگان گرامی وبسایت وان پی سی
در این قسمت از آموزش ، به سراغ جدول ها در HTML خواهیم رفت
همراهی شما باعث افتخار ماست
جدول ها در HTML :
برای تعریف جدول در HTML باید از تگ <table> استفاده کرد
برای تعریف یک ردیف در جدول ها از تگ <tr> استفاده می شود (Table Rows)
برای تعریف یک ستون یا یک خط عمودی در جدول ، باید از تگ <td> استفاده شود (Table Data)
برای معرفی یک عنوان در سطر جدول نیز باید از تگ <th> استفاده کرد (Table Heading)
نقل قول
در تگ های <table> <th> <tr> <td> میتوانید از تمامی کد های HTML استفاده کرد
رسم یک جدول با ویژگی border :
برای رسم یک جدول همراه با border باید به ای نشکل عمل کرد:
<table border=”1″ style=”width:100%”>
<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 باشد
به این شکل :
table, th, td {
border: 1px solid black;
}
برای حفظ زیبایی و قوانین این تگ ، باید به تمامی تگ های ویژگی border اضافه کنیم
حذف دوخط در تگ <table> :
وقتی به تمامی تگ های <table> ویژگی border را میدهیم ، یک فاصله میانی بین حاشیه اصلی و داده های ما بر قرار می شود ، برای حذف این حاشیه زائد ، از ویزگی border-collapse: collapse; استفاده می وشد ؛
به این شکل :
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
فاصله محتوا از حاشیه :
برای ایجاد فاصله متن از حاشیه ، میتوانید از ویژگی padding در CSS تگ <table> استفاده کنیم
به این شکل :
th, td {
padding: 15px;
}
برای اینکه بین متن و حاضیه ما این فاصله ایجاد شود ، فقط برای th و td این ویژگی را اعمال میکنیم
عنوان ها در <table> :
برای نوشتن عنوان ها در <table> شما میتوانید از تگ <th> استفاده کنید
نکته : در تمامی مرورگر ها این ویژگی قابل اجرا است و همه ی آنها ان را عنوان پر رنگ و درشت میکنند
به این شکل :
<table style=”width:100%”>
<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: left; استفاده کنید
به این شکل :
فاصله بین سلول ها از هم :
برای ایجاد فاصله بین سلول های یک جدول ، میتوان از ویزگی border-spacing استفاده کرد
به این شکل :
table {
border-spacing: 5px;
}
تجمیع دو سلول سطری :
برای تجمیع دو سلول با هم ، میتوانیم از ویژگی colspan استفاده کرد
به این شکل :
<table style=”width:100%”>
<tr>
<th>Name</th>
<th colspan=”2″>Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
تجمیع دو سلول ستونی :
برای تجمیع دو سلول ستونی با هم ، میتوان از rowspan استفاده کرد
به این شکل :
<table style=”width:100%”>
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan=”2″>Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
اضافه کردن عنوان به جدول :
برای اضافه کردن عنوان به جدول از تگ caption استفاده می شود :
<table style=”width:100%”>
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
انتصاب یه سبک خاص برای یک جدول :
برای انتصاب یک سبک خاص ، شما میتوانید از id استفاده کنید :
<table id=”t01″>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
فایل CSS شما باید اینگونه باشد :
table#t01 {
width: 100%;
background-color: #f1f1c1;
}
table#t01 tr:nth-child(even) {
background-color: #eee;
}
table#t01 tr:nth-child(odd) {
background-color: #fff;
}
table#t01 th {
color: white;
background-color: black;
}
آموزش HTML به زبان ساده – قسمت دوازدهم – مقدماتی
