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

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

سلام

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

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

<table border="1">
<caption> عنوان جدول </caption>

بصورت پیش فرض مکان آن در بالای جدول و وسط قرار دارد که می توان آن را با صفت align به مکان دلخواه برد.

align : محل قرارگیری عنوان جدول را مشخص می کند و مقادیر زیر را می پذیرد:

  • right : عنوان در سمت راست جدول قرار میگیرد.
  • left : عنوان در سمت چپ جدول قرار میگیرد.
  • top : عنوان در بالای جدول قرار داده می شود.
  • bottom : عنوان در پایین جدول قرار داده می شود.

گروه بندی جداول:

می توانیم جدول را به سه قسمت بصورت گروهی و ردیفی تقسیم کنیم و خواص مشابه را به آن ها اعمال کنیم.

گروه بندی ردیفی:

ما می توانیم ردیف های جدول را به سه نوع گروه ردیفی تقسیم کنیم : foot , body , head و برای اینکار از سه تگ <tfoot> , <tbody> , <thead> استفاده می کنیم.

<table border="1">
    <thead>
         <tr>
             <th>نام</th>
             <th>سن</th>
         <tr>
    </thead>
 
    <tfoot>
         <tr>
             <td>نویسنده:محمدرضا</td>
             <td>وبسایت فاب تم</td>
         </tr>
    </tfoot>
 
    <tbody>
         <tr>
             <td>محمود</td>
             <td>25</td>
         </tr>
    </tbody>
 
    <tbody>
         <tr>
             <td>علی</td>
             <td>32</td>
         </tr>
    </tbody>
 
</table>

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

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

نکته: ردیف هایی که در تگ <thead> وجود دارند در ردیف بالای جدول و ردیف های موجود در تگ <tfoot> در ردیف پایین جدول قرار می گیرد.

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

معرفی تگ <div>:

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

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

لازم به ذکر است برای بخش بندی صفحات وب با نسخه ی جدید HTML یعنی HTML5 تگ های جدیدی جایگزین این تگ شدند که با توجه به عمل خود در بخش های متفاوت معانی خاصی را برای مرورگر ها می رسانند.

قبل از HTML5 ما از تگ div برای تمامی بخش بندی های سایتمان استفاده می کردیم اما با وجود HTML5 ما موظف به این هستیم تا کدهای خود را بهینه تر و با معنایی بیشتری توسط HTML5 بنویسیم.

در HTML5 تگ هایی برای انجام اعمال هر بخش آمدند:

تگ <nav>:

این تگ برای ساخت منوی بالای سایت است. شاید در بسیازی از سایت های منوی بالایی را مشاهده کرده اید این تگ دقیقا همان نقش را برعهده دارد.

محتوای درونی این تگ لیست های نامرتب هستند که در جلسات آینده با لیست های نامرتب آشنا خواهیم شد.

تگ <header>:

پیش از وجود HTML5 ما تمام بخش هدر یک سایت را درون تگ div قرار میدادیم که با آمدن HTML5 و معنا بخشیدن به صفحه ی وب تمام هدر سایت را در این صفحه قرار می دهیم.

تگ <footer>:

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

تگ <section>:

برای بخش بندی های دیگر در صفحه ی وب مورد استفاده قرار می گیرد.

معرفی تگ <span>:

این تگ نیز هماننده تگ div برای بخش بندی صفحات وب مورد استفاده قرار می گیرد با این تفاوت که بیشتر برای محتوای متنی از آن استفاده می شود.

<p>My mother has <span style="color:blue">blue</span> eyes.</p>
Try it Yourself »

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

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

موفق باشید….

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

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