نحوه جدول بندی در سند html

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

جدول بندی html برای نمایش نوشته های جدولی مانند لیست محصولات ، جزئیات مشتری ، گزارش های مالی و غیره استفاده می شوند.

می توانید در بعضی موارد برای زیبا سازی صفحه میتوان از جدول استفاده کرد .

 نحوه استفاده از عنصر table

می توانید با استفاده از عنصر <table> یک جدول ایجاد کنید. در داخل عنصر <table> ، می توانید از عناصر <tr> برای ایجاد سطر استفاده کنید و برای ایجاد ستون در داخل یک ردیف می توانید از عناصر <td> استفاده کنید. همچنین می توانید با استفاده از عنصر <th> یک قسمتهایی را به عنوان هدر و برای بخش هایی از همان قسمت جدول ایجاد کنید. در ادامه به مثال زیر توجه کنید:

<table>
    <tr>
        <th>No.</th>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Peter Parker</td>
        <td>16</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Clark Kent</td>
        <td>34</td>
    </tr>
</table>

جداول به طور پیش فرض هیچ حاشیه ای ندارند. می توانید از استایل دهی با CSS هاشیه بندی و خط کشی کنید . همچنین ، بخش های جدول به اندازه کافی بزرگ هستند که به طور پیش فرض در متن محتویات متناسب باشند. برای افزودن فضای بیشتر باز هم میتوانید از خصوصیات CSS padding استفاده کنید.

فاصله بندی و خط کشی جداول

table, th, td {
    border: 1px solid black;
}
th, td {
    padding: 10px;
}۹۸

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

table {
    border-collapse: collapse;
}
th {
    text-align: left;
}

توجه: بسیاری از ویژگی های <table> مانند ، عرض ، تراز و غیره برای ظاهر شدن جدول در نسخه های قبل از HTML5 کاهش یافته است ، بنابراین از استفاده از آنها خودداری کنید. در عوض از CSS استفاده کنید تا جداول HTML را زیبا کنید.

چکونگی ساخت ستون و ردیف در جداول

تقسیم بندی به شما امکان می دهد سطرها و ستونهای جدول را در چندین ردیف و ستون دیگر گسترش دهید.به طور معمول ، یک سلول جداول نمی تواند به فضای زیر یا بالای سلول جدول دیگری منتقل شود. اما می توانید از صفات rowspan یا colspan استفاده کنید تا چندین ردیف یا ستون را در یک جدول بسازید.

در کد های زیر دقت کنید تا تفاوت با جدول های قبل را متوجه شوید:

<table>
    <tr>
        <th>نام</th>
        <th colspan="2">تلفن</th>
    </tr>
    <tr>
        <td>محمد نوین</td>
        <td>5550192</td>
        <td>5550152</td>
    </tr>
</table>

به شکل مشابه ، می توانید از ویژگی rowspan برای ایجاد چند ردیف برای ستون خاص که بیش از یک ردیف داشته باشه بسازید بیاین یک نمونه را امتحان کنید تا بفهمیم که اساساً چگونگی استفاده از ردیف چه شکلی میشه

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

<table>
    <tr>
        <th>نام:</th>
        <td>احسان</td>
    </tr>
    <tr>
        <th rowspan="2">تلفن:</th>
        <td>0515577854</td>
    </tr>
    <tr>
        <td>0517877855</td>
    </tr>
</table>

ساختن سر صفحه یا هدر , بدنه و پا ورقی یا فوتر در جدول

در انواع جدول ها ما میتونیم در HTML مجموعه ای از تگ ها و برچسب های <thead> ، <tbody> و <tfoot> را استفاده کنیم تا به ترتیب با تعیین سرصفحه ، قسمت های بدن و پاورقی ، جدول کار آمد تری ایجاد کنیم. در ادامه تمرین کنید و لذت ببرید:

<table>
    <thead>
        <tr>
            <th>موارد خرید</th>
            <th>قیمت</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>لباسشویی</td>
            <td>2,000,000</td>
        </tr>
        <tr>
            <td>مبلمان</td>
            <td>10,000,000</td>
        </tr>  
        <tr>
            <td>فرگاز</td>
            <td>3,000,000</td>
        </tr> 
          <tr>
            <td>فریزر</td>
            <td>15,000,000</td>
        </tr> 	
    </tbody>
    <tfoot>
        <tr>
            <th>جمع کل</th>
            <td>30,000,000</td>
        </tr>
    </tfoot>
</table>

نتیجه:

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