آموزش HTML صفحه اصلی اینستاگرام ما
جدول های HTML

جدول های HTML


جدول های HTML به توسعه دهندگان وب اجازه میدهد تا داده ها را در سطرها و ستون ها مرتب کنند .


مثال

نام نام خانوادگی کلاس
ساسان مقدم 5
علی میرزایی 2
قدیر قادری 1
ساشا امانی 4
سیمین وحیدی 6
هادی ابراهیمی 3
امتحان کن »

مشخص کردن یک جدول HTML

تگ <table> یک جدول HTML مشخص میکند .

هر سطر جدول با یک تگ <tr> مشخص میشود . هر عنوان جدول با یک تگ <th> مشخص میشود . هر داده/سلول جدول با یک تگ <td> مشخص میشود .

بصورت پیشفرض ، متن داخل عناصر <th> پررنگ و در وسط قرار گرفته هستند .

بصورت پیشفرض ، متن داخل عناصر <td> عادی و چپ تراز شده هستند .

مثال‌

یک جدول ساده HTML :

<table style="width:100%">
  <tr>
    <th>نام</th>
    <th>فامیل</th>
    <th>سن</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 - افزودن یک مرز

برای افزودن یک مرز به یک جدول ، از ویژگی CSS border استفاده کنید :

مثال

table , th , td {
    border: 1px solid black;
}
امتحان کن »

به یاد داشته باشید که مرزها را برای هر دو جدول و سلول های جدول مشخص کنید .


جدول HTML - مرزهای روی هم افتاده

برای امکان روی هم افتادن مرزها در یک مرز ، ویژگی CSS border-collapse را اضافه کنید :

مثال:

table , th , td {
  border : 1px solid black;
  border-collapse: collapse;
}
امتحان کن »

جدول HTML - افزودن فضای سلولی

فضای سلولی فضای بین محتوای سلول و مرز سلول را مشخص میکند .

اگر یک فضای سلولی مشخص نکنید ، سلول های جدول بدون فضا نمایش داده خواهند شد .

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

مثال:

th , td {
  padding : 15px;
}
امتحان کن »

جدول HTML - عناوین چپ-تراز

بصورت پیشفرض ، عناوین جدول پررنگ و در وسط قرار گرفته هستند .

برای چپ-تراز کردن عناوین جدول ، از ویژگی CSS text-align استفاده کنید :

مثال:

th {
  text-align: left;
}
امتحان کن »

جدول HTML - افزودن فضای مرزی

فضای مرزی فضای بین سلول ها را مشخص میکند .

برای تنظیم فضای مرزی برای یک جدول ، از ویژگی CSS border-spacing استفاده کنید :

مثال:

table {
  border-spacing: 5px;
}
امتحان کن »

نکته: اگر جدول دارای مرزهای روی هم افتاده است ، border-spacing هیچ تاثیری ندارد .


جدول HTML - سلولی که در چند ستون گسترده میشود

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

مثال:

<table style="width:100%">
  <tr>
    <th>نام</th>
    <th colspan="2">تلفن</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
  </tr>
</table>
امتحان کن »

جدول HTML - سلولی که در چند سطر گسترده میشود

برای گسترش محدوده یک سلول فراتر از یک سطر ، از صفت rowspan استفاده کنید :

مثال:

<table style="width:100%">
  <tr>
    <th>نام</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">تلفن:< /th>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
</table>
امتحان کن »

جدول HTML - افزودن یک عنوان کلی

برای افزودن یک عنوان کلی به یک جدول ، از تگ <caption> استفاده کنید :

مثال:

<table style="width:100%">
  <caption>پس انداز ماهانه</caption>
  <tr>
    <th>ماه</th>
    <th>پس انداز</th<
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>
امتحان کن »

نکته: تگ <caption> باید بلافاصله بعد از تگ <table> قرار گیرد .


یک سبک خاص برای یک جدول

برای مشخص کردن یک سبک خاص برای یک جدول خاص ، یک صفت id به جدول اضافه کنید :

مثال‌

<table id="t01">
  <tr>
    <th>نام</th>
    <th>فامیل</th>
    <th>سن</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

اکنون میتوانید یک سبک خاص برای این جدول مشخص کنید :

#t01 {
  width: 100%;
  background-color: #f1f1c1;
}
امتحان کن »

چکیده فصل




پسین پیشین