جدول ها در css

Table Borders

از خصوصیت border برای تعیین مرزهای جدول در CSS استفاده می شود. مثال زیر مرز سیاه را برای عناصر
table(خود جدول) ، th(عنوان جدول) ، td(سلول های جدول) را مشخص می کند:

table, th, td {
    border: 1px solid white;
}
<table>
    <tr>
        <th>Firstname</th>
        <th>Lastname</th>
    </tr>
    <tr>
        <td>Peter</td>
        <td>Griffin</td>
    </tr>
    <tr>
        <td>Lois</td>
    <td>Griffin</td>
    </tr>
</table>

خروجی :

Firstname Lastname
Peter Griffin
Lois Griffin

توجه داشته باشید که جدول در مثال بالا دارای مرزهای دوگانه است. این به این علت است که هم جدول و عناصر th و td دارای مرزهای مجزا هستند.

خاصیت border-collapse تعیین می کند که مرزهای جدول باید به یک مرز واحد تبدیل شوند:

table {
    border-collapse: collapse;
}
table, td, th {
    border: 1px solid white;
}

خروجی :

Firstname Lastname
Peter Griffin
Lois Griffin

اگر فقط می خواهید یک مرز در اطراف جدول باشد، فقط ویژگی مرزی را برای table مشخص کنید:

table {
    border: 1px solid white;
    border-collapse: collapse;"
}

خروجی :

Firstname Lastname
Peter Griffin
Lois Griffin

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

عرض و ارتفاع یک جدول با ویژگی های width و height تعریف می شود. مثال زیر پهنای جدول را ۱۰۰٪ تعریف می کند و ارتفاع عنوان جدول را مقدار۵۰ پیکسل تعیین می کند :

table, td, th {
    border: 1px solid white;
}
table {
    border-collapse: collapse;
    width: 100%;
}
th {
    height: 50px;
}

خروجی :

Firstname Lastname
Peter Griffin
Lois Griffin

ترازبندی افقی جدول

خصوصیت text-align تراز افقی (مانند چپ، راست، یا مرکز) محتوا را درون th یا td تنظیم می کند.

th {
    text-align: center;
}

خروجی :

Firstname Lastname
Peter Griffin
Lois Griffin

چیدمان عمودی جدول

خاصیت vertical-align تطبیق عمودی (مثل بالا، پایین، یا وسط) محتوا را در th یا td تنظیم می کند.

مثال زیر تراز عمودی متن را به پایین برای عناصر td تنظیم می کند:

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

خروجی :

Firstname Lastname
Peter Griffin
Lois Griffin

Table Padding

برای کنترل فضای بین مرز و محتوا در یک جدول، از خصوصیت padding در th و td elements استفاده می شود :

th, td {
    padding: 15px;
}

خروجی :

آموزش CSS (بخش پنجم)
شاید این مطلب را نیز بپسندید
Firstname Lastname
Peter Griffin
Lois Griffin

رنگ در جدول

مثال زیر رنگ پس زمینه و رنگ متن عناصر را مشخص می کند:

tr:nth-child(even){
    background-color: #f2f2f2;
}
th {
    background-color: #4CAF50;
    color: white;
}

خروجی :

Firstname Lastname
Peter Griffin
Lois Griffin

خصوصیت display

ویژگی display مهمترین ویژگی CSS برای کنترل لایه ها است. این خصوصیات مشخص می کند که چگونه یک عنصر نمایش داده شود. هر عنصر HTML دارای مقدار پیش فرض display بسته به نوع آن عنصر است. مقدار display پیش فرض برای اکثر عناصر block یا inline است.

عناصر بلوکی(block)

یک عنصر سطح block همیشه بر روی یک خط جدید شروع می شود و عرض کامل را در دسترس می گیرد (تا آنجا که ممکن است به سمت چپ و راست برسد).

مثال هایی از عناصر سطح block :

<div>
<h1> - <h6>
<p>
<form>
<header>
<footer>
<section>

عناصر درون خطی(inline)

یک عنصر درون خطی در خط جدید شروع نمی شود و فقط به همان اندازه که لازم است، طول عرض ضفحه را می گیرد.

نمونه هایی از عناصر خطی inline :

<span>
<a>
<img>

;Display: none

;Display: none معمولا با جاوا اسکریپت برای مخفی کردن و نمایش عناصر بدون حذف و بازسازی آنها استفاده می شود.

همانطور که گفته شد، هر عنصر یک مقدار display پیش فرض دارد. با این حال، شما می توانید آن را نادیده بگیرید.

تغییر عنصر block به یک inline یا برعکس می تواند مفید باشد برای اینکه صفحه به یک روش خاص نگاه شود و همچنان استانداردهای وب را دنبال کند. مثلا برای ایجاد منوی افقی لازم است که عناصر li به صورت inline در بیایند.

li {
    display: inline;
}
<ul>
    <li><a href="#" target="_blank">HTML</a></li>
    <li><a href="#" target="_blank">CSS</a></li>
    <li><a href="#" target="_blank">JavaScript</a></li>
</ul>

تفاوت display:none با visibility:hidden در چیست ؟

در display:none عنصر به همرا عرض و ارتفاعی که اشغال کرده بود از صفحف محو می شوند ولی در visibility:hidden خود عنصر از دید محو می شود ولی عرض و ارتفاعی را که از صفحه اشغال کرده بود در صفحه همچنان باقی می ماند.

آموزش CSS (بخش دوازدهم)