۷
آذر

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

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

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

فهرست

مقدمه

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

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

به مثال زیر توجه نمایید.
در این مثال یک (table) جدول 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>

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

همان طور که تا به حال متوجه شده اید تگ table یک جدول HTML را مشخص می کند.
یک جدول HTML از عنصر table و یک یا چند عنصر tr ،th و td تشکیل شده است.
عنصر tr یک ردیف جدول را مشخص می کند، عنصر th یک هدر جدول را تعریف می کند، و عنصر td یک سلول جدول را تعریف می نماید.

یک جدول HTML پیچیده تر همچنین می تواند شامل عناصر <caption> ، <col> ، <colgroup> ، <thead> ، <tfoot> و <tbody> باشد.

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

نکته

برای چیدمان صفحه نباید از جداول استفاده شود!
برخی از نویسندگان وب از جدول های HTML استفاده کرده و آن را به عنوان روشی برای کنترل صفحه بندی خود به کار می برند!
گزینه های مختلفی برای استفاده از جداول HTML برای layout وجود دارد و پیشنهاد می شود که در درجه اول به سراغ استفاده از CSS بروید.

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

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

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

خصیصه های “align”, “bgcolor”, “border”, “cellpadding”, “cellspacing”, “frame”, “rules”, “summary” و “width” در HTML5 پشتیبانی نمی شوند.

خصیصه ها

خصیصه	مقدار	توضیحات
align	left center right	این خصیصه تراز جدول را با توجه به متن اطراف آن مشخص می کند. این خصیصه در در HTML5 پشتیبانی نمی شود.
bgcolor	rgb(x,x,x) xxxxxx# colorname	رنگ پس زمینه یک جدول را مشخص می کند. این خصیصه در در HTML5 پشتیبانی نمی شود.
border	۱ ۰	مشخص می کند که از جدول برای اهداف layout استفاده شده است یا نه. این خصیصه در در HTML5 پشتیبانی نمی شود.
cellpadding	pixels	فضای بین دیواره سلولی و محتوای سلول را مشخص می کند. این خصیصه در در HTML5 پشتیبانی نمی شود.
cellspacing	pixels	فضای بین سلول ها را مشخص می کند. این خصیصه در در HTML5 پشتیبانی نمی شود.
frame	void above below hsides lhs rhs vsides box border	مشخص می کند کدام قسمت از مرزهای بیرونی که باید قابل مشاهده باشند. این خصیصه در در HTML5 پشتیبانی نمی شود.
rules	none groups rows cols all	این خصیصه قسمت هایی از مرزهای داخل را که باید قابل مشاهده باشند را مشخص می کند. این خصیصه در در HTML5 پشتیبانی نمی شود.
summary	text	این خصیصه خلاصه ای از محتوای یک جدول را ارائه می دهد. این خصیصه در در HTML5 پشتیبانی نمی شود.
width	pixels %	این خصیصه اندازه عرض یک جدول را مشخص می کند. این خصیصه در در HTML5 پشتیبانی نمی شود.

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

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

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

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

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

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

مثال یک

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

مثال :

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

مثال دو

Table به همراه متن (یک جدول 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>

مثال سه

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

مثال :

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

مثال چهار

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

مثال :

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

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

مثال :

table {
  display: table;
  border-collapse: separate;
  border-spacing: 2px;
  border-color: gray;
}

table {

display: table;

border-collapse: separate;

border-spacing: 2px;

border-color: gray;

}

کلام آخر

در این جلسه با آموزش کار با تگ table در HTML همراه شما بودیم؛ به طور خلاصه تگ table یک جدول HTML را مشخص می کند.
در جلسه آینده با تگ tbody آشنا می شویم.
با پی وی لرن همراه باشید.

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

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

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

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

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

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

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

مقدمه

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

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

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

نکته

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

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

خصیصه ها

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

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

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

مثال یک

مثال دو

مثال سه

مثال چهار

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

کلام آخر

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

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ