آموزش استفاده از جدول در HTML: طراحی و استایل‌دهی جدول‌های ساده و پیشرفته

< table >
    < tr >
        < th > نام < / th >
        < th > سن < / th >
        < th > شهر < / th >
    < / tr >
    < tr >
        < td > علی< / td >
        < td > ۲۵< / td >
        < td > تهران< / td >
    < / tr >
    < tr >
        < td > زهرا< / td >
        < td > ۳۰< / td >
        < td > مشهد< / td >
    < / tr >
< / table >

< table >
    < caption > جدول اطلاعات کاربران < / caption >
< / table >

< table style="border: 1px solid black; border-collapse: collapse;">
    < tr >
        < th style="border: 1px solid black;" > نام < / th>
        < th style="border: 1px solid black;" > سن < / th>
    < / tr >
    < tr >
        < td style="border: 1px solid black;" > علی < / td >
        < td style="border: 1px solid black;" > ۲۵ < / td >
    < / tr >
< / table >

< tr style="background-color: #f0f0f0;" >
    < td > علی < / td >
    < td > ۲۵ < / td >
< / tr >

th {
    background-color: #4CAF50;
    color: white;
    padding: 10px;
}

td {
    padding: 10px;
    text-align: center;
}

< table border="1" >
    < tr >
        < th > نام < / th >
        < th colspan="2" > اطلاعات تماس < / th >
    < / tr >
    < tr >
        < td > علی < / td >
        < td > ایمیل < / td >
        < td > تلفن < / td >
    < / tr >
    < tr >
        < td > زهرا < / td >
        < td > zahra@example.com < / td >
        < td > 09123456789 < / td >
    < / tr >
< / table >

< th scope="col" > نام < / th >

< ! DOCTYPE html >
< html lang="fa" dir="rtl" >
< head >
    < meta charset="UTF-8" >
    < meta name="viewport" content="width=device-width, initial-scale=1.0" >
    < meta name="description" content="آموزش جداول در HTML" >
    < meta name="keywords" content="HTML, جداول, طراحی جدول, آموزش HTML" >
    < meta name="author" content="نام شما" >
    < title > آموزش جداول در HTML < / title >
    < style >
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: center;
        }
        th {
            background-color: #4CAF50;
            color: white;
        }
        tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        tr:hover {
            background-color: #f1f1f1;
        }
        caption {
            caption-side: top;
            font-size: 1.2em;
            margin-bottom: 10px;
            font-weight: bold;
        }
    < / style >
< / head >
< body >
    < header >
        < h1 > آموزش جداول در HTML < / h1 >
    < / header >
    < main >
        < section >
            < h2 > جدول اطلاعات کاربران < / h2 >
            < table >
                < caption > جدول کاربران < / caption >
                < tr >
                    < th > نام < / th >
                    < th > سن < / th >
                    < th > شهر < / th >
                < / tr >
                < tr >
                    < td > علی < / td >
                    < td > ۲۵ < / td >
                    < td > تهران < / td >
                < / tr >
                < tr >
                    < td > زهرا < / td >
                    < td > ۳۰ < / td >
                    < td > مشهد < / td >
                < / tr >
                < tr >
                    < td > حسین < / td >
                    < td > ۲۸ < / td >
                    < td > شیراز < / td >
                < / tr >
            < / table >
        < / section >
    < / main >
    < footer >
        < p > © 2024 طراحی شده توسط نام شما < / p >
    < / footer >
< / body >
< / html >