ظاهر جدول هاي HTML را مي توان با استفاده از CSS بسيار بهتر كرد.
 

خط حاشيه جدول

براي تعريف خط حاشيه براي جدول ها در CSS از صفت border استفاده مي كنيم.
در مثال زير براي عناصر <table> ،‌ <th> و <td> يك خط حاشيه سياه تعريف شده است :


مثال :

table, th, td {
   border: 1px solid black;
}

تقليل دادن خطوط حاشيه

براي تقليل دادن خطوط حاشيه از 2 خط به يك خط از صفت border-collapse استفاده مي كنيم :

مثال : 

table {
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid black;
}

مثال :

table {
    border: 1px solid black;
}

عرض و ارتفاع جدول

براي تعيين عرض و ارتفاع جدول از صفات width و height استفاده مي كنيم.

در مثال زير عرض جدول بر روي 100% تنظيم شده است و ارتفاع <th> بر روي 50px :‌

مثال :

table {
    width: 100%;
}

th {
    height: 50px;
}

تراز افقي

زماني كه بخواهيم ترازبندي محتواي سلول هاي جدولي را تنظيم كنيم از صفت text-align و مقادير left ،‌ right و center استفاده مي كنيم.
بطور پيش فرض محتواي <th> وسط چين و محتواي <td> چپ چين است. در مثال زير محتواي <th> چپ چين شده است.

مثال :

th {
    text-align: left;
}

تراز عمودي

براي تعيين تراز عمودي محتواي سلول ها ،‌ از صفت vertical-align و مقادير top , bottom و middle استفاده مي كنيم. بطور پيش فرض تراز عمودي محتواي سلول ها در عناصر <th> و <td> در ميانه قرار دارد.

در مثال زير ،‌ تراز عمودي محتواي عنصر <td> بر روي bottom  تنظيم شده است.

مثال :

td {
    height: 50px;
    vertical-align: bottom;
}

فضاي حاشيه جدول

براي كنترل فاصله بين خط حاشيه و محتوا در جدول ،‌ از صفت padding بر روي عناصر <td> و <th> استفاده مي كنيم.

مثال :

th, td {
    padding: 15px;
    text-align: left;
}

خطوط جداكننده افقي

اگر ميخواهيد فقط با يك خط زير از رديف ،‌ آن را از رديف بعدي جدا كنيد ، صفت border-bottom را براي عناصر <th> و <td> تعريف كنيد.

مثال :

th, td {
    border-bottom: 1px solid #ddd;
}

tr:hover {background-color: #f5f5f5}

tr:nth-child(even) {background-color: #f2f2f2}

رنگ جدول

در مثال زير ،‌ رنگ پس زمينه و رنگ متن را براي عنصر <th> تعريف كرده ايم.

مثال :

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

جدول رسپانسيو (واكنش گرا)

اگر صفحه نمايش بيش از حد كوچك شود ،‌ در جدول هاي واكنش گرا ،‌ يك نوار اسكرول افقي به جدول اضافه مي شود تا همه محتوا مشاهده گردد.

يك عنصر نگه دارنده مانند div با صفت و مقدار overflow-x:auto به عنصر <table> اضافه كنيد تا جدول رسپانسيو شود.

مثال :

...محتوای جدول ...