۷
آذر

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

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

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

فهرست

مقدمه

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

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

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

مثال :

<table>
  <tr>
    <td>Cell A</td>
    <td>Cell B</td>
  </tr>
</table>

<table>

<tr>

</tr>

</table>

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

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

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

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

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

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

نکات و توصیه ها

توصیه

برای ردیف کردن چند ستون یا چند ردیف، از خصیصه های colspan و rowspan استفاده کنید.

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

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

خصیصه ها

خصیصه	مقدار	توضیحات
abbr	text	این خصیصه نسخه خلاصه مطالب موجود در یک سلول را مشخص می کند. این خصیصه در HTML5 پشتیبانی نمی شود.
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	این خصیصه مشخص میکند که یک سلول (td) مرتبط یا متعلق به یک ستون (th) است.
height	pixels %	این خصیصه ارتفاع یک سلول را تنظیم می کند. این خصیصه در HTML5 پشتیبانی نمی شود.
nowrap	nowrap	این خصیصه مشخص می کند که محتوای داخل سلول نباید ادغام شود. این خصیصه در HTML5 پشتیبانی نمی شود.
rowspan	number	برای ادغام کردن سطرهای یک جدول استفاده می شود.
scope	col colgroup row rowgroup	راهی را برای مرتبط کردن سلول های جدول با ستون های آن تعیین می نماید. این خصیصه در HTML5 پشتیبانی نمی شود.
valign	top middle bottom baseline	تراز محتوای موجود در تگ td را بصورت عمودی مشخص می کند. این خصیصه در HTML5 پشتیبانی نمی شود.
width	pixels %	این خصیصه عرض یک سلول را تنظیم می نماید. این خصیصه در HTML5 پشتیبانی نمی شود.

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

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

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

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

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

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

مثال :

td {
  display: table-cell;
  vertical-align: inherit;
}

td {

display: table-cell;

vertical-align: inherit;

}

کلام آخر

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

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

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

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

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

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

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

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

مقدمه

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

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

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

نکات و توصیه ها

توصیه

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

خصیصه ها

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

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

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

مثال یک

مثال دو

مثال سه

مثال چهار

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

کلام آخر

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

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ