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

0 دیدگاه

در جلسه دهم آموزش 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>

<tr>

<th>Firstname</th>

<th>Lastname</th>

</tr>

<tr>

<td>Smith</td>

</tr>

<tr>

<td>Jackson</td>

</tr>

</table>

پیشنمایش

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

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

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

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

table, th, td {

border: 1px solid black;

}

پیشنمایش

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

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

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

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

table, th, td {

border: 1px solid black;

border-collapse: collapse;

}

پیشنمایش

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

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

th, td {
  padding: 15px;
}

th, td {

padding: 15px;

}

پیشنمایش

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

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

th {
  text-align: left;
}

th {

text-align: left;

}

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

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

table {
  border-spacing: 5px;
}

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>

<tr>

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

</tr>

<tr>

<td>Bill Gates</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>

<tr>

<td>Bill Gates</td>

</tr>

<tr>

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

</tr>

<tr>

</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>Monthly savings</caption>

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

<tr>

<td>January</td>

</tr>

<tr>

<td>February</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>

<tr>

<th>Firstname</th>

<th>Lastname</th>

</tr>

<tr>

<td>Jackson</td>

</tr>

</table>

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

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

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

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

آموزش اصول اولیه و عناصر HTML

آموزش کار با خصوصیات(Attribute) و عناوین(Heading) در Html

آموزش کار با پاراگراف و استایل در Html

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

آموزش کار با کامنت در HTML

آموزش کار با کامنت در HTML

آموزش کار با رنگ ها در HTML

آموزش کار با تصاویر در HTML

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

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

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

آموزش کار با عناصر Block و Inline در HTML

آموزش کار با عنصر Class در HTML

آموزش Html؛ آموزش iframe در HTML

آموزش Html؛ آموزش جاوا اسکریپت در HTML

آموزش کار با عنصر Head در HTML

آموزش Layout در HTML

آموزش طراحی سایت ریسپانسیو در HTML

آموزش عناصر کد کامپیوتر در HTML

آموزش موجودیت (Entities) در HTML

آموزش نمادها (Symbols) در HTML

آموزش کار با Character (کاراکترهای رزرو شده) در HTML

آموزش رمزگذاری URL در HTML

آموزش کامل کار با فرم ها در HTML

آموزش انواع ورودی (Input) در HTML

آموزش خصوصیات ورودی در HTML

حتما بخوانید 1 : فیلم آموزش رایگان Html مهندس رحمانی

حتما بخوانید 1 : فیلم آموزش رایگان CSS مهندس رحمانی

5/5 - (1 امتیاز)

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.

نظرات

برچسب ها: آموزش اچ تی ام ال

صابر بوستانی

داستان من با دنیای برنامه‌ نویسی آغاز شد، و در ادامه به عنوان یک توسعه‌ دهنده نرم‌ افزار، طراح وب سایت و متخصص سئو، مهارت ‌های تکنیکی و تحلیلی خودم رو پرورش دادم. علاقه م به دنیای مالی منو به سمت یادگیری ترید و معامله‌گری سوق داد. و در حال حاضر در برنامه نویسی و معامله گری ارز دیجیتال انجام میدم. از سال 96 سعی کردم معامله گری در کریپتو رو یاد بگیرم. ترید و معامله گری برام پر از چالش و شکست‌ های متعدد بود. اما هر شکست، درسی ارزشمند برام داشت و من رو به یک تریدر و معامله گر قوی‌ تر و هوشمندتر تبدیل کرد. با پشتکار و یادگیری مداوم، تونستم به موفقیت‌های قابل توجهی دست یابم و به معامله گری موفق تبدیل بشم. در اینجا بزرگترین تجربیات و مهمترین دانش خودم رو در اختیار شما قرار میدم تا در مدت زمان کوتاه تر و شکست های کمتر در این مسیر به موفقیت برسید.

دوره صفر تا صد آموزش بین المللی لینوکس

منبع : سورس باران
رمز فايل : www.sourcebaran.com
انتشار: ۱۹ اردیبهشت ۱۳۹۸

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

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

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

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

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

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

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

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

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

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

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

صابر بوستانی

دسته بندی موضوعات

آخرین محصولات فروشگاه

نظرات

بازخوردهای خود را برای ما ارسال کنید

لغو پاسخ

مطالب مرتبط