16- كورس CSS للمبتدئين – CSS: تنسيق الجداول Tables

table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
            color: black;
        }
        tr:hover {
            background-color: #f5f5f5;
        }
    


    <table>
        <tr>
            <th>الاسم</th>
            <th>العمر</th>
            <th>المدينة</th>
        </tr>
        <tr>
            <td>أحمد</td>
            <td>25</td>
            <td>القاهرة</td>
        </tr>
        <tr>
            <td>ليلى</td>
            <td>30</td>
            <td>الرياض</td>
        </tr>
    </table>

table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            border: 1px solid #ddd;
            border-radius: 10px;
            overflow: hidden;
        }
        th, td {
            padding: 12px;
            text-align: center;
        }
        th {
            background-color: #4CAF50;
            color: white;
        }
        tr:nth-child(even) {
            background-color: #f2f2f2;
        }
    


    <table>
        <tr>
            <th>المنتج</th>
            <th>السعر</th>
            <th>الكمية</th>
        </tr>
        <tr>
            <td>هاتف</td>
            <td>$300</td>
            <td>50</td>
        </tr>
        <tr>
            <td>لابتوب</td>
            <td>$800</td>
            <td>30</td>
        </tr>
    </table>