۷
آذر

جلسه ۱۱۲ : آموزش کار با تگ tr در HTML

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

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

فهرست

مقدمه

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

آموزش کار با تگ tr در 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>

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

تگ tr یک ردیف را در یک جدول HTML تعریف می کند.
یک تگ tr شامل یک یا چند عنصر th یا td است.

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

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

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

تمام خصیصه ها در HTML5 حذف شده است.

خصیصه ها

خصیصه	مقدار	توضیحات
align	right left center justify char	این خصیصه محتوای درون تگ<tr> را تراز می کند. این خصیصه در در HTML5 پشتیبانی نمی شود.
char	character	این خصیصه تراز محتوای درون تگ tr را بر اساس کاراکتر تعیین می نماید. این خصیصه در در HTML5 پشتیبانی نمی شود.
charoff	number	این خصیصه تعداد کاراکترهای موجود در تگ <tr> را با کاراکتر مشخص شده با خصیصه char تنظیم می کند. این خصیصه در در HTML5 پشتیبانی نمی شود.
valign	top middle bottom baseline	تراز محتوای موجود در تگ tr را بصورت عمودی مشخص می نماید. این خصیصه در در HTML5 پشتیبانی نمی شود.

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

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

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

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

در ادامه آموزش کار با تگ tr در 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

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

مثال :

tr {
  display: table-row;
  vertical-align: inherit;
  border-color: inherit;
}

tr {

display: table-row;

vertical-align: inherit;

border-color: inherit;

}

کلام آخر

در این جلسه به آموزش کار با تگ tr در HTML پرداختیم و آموختیم که تگ tr یک ردیف را در یک جدول HTML تعریف می کند.
در جلسه بعدی این به کار با تگ track می پردازیم.
با پی وی لرن همراه باشید.

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

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

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

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

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

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

جلسه ۱۱۲ : آموزش کار با تگ tr در HTML

مقدمه

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

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

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

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

خصیصه ها

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

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

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

مثال یک

مثال دو

مثال سه

مثال چهار

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

کلام آخر

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

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ