۷
آذر

جلسه ۱۰۸ : آموزش کار با تگ th در HTML

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

جزئیات
نوع محتواآموزشی

فهرست

مقدمه

سلام پی وی لرنی های عزیز!
به دوره آموزش تگ های HTML خوش آمدید!
HTML یا Hypertext Markup Language یک نوع زبان نشانه‌گذاری استاندارد برای ایجاد صفحات اینترنت و وب محسوب می شود.
می توان ادعا کرد که HTML دروازه ورود و پیشرفت برای یادگیری سایر زبان های برنامه نویسی هم چون CSS و جاوا اسکریپت است.
HTML ساختار و اسکلت صفحات وب را تشکیل می دهد و بدون آن نمی توان هیچ صفحه وبی را ساخت.
دوست دارید طراح وب شوید؟
خب باید HTML را بیاموزید!
نگران نشوید! یادگیری HTML کار دشواری نیست و با کمی تلاش خیلی زود در آن استاد می شوید.
در جلسه قبل به کار با تگ tfoot پرداختیم و آموختم که از این تگ برای گروه بندی محتوای صفحه در یک جدول HTML استفاده می شود.
در این جلسه قرار است آموزش کار با تگ th در HTML را ارائه کنیم.

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

به مثال زیر توجه نمایید.
در این مثل یک جدول HTML ساده و دارای دو سلول تعریف شده است.

مثال :

<table>
 <tr>
   <th>Month</th>
   <th>Savings</th>
 </tr>
 <tr>
   <td>January</td>
   <td>$100</td>
 </tr>
</table>

<table>

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

<tr>

<td>January</td>

</tr>

</table>

تعریف و کاربرد

تگ th یک هدر را در یک جدول HTML تعریف می کند.
یک جدول HTML دارای دو نوع سلول است:

سلولهای هدر (Th) – حاوی اطلاعات مربوط به عنوان (ایجاد شده با عنصر th).
سلولهای استاندارد (Td) – حاوی داده (ایجاد شده با عنصر td).

متون در عناصر th به صورت پیش فرض درشت و متمرکز هستند.
متن در عناصر td به طور پیش فرض به طور منظم و در سمت چپ قرار دارند.

پشتیبانی مرورگرها

عنصر
<th>	بله	بله	بله	بله	بله

تفاوت بین HTML 4.01 و HTML5

تمام خصیصه های layout در HTML5 حذف می شوند.

خصیصه ها

خصیصه	مقدار	توضیحات
abbr	text	این خصیصه نسخه خلاصه مطالب موجود در یک هدر را مشخص می کند.
align	left right center justify char	این خصیصه محتوا را در یک سلول هدر تراز می کند. این خصیصه در HTML5 پشتیبانی نمی شود.
axis	category_name	این خصیصه به دسته بندی سلول های هدر می پردازد. این خصیصه در HTML5 پشتیبانی نمی شود.
bgcolor	rgb(x,x,x) #xxxxxx colorname	این خصیصه رنگ پس زمینه یک سلول هدر را مشخص می کند. این خصیصه در HTML5 پشتیبانی نمی شود.
char	character	این خصیصه محتوا را در یک سلول با یک کاراکتر تراز می کند. این خصیصه در HTML5 پشتیبانی نمی شود.
charoff	number	این خصیصه تعداد کاراکترهایی که محتوا از کاراکتر مشخص شده با ویژگی char تنظیم می شود را تنظیم می کند. این خصیصه در HTML5 پشتیبانی نمی شود.
colspan	number	این خصیصه تعداد ستون هایی را که باید در یک سلول هدر ادغام شوند را مشخص می کند.
headers	header_id	این خصیصه به مشخص کردن یک یا چند سلول هدر که یک سلول به آن مربوط است؛ می پردازد.
height	pixels %	این خصیصه ارتفاع یک سلول هدر را تنظیم می کند. این خصیصه در HTML5 پشتیبانی نمی شود.
nowrap	nowrap	این خصیصه مشخص می کند که محتوای داخل سلول هدر نباید ادغام شود. این خصیصه در HTML5 پشتیبانی نمی شود.
rowspan	number	برای ادغام کردن سطرهای یک جدول استفاده می شود.
scope	col colgroup row rowgroup	راهی را برای مرتبط کردن سلول های هدر با ستون های آن تعیین می نماید.
sorted	reversed number reversed number number reversed	این خصیصه مشخص می کند که آیا سلول هدر یک هدر ستون، ردیف یا گروه ستون یا ردیف است یا خیر.
valign	top middle bottom baseline	تراز محتوای موجود در تگ th را بصورت عمودی مشخص می کند. این خصیصه در HTML5 پشتیبانی نمی شود.
width	pixels %	این خصیصه عرض یک سلول هدر را تنظیم می نماید. این خصیصه در HTML5 پشتیبانی نمی شود.

خصیصه های سراسری Global Attributes

تگ <th> از خصیصه های سراسری در HTML پشتیبانی می کند.

خصیصه رویداد Event Attributes

تگ <th> از خصیصه رویداد در HTML پشتیبانی می کند.

در ادامه آموزش کار با تگ th در HTML با ارائه چند مثال تکمیلی، بیشتر با این تگ آشنا می شویم.

مثال های تکمیلی

مثال یک

هدر جدول (نحوه ایجاد هدرهای جدول).

مثال :

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>

<h4>Table headers:</h4>
<table>
  <tr>
    <th>Name</th>
    <th>Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>555 77 854</td>
  </tr>
</table>

<h4>Vertical headers:</h4>
<table>
  <tr>
    <th>First Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th>Telephone:</th>
    <td>555 77 854</td>
  </tr>
</table>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

border: 1px solid black;

}

</style>

</head>

<body>

<h4>Table headers:</h4>

<table>

<tr>

<th>Telephone</th>

</tr>

<tr>

<td>Bill Gates</td>

</tr>

</table>

<h4>Vertical headers:</h4>

<table>

<tr>

<th>First Name:</th>

<td>Bill Gates</td>

</tr>

<tr>

<th>Telephone:</th>

</tr>

</table>

</body>

</html>

مثال دو

جدول با متن ( ایجاد یک جدول به همراه متن).

مثال :

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>

<table>
  <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>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

border: 1px solid black;

}

</style>

</head>

<body>

<table>

<caption>Monthly savings</caption>

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

<tr>

<td>January</td>

</tr>

<tr>

<td>February</td>

</tr>

</table>

</body>

</html>

مثال سه

تگ های درون یک جدول (نحوه نمایش عناصر در عناصر دیگر).

مثال :

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>

<table>
<tr>
  <td>
   <p>This is a paragraph</p>
   <p>This is another paragraph</p>
  </td>
  <td>This cell contains a table:
   <table>
   <tr>
     <td>A</td>
     <td>B</td>
   </tr>
   <tr>
     <td>C</td>
     <td>D</td>
   </tr>
   </table>
  </td>
</tr>
<tr>
  <td>This cell contains a list
   <ul>
    <li>apples</li>
    <li>bananas</li>
    <li>pineapples</li>
   </ul>
  </td>
  <td>HELLO</td>
</tr>
</table>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

border: 1px solid black;

}

</style>

</head>

<body>

<table>

<tr>

<td>

<p>This is a paragraph</p>

<p>This is another paragraph</p>

</td>

<td>This cell contains a table:

<table>

<tr>

</tr>

<tr>

</tr>

</table>

</td>

</tr>

<tr>

<td>This cell contains a list

<ul>

<li>apples</li>

<li>bananas</li>

<li>pineapples</li>

</ul>

</td>

<td>HELLO</td>

</tr>

</table>

</body>

</html>

مثال چهار

سلولهایی که بیش از یک ردیف / ستون دارند (نحوه تعریف سلولهای جدول که بیش از یک ردیف یا یک ستون دارند).

مثال :

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>

<h4>Cell that spans two columns:</h4>
<table>
<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>

<h4>Cell that spans two rows:</h4>
<table>
<tr>
  <th>First 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>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

border: 1px solid black;

}

</style>

</head>

<body>

<h4>Cell that spans two columns:</h4>

<table>

<tr>

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

</tr>

<tr>

<td>Bill Gates</td>

</tr>

</table>

<h4>Cell that spans two rows:</h4>

<table>

<tr>

<th>First Name:</th>

<td>Bill Gates</td>

</tr>

<tr>

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

</tr>

<tr>

</tr>

</table>

</body>

</html>

تنظیمات پیش فرض CSS

بیشتر مرورگرها عنصر <th> را با مقادیر پیش فرض زیر نمایش می دهند:

مثال :

th {
  display: table-cell;
  vertical-align: inherit;
  font-weight: bold;
  text-align: center;
}

th {

display: table-cell;

vertical-align: inherit;

font-weight: bold;

text-align: center;

}

کلام آخر

در این جلسه و با آموزش کار با تگ th در HTML همراه شما علاقمندان یادگیری تگ های HTML بودیم؛ تگ th یک هدر را در یک جدول HTML تعریف می کند.
در جلسه آینده شما را با تگ thead و کاربردهای آن آشنا می نماییم.
با پی وی لرن همراه باشید.

QR: جلسه ۱۰۸ : آموزش کار با تگ th در HTML

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

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

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

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

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

جلسه ۱۰۸ : آموزش کار با تگ th در HTML

مقدمه

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

تعریف و کاربرد

پشتیبانی مرورگرها

تفاوت بین HTML 4.01 و HTML5

خصیصه ها

خصیصه های سراسری Global Attributes

خصیصه رویداد Event Attributes

مثال های تکمیلی

مثال یک

مثال دو

مثال سه

مثال چهار

تنظیمات پیش فرض CSS

کلام آخر

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

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ