ساخت و ایجاد جدول در html

می توانید با استفاده از عنصر <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;
}98

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


مثال های کاربردی

کد را امتحان کنید

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 بسازیم . و چگونه جدول ها رو استایل دهی کنیم امیدوارم در این آموزش تونسته باشیم نظر شما رو جلب کنیم و یادگیری رو به شکل مطلوب خودش پیگرفته باشیم هر گونه ابهام داشتید با کمال میل پاسخگو خواهیم بود تا ادامه موضوعات بعدی بخدا وند میسپایم همه شما عزیزان رو بدرود.


قبلی

بعدی

ثبت دیدگاه های شما