۰۵ اسفند ۱۳۹۰ ۳ 1523 بازدید

در این مقاله ی آموزش طراحی سایت و در ادامه ی سلسله مقاله های آموزشی طراحی صفحات وب؛ مباحث و نکات مربوط به استفاده از جداول در html را بررسی می کنیم.

کاربرد و موارد استفاده از جداول در طراحی صفحات وب:

در گذشته طراحی کل یک وب سایت با استفاده از جداول صورت میگرفت که امروزه این روش به علت ایرادات فراوانی که به آن وارد هست؛ کاملا منسوخ شده است؛ هرچند که هنوز بعضی از شرکت ها و افرادی که در زمینه ی طراحی سایت مشغول هستند؛ متاسفانه از این روش استفاده می کنند.

طراحی ها بر مبنای استفاده یا عدم استفاده و تکیه ی بر جداول، به دو دسته ی Tablebase و Tableless تقسیم می شوند.

ما در مجموعه ی طراحی سایت آنلاینر، مطابق استانداردهای روز عمل کرده و طراحی وب سایت ها را بر مبنای استفاده ی صحیح از html و css و jQuery و بدون استفاده از جداول، (بصورت tableless) انجام می دهیم.

موارد استفاده از جداول

جداول می بایستی برای داده های جدولی به کار بروند، و برای طراحی و قسمت بندی کل صفحات یک سایت، از استفاده ی آن ها پرهیز شود؛ منظور از داده های جدولی یعنی داده هایی که اساسا می بایستی در یک جدول قرار بگیرند، مانند لیست دانشجویان بهمراه شماره های دانشجویی؛ فهرست حقوق بگیران بهمراه سوابق کاری آن ها و …

جداول یا همان table ها  در HTML

هر جدول به سطرهایی(بوسیله تگ)تقسیم می شود، و هر سطر به سلول های داده (با تگ) تقسیم شده می شود.
Td مخفف “table data” (داده های جدول) که محتوای سلول داده را نگه می دارد. تگ می تواند حاوی متن ها ، پیوند ها، تصاویر ، لیست ها ، فرم ها ، جداول دیگر، و غیره با شد.
به عنوان مثال:

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
 <td>row 2, cell 2</td>
 </tr>
 </table>

کد HTML بالا در یک مرورگر اینطو ری به نظر می رسد :

 صفت حاشیه(border)

اگر شما عنصر حاشیه را مشخص نکرده با شید ، جدول بدون حاشیه نشان داده می شود. گاهی اوقات این می تواند مفید باشد، اما بسیاری از اوقات، ما می خواهیم حاشیه ها را نشان دهیم.
برای نمایش یک جدول با حاشیه ،عنصر حاشیه را مشخص کنیم.
برای مثال:

<table border="1">
 <tr>
 <td>Row 1, cell 1</td>
 <td>Row 1, cell 2</td>
 </tr>
 </table>
 

سرآیندهای جدول

اطلاعات هدر(سر آیند) در یک جدول با تگ تعریف می شوند. تمام مرورگرهای اصلی متن در عنصر را به صورت درشت و در مرکز نشان می دهند.
به عنوان مثال:

<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
 <td>row 2, cell 1</td>
 <td>row 2, cell 2</td>
 </tr>
</table>

که نتیجه به صورت زیر است:

کلیدواژه ها ی جداول در اچ تی ام ال  :

  • تگ Table : یک جدول راتعریف می کند.
  • تگ th: یک سر آیند در جدول را معرفی می کند.
  • تگ tr: جدول به صورت سطری تعریف می شود.
  • تگ td: یک سلول جدول را معرفی می کند.
  • تگ colgroup: یک گروه از ستون ها در یک جدول، برای قالب بندی معرفی می شود.
  • تگ col: تعریف مقادیر مشخصه برای یک یا چند ستون در یک جدول

نظرات کاربران (۳)



  1. بهاره

    سلام تشکرمی کنم از مطلب خوب و مفیدتون موفق باشید.

  2. حمید شجاعی

    سلام خسته نباشید من ساکن مشهد هستم میخواستم یک اموزشگاه خوب طراحی وب در محدوده ی طلاب و طبرسی برایم معرفی کنید و آدر س آموزشگا های شما و شعبه هایش را اگر لطف کنید برایم ایمیل بزنید با تشکر فراوان……………………….


  3. ممنون از برگزاری دوره