آموزش Html؛ آموزش کار با جدول در HTML

در جلسه دهم آموزش Html به زبان فارسی در خدمت شماییم با آموزش Html؛ آموزش کار با جدول در HTML از وب سایت آموزش برنامه نویسی سورس باران. با ما همراه باشید…

آموزش Html؛ آموزش کار با جدول در HTML

جدول در 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>

پیشنمایش

دقت کنید که عناصر <td> دربردارنده‌ی داده‌های جدول هستند. آن‌ها می‌توانند حاوی هر نوع عنصر HTML شامل متن، تصویر، فهرست یا حتی جداول دیگر باشند.

 

افزودن کادر به جدول در HTML

اگر برای جدول خود کادر تعریف نکنید، مرورگر آن را بدون کادر نمایش خواهد داد. کادر جدول با استفاده از خصوصیت border در CSS تعریف می‌شود:

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

پیشنمایش

فراموش نکنید که کادر را هم برای جدول و هم برای خانه‌های جدول تعریف کنید.

 

کادرهای مشترک جدول در Html

اگر می‌خواهید تمام کادرهای جدولتان در یک یک کادر ادغام شود باید از ویژگی border-collapse در CSS استفاده کنید:

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

پیشنمایش

 

افزودن فاصله به سلول ها جدول در Html

با استفاده از قابلیت cell padding می‌توانید بین محتوا و کادر سلول‌های جدول یک فاصله مشخص کنید. اگر این padding را مشخص نکنید سلول‌های جدول و محتوای آن‌ها بدون فاصله نمایش داده خواهند شد. برای ایجاد فاصله از ویژگی padding در CSS استفاده کنید:

th, td {
  padding: 15px;
}

پیشنمایش

 

چپ چین کردن تیتر در HTML

تیتر جدول‌ها به صورت پیش‌فرض به صورت پررنگ و در وسط قرار دارند. برای چپ‌چین کردن تیترها از ویژگی text-align استفاده کنید:

th {
  text-align: left;
}

 

ایجاد فاصله بین کادرها (border spacing) در Html

با استفاده از ویژگی border-spacing در CSS به ایجاد فاصله بین سلول‌های یک جدول می‌پردازید:

table {
  border-spacing: 5px;
}

پیشنمایش

به یاد داشته باشید که اگر جدول شما دارای collapsed border باشد این ویژگی هیچ تاثیری در آن نخواهد داشت.

 

گسترش سلول در بیش از یک ستون جدول در Html

اگر می‌خواهید یکی از سلول‌های جدولتان در بیش از یک ستون گسترش یابد از ویژگی 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>

پیشنمایش

 

گسترش سلول در بیش از یک ردیف جدول در Html

اگر می‌خواهید یکی از سلول‌های جدولتان در بیش از یک ردیف گسترش یابد از ویژگی 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>

پیشنمایش

 

اضافه کردن کپشن (Caption) به جدول در Html

برای اضافه کردن کپشن به جدول خود از تگ <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> باید بلافاصله پس از تگ <table> وارد شود.

 

تعریف استایل خاص برای یک جدول در Html

برای تعریف یک استایل خاص برای یک جدول خاص، ویژگی 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>

حالا می‌توانید یک استایل خاص را برای این جدول تعریف کنید:

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

پیشنمایش

 

Description
<table>	Defines a table
<th>	Defines a header cell in a table
<tr>	Defines a row in a table
<td>	Defines a cell in a table
<caption>	Defines a table caption
<colgroup>	Specifies a group of one or more columns in a table for formatting
<col>	Specifies column properties for each column within a <colgroup> element
<thead>	Groups the header content in a table
<tbody>	Groups the body content in a table
<tfoot>	Groups the footer content in a table

امیدواریم که این مطلب مورد توجه دوستان قرار گرفته باشد…

منبع : W3Schools

لیست جلسات قبل آموزش Html

1. آموزش HTML؛ آموزش اصول اولیه و عناصر HTML
2. آموزش Html؛ آموزش کار با خصوصیات(Attribute) و عناوین(Heading) در Html
3. آموزش Html؛ آموزش کار با پاراگراف و استایل در Html
4. آموزش Html؛ آموزش کار با قالب بندی متن در Html
5. آموزش Html؛ آموزش کار با کامنت در HTML
6. آموزش Html؛ آموزش کار با کامنت در HTML
7. آموزش Html؛ آموزش کار با رنگ ها در HTML
8. آموزش Html؛ آموزش کار با تصاویر در HTML
9. آموزش Html؛ آموزش کار با لینک در HTML

The post آموزش Html؛ آموزش کار با جدول در HTML appeared first on آموزش برنامه نویسی.