آموزش و کتاب الکترونیکی

آموزش HTML به زبان ساده – قسمت دوازدهم – مقدماتی

آموزش HTML به زبان ساده - قسمت دوازدهم - مقدماتی آموزش و کتاب الکترونیکی
نوشته توسط مهدی بلوریان

به نام خدا

 

با عرض سلام و وقت بیخر خدمت بازدید کنندگان گرامی وبسایت وان پی سی

در این قسمت از آموزش ، به سراغ جدول ها در 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; استفاده کنید
به این شکل :
th {
    text-align: left;
}

فاصله بین سلول ها از هم :

ممکن است بپسندید :   آموزش HTML به زبان ساده - قسمت پنجم - مقدماتی

 

برای ایجاد فاصله بین سلول های یک جدول ، میتوان از ویزگی 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;
}

 

 

درباره نویسنده

مهدی بلوریان

دیدگاه بگذارید

avatar
  Subscribe  
Notify of