ایجاد جدول در html

جداول در برنامه نویسی تحت وب پرکاربرد و مهم هستند. در زبان وب نویسی HTML برای تعریف جدول از تگ <table> استفاده می شود.

برای ایجاد جدول با زبان html به صورت زیر عمل می کنیم:

<!DOCTYPE html> 
<html> 
    <body> 
        <table style="width:100%"> 
            <tr>
                <th>شماره</th>
                <th>نام</th>
                <th>نام خانوادگی</th>
            </tr>

            <tr>
                <td>1500</td>
                <td>رضا</td>
                <td>حسنی</td>
            </tr>
            
            <tr>
                <td>1501</td>
                <td>جمشید</td>
                <td>قلیزاده</td>
            </tr>
        </table>
    </body>
</html>

با تگ <table> جدول را ایجاد می کنیم
با تگ <tr> یک سطر ایجاد می کنیم
با تگ <th> برای جدول هدر ایجاد می کنیم
با تگ <td> برای سلول های جدول دیتا ست می کنیم.

برای اینکه عنوانی برای جدول ایجاد کنیم از تگ caption به صورت زیر استفاده می کنیم:

<!DOCTYPE html> 
<html>
    <body> 
        <table style="width:100%"> 
            <caption>اسامی شرکت کنندگان</caption> 
            <tr>
                <th>شماره</th> 
                <th>نام</th> 
                <th>نام خانوادگی</th> 
            </tr> 
            <tr> 
                <td>1500</td> 
                <td>رضا</td> 
                <td>حسنی</td> 
            </tr> 
            <tr> 
                <td>1501</td> 
                <td>جمشید</td> 
                <td>قلیزاده</td> 
            </tr> 
        </table> 
    </body>
</html>

با خاصیت یا attribute ای که border نام دارد می توان خطوط جدول را مشخص نمود.

برای مثال:

<!DOCTYPE html> 
<html> 
    <body> 
        <table border="1"> 
            <caption>اسامی شرکت کنندگان</caption> 
            <tr> 
                <th>شماره</th> 
                <th>نام</th> 
                <th>نام خانوادگی</th> 
            </tr> 
            <tr> 
                <td>1500</td> 
                <td>رضا</td> 
                <td>حسنی</td> 
            </tr> 
            <tr> 
                <td>1501</td> 
                <td>جمشید</td> 
                <td>قلیزاده</td> 
            </tr> 
        </table> 
    </body>
</html>

نکته: به صورت پیشفرض border برابر با صفر است و وقتی border برابر با صفر باشد خطوط جدول آشکار نخواهند شد. اگر border را برابر با 1 قرار دهید خطوط آشکار خواهند شد.

خانه های چند ستونی در جدول HTML

برای اینکه یک خانه از جدول چند سطر یک ستون را پر کنیم، مثلا در یک جدول 4 ستونی یکی از خانه های جدول سه ستون باشد، از ویژگی colspan استفاده می کنیم.

مثال:

<table style="width:100%"> 
    <tr> 
        <th>Name</th> 
        <th colspan="2">Telephone</th> 
    </tr> 
    <tr> 
        <td>Bill Gates</td>
        <td>55577854</td> 
        <td>55577855</td> 
    </tr> 
</table>

خانه چند سطری در جدول HTML

اگر بخواهیم خانه ای از جدول چند ستون را پر کند، از ویژگی rowspan استفاده می کنیم. با استفاده از این ویژگی مثلا می توان در یک جدو 5 ستونی در یک سطر دو خانه داشته باشیم.

مثال:

<table style="width:100%">
    <tr> 
        <th>Name:</th> 
        <td>Bill Gates</td> 
    </tr> 
    <tr> 
        <th rowspan="2">Telephone:</th> 
        <td>55577854</td> 
    </tr> 
    <tr> 
        <td>55577855</td> 
    </tr> 
</table>

Table در HTML

ایجاد جدول در html

خانه های چند ستونی در جدول HTML

خانه چند سطری در جدول HTML

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید لغو پاسخ

ایجاد جدول در html

خانه های چند ستونی در جدول HTML

خانه چند سطری در جدول HTML

مطالب زیر را حتما مطالعه کنید

طراحی جدول ها در بوت استرپ

سیستم Grid در بوت استرپ 4

آشنایی با Bootstrap 4

تایپوگرافی در بوت استرپ 4

آموزش قدم به قدم Bootstrap

استایل Border در CSS

دیدگاهتان را بنویسید لغو پاسخ