۲۰
مهر

جلسه ۱۶ : کار با Table در HTML

دسته‌بندی‌ها :

جزئیات
نوع مطلبآموزشی تصویری

فهرست

مقدمه

با عرض سلام خدمت کاربران سایت پی وی لرن . در این پست قصد داریم به آموزش نحوه کار با تگ table در کد html بپردازیم. جداول ( Table ) از مهمترین و کاربردی ترین تگ های html می باشد که در تمام صفحات وب جهان استفاده می شود. از مهمترین کاربرد های Table مرتب کردن و نظم دادن به سایر تگ ها ی یک صفحه وب می باشد. در این پست چگونگی ایجاد و کار با tabel ها و کاربرد آن در صفحات وب ، مورد بررسی قرار گرفته است.

Table – تگ table

تعریف کردن Table

جدول HTML با تگ <table> تعریف شده است. هر سطر جدول با تگ <tr> تعریف شده است. هدر جدول نیز با تگ <th> تعریف می شود. به طور پیش فرض، عناوین جدول درشت و متمرکز هستند. سلول های جداول که حاوی داده ها می باشد، نیز با تگ <td> تعریف شده است.

مثال :

مثال : تعریف جدول

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

<tr>

<th>Firstname</th>

<th>Lastname</th>

</tr>

<tr>

<td>Smith</td>

</tr>

<tr>

<td>Jackson</td>

</tr>

</table>

خودتان امتحان کنید »

اضافه کردن Border در تگ table

Border برای مشخص کردن مرز td ها در تگ tabel استفاده می شود. یک Border را می توان در کد CSS تعریف کرد:

مثال:

مثال : افزودن border به جدول

table, th, td {
    border: 1px solid black;
}

table, th, td {

border: 1px solid black;

}

خودتان امتحان کنید »

تعریف فضای فاصله داخلی تگ td جداول (Cell padding)

برای تنظیم padding یا فاصله داخلی سلول ها در تگ table، از ویژگی property padding CSS استفاده کنید:

مثال:

مثال : حذف فواصل border جداول

th, td&nbsp;{
&nbsp;&nbsp;&nbsp; padding:&nbsp;15px;
}

th, td {

    padding: 15px;

}

خودتان امتحان کنید »

ادغام چند سلول (td) در یک سلول

برای ادغام سلول ها در بیش از یک ستون، از ویژگی colspan استفاده کنید:

مثال:

مثال : ادغام سلول های جدول

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
  </tr>
</table>

<tr>

<th colspan="2">Telephone</th>

</tr>

<tr>

<td>Bill Gates</td>

</tr>

</table>

خودتان امتحان کنید »

ترازبندی چپ heading

در حالت پیش فرض heading های جداول در وسط تراز شده اند.

برای ترازبندی در چپ یا راست می توانید از صفت text-align استفاده کنید :

مثال : ترازبندی heading

th {
    text-align: left;
}

th {

text-align: left;

}

خودتان امتحان کنید »

افزودن Border spacing

ویژگی Border spacing فواصل بین سلول های جداول را تعیین می کند.

برای تعیین آن از ویژگی border-spacing به صورت زیر استفاده کنید:

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

table {
    border-spacing: 5px;
}

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>55577854</td>
    <td>55577855</td>
  </tr>
</table>

<tr>

<th colspan="2">Telephone</th>

</tr>

<tr>

<td>Bill Gates</td>

</tr>

</table>

خودتان امتحان کنید »

ادغام سطرهای جدول

برای ادغام چند سطر از جدول در یکی از صفت rowspan به صورت زیر استفاده کنید:

مثال : ادغام سطرهای جدول

<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
</table>

<tr>

<td>Bill Gates</td>

</tr>

<tr>

<th rowspan="2">Telephone:</th>

</tr>

<tr>

</tr>

</table>

خودتان امتحان کنید »

افزودن عنوان در جدول

بای افزودن عنوان در یک تگ 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>

<caption>Monthly savings</caption>

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

<tr>

<td>January</td>

</tr>

<tr>

<td>February</td>

</tr>

</table>

خودتان امتحان کنید »

تعریف کردن یک style برای جدول

برای تعریف یک سبک (style) خاص برای یک جدول ، یک ویژگی id را به جدول اضافه کنید:

مثال :

<table id="t01">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

<tr>

<th>Firstname</th>

<th>Lastname</th>

</tr>

<tr>

<td>Jackson</td>

</tr>

</table>

اکنون در کد CSS یک Style برای تگ table تعریف کنید:

مثال : تعریف style

table#t01 {
    width: 100%; 
    background-color: #f1f1c1;
}

table#t01 {

width: 100%;

background-color: #f1f1c1;

}

خودتان امتحان کنید »

می توانید style های بیشتری را نیز اضافه کنید:

مثال : افزودن style بیشتر

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;
}

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;

}

خودتان امتحان کنید »

خلاصه ی بخش

از المان <table> برای تعریف یک جدول استفاده کنید.
برای تعیین یک ردیف جدول از عنصر <tr> استفاده کنید.
از المان <td> برای تعریف یک جدول استفاده کنید.
از المان <th> برای تعریف یک عنوان جدول استفاده کنید.
از المان <caption> برای تعریف یک عنوان جدول استفاده کنید.
از border برای تعریف مرز استفاده کنید.
از border-collapse برای از بین بردن مرزهای سلولی استفاده کنید.
از ویژگی padding برای اضافه کردن لایه به سلول استفاده کنید.
از چیدمان CSS متن برای خواندن متن سلول استفاده کنید.
برای تنظیم فاصله بین سلول ها از ویژگی border-spacing استفاده کنید.
استفاده از خصیصه colspan برای ایجاد یک سلول در طول بسیاری از ستونها.
استفاده از rowspan برای ایجاد یک سلول، چندین ردیف را ایجاد می کند.
از ویژگی id برای جداگانه یک جدول استفاده کنید.

کلام آخر

کار با Table در HTML در گذشته به علت استفاده از آن در مرتب سازی عناصر html اهمیت ویژه ای داشت اما در حال حاضر بیشتر در درج مطالب و محتوای جدولی در صفحات وب از آن استفاده می شود، اما هنوز هم کاربرد فراوانی در وب سایت ها دارد.

به اشتراک بگذارید

table در html ,آموزش کار با Table در HTML ,آموزش کار با جداول در HTML ,ایجاد table ,تعریف Table در HTML ,تعریف جدول در HTML ,تگ table ,چگونگی تعریف Table در HTML ,کار با Table در HTML ,کار با تگ Table ,کد html ,نحوه تعریف جدول در html

دیدگاه کاربران

تعداد دیدگاه : 1

ناهید
مرداد ۲۶, ۱۳۹۹
سلام
چجوری میشه از تگ table با تنظیماتش در php استفاده کرد؟
پاسخ دادن

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۱۶ : کار با Table در HTML

مقدمه

تعریف کردن Table

اضافه کردن Border در تگ table

تعریف فضای فاصله داخلی تگ td جداول (Cell padding)

ادغام چند سلول (td) در یک سلول

ترازبندی چپ heading

افزودن Border spacing

ادغام ستون های جدول

ادغام سطرهای جدول

افزودن عنوان در جدول

تعریف کردن یک style برای جدول

خلاصه ی بخش

کلام آخر

لیست مطالب دوره

آموزش HTML

فرم در HTML

HTML5

گرافیک در HTML

چند رسانه ای در html

APIs در HTML

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ