آموزش کامل HTML و HTML5: کار با جداول(۱)

آموزش کامل HTML و HTML5: کار با جداول(1)Reviewed by محمدرضا on Jan 19Rating: 5.0

سلام

در این قسمت از آموزش کامل HTML و HTML5 در خدمتتان هستیم با کار با جداول HTML. جدول ها در HTML برای نظم بخشیدن به عناصری چون متن ها، فرم ها و تصاویر و… مورد استفاده قرار می گیرند.

ساختار کلی جداول HTML:

ساختار کلی یک جدول در وردرپس با تگ <table> است که برای ردیف ها و ستون ها نیز تگ هایی در آن مورد استفاده قرار می گیرد که با آن ها آشنا خواهیم شد:

<table border="1">
    <tr>
        <th>نام</th>
        <th>نام خانوادگی</th>
        <th>سن</th>
    </tr>
    <tr>
        <td>محمدرضا</td>
        <td>خدری</td>
        <td>19</td>
    </tr>
    <tr>
        <td>محمود</td>
        <td>شعبانی</td>
        <td>25</td>
    </tr>
</table>

نتیجه در مرورگر:

آموزش کامل HTML و HTML5: کار با جداول(1)

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

تگ <table> : برای ایجاد جدول از این تگ استفاده می کنیم. تمام تگ هایی که برای ایجاد یک جدول نیاز داریم باید درون این تگ قرار بگیرد.

صفت های تگ <table>:

border: ضخامت حاشیه جدول را مشخص می کند.

dir: جهت گیری متن درون جدول را مشخص می کند و دو مقدار rtl برای راست به چپ و یا ltr برای چپ به راست را می گیرد.

cellpadding : عددی صحیح بر حسب px را به عنوان مقدار می پذیرد و فضای محتوای داخل سلولها و دیواره هایشان را کنترل می کند.

cellspaceing : عددی صحیح بر حسب px را به عنوان مقدار می پذیرد و فضای بین هر سلول را کنترل میکند.

تصویر زیر موقعیت صفت های  cellpadding و cellspacing را شما نشان می دهد.

آموزش کامل HTML و HTML5: کار با جداول(1)

width : عرض جدول را مشخص میکند و مقداری پیکسلی می پذیرد.

height : ارتفاع جدول را مشخص میکند و مقداری پیکسلی می پذیرد.

bgcolor : رنگ پس زمینه ی جدول را مشخص می کند.

align : قبلا هم با این صفت آشنا شده ایم و اگر به یاد داشته باشید محل قرار گیری عناصر درون جدول را تعیین می کند و سه مقدار right ، left و center را می پذیرد.

  • right: جدول را سمت راست قرار می دهد.
  • left: جدول را سمت چپ قرار می دهد.
  • center: جدول را وسط قرار می دهد.

 تگ <tr> : این تگ همیشه در تگ table استفاده می شود و برای ایجاد ردیف کاربرد دارد.

align : چگونگی چینش متن در هر ردیف را مشخص می کند. و می تواند یکی از مقادیر زیر را بپذیرد :

  • left
  • right
  • center
  • justify

valign : تراز عمودی متن در هر یک از سلول های یک ردیف را مشخص می کند، و مقادیر زیر را می پذیرد.

  • top : محتوای سلول را با با بالای سلول تراز می کند.
  • middle : محتوای سلول را با وسط سلول تراز می کند.
  • bottom : محتوای سلول را با پایین سلول تراز می کند.
  • baseline : محتوای سلول را با اولین خطی که محتوای سلول ها از آن آغاز می شود همتراز می کند.

تگ های <td> و <th> :  از این دو تگ برای ایجاد سلول های داخل هر ردیف استفاده می شود.

تگ <th>: برای سلول هایی که شامل عنوان جدول هستند.

تگ <td>: برای سلول هایی که شامل داده های جدول ساده هستند.

nowrap : این صفت از شکسته شدن متن موجود در یک سلول جلوگیری می کند.

colspan : اگر بخواهیم در زیر یک ستون چندین ستون دیگر را داشته باشیم از این صفت استفاده می کنیم و عددی را میپذیرد که این عدد تعداد ستون های تشکیل شده از ستون اصلی هستند. با توجه به مثال زیر متوجه خواهید شد.

<table border="1">
    <tr>
        <th colspan="4"> اطلاعات من</th>
    </tr>
    <tr>
        <td>محمدرضا</td>
        <td>خدری</td>
        <td>19</td>
        <td>ایران</td>
    </tr>
</table>

نتیجه در مرورگر:

آموزش کامل HTML و HTML5: کار با جداول(1)

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

<table border="1">
    <tr>
        <td>محمدرضا</td>
        <th rowspan="3"> اطلاعات من </th>
    </tr>
    <tr>
        <td>خدری</td>
    </tr>
    <tr>
        <td>18</td>
    </tr>
 </table>

نتیجه در مرورگر:

آموزش کامل HTML و HTML5: کار با جداول(1)

به پایان این بخش از آموزش رسیدیم. امیدوارم که تونسته باشم مطالب رو برای شما عزیزان بخوبی ارائه داده باشم.

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

یکی از این ابزار ها http://divtable.com/generator است که به راحتی با چد کلیک می توانید جدول مورد نظرتان را بسازید.

موفق باشید…

Html Html5 آموزش طراحی رابط کاربری

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